vue3输入框用法

基础用法：

<el-form-item label="名称">
  <el-input v-model="form.port" placeholder="请输入名称"/>
</el-form-item>

禁用状态：通过 disabled 属性指定是否禁用 input 组件

<el-form-item label="名称">
  <el-input v-model="form.port" placeholder="请输入名称" :disabled="true"/>
</el-form-item>

可清空：使用clearable属性即可得到一个可清空的输入框

<el-form-item label="名称">
  <el-input  v-model="form.port" placeholder="请输入名称" clearable/>
</el-form-item>

密码框：使用show-password属性即可得到一个可切换显示隐藏的密码框

<el-form-item label="名称">
  <el-input  v-model="form.port" placeholder="请输入名称" show-password/>
</el-form-item>

选择输入框：从列出的选项中选择

<el-col :span="24">
  <el-form-item label="所属场地">
    <el-select v-model="form.path" placeholder="请输入所属场地" clearable>
      <el-option label="所有" value="1" />
      <el-option label="1号场地" value="1" />
      <el-option label="2号场地" value="2" />
      <el-option label="3号场地" value="3" />
      <el-option label="4号场地" value="4" />
    </el-select>
  </el-form-item>
</el-col>

输入框尺寸：可通过 size 属性指定输入框的尺寸，除了默认的大小外，还提供了 medium、small 和 mini 三种尺寸。

<el-form-item label="名称">
  <el-input  v-model="form.port" placeholder="请输入名称" size="medium"/>
</el-form-item>

输入长度限制：maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。

<el-col :span="24">
  <el-form-item label="驱动">
    <el-input v-model="form.driveId" placeholder="请输入驱动" maxlength="40" show-word-limit/>
  </el-form-item>
</el-col>

maxlength="40"表示可输入的长度

输入框自行调整高度和宽度：通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。

<el-col :span="24">
  <el-form-item label="驱动">
<el-input v-model="form.driveId" placeholder="请输入驱动"  :autosize="{ minRows: 2, maxRows: 4}" /> 
</el-form-item>
</el-col>