输入框（form-input）

通过鼠标或键盘输入字符

TIP

参考ElementUI文档Input 输入框 (opens new window)。

WARNING

Input 为受控组件，它总会显示 Vue 绑定值。

通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用 v-model ）。否则，输入框内显示的值将不会改变。

不支持 v-model 修饰符。

基础用法

<itv-form>
  <itv-form-input label="活动名称" v-model="input"></itv-form-input>
</itv-form>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>

Expand Copy Copy

禁用状态

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

<itv-form>
  <itv-form-input label="活动名称" v-model="input" disabled></itv-form-input>
</itv-form>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>

Expand Copy Copy

可清空

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

<itv-form>
  <itv-form-input label="活动名称" v-model="input" clearable></itv-form-input>
</itv-form>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>

Expand Copy Copy

密码框

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

<itv-form>
  <itv-form-input label="密码" v-model="input" show-password></itv-form-input>
</itv-form>
<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>

Expand Copy Copy

带 icon 的输入框

带有图标标记输入类型

属性方式： slot 方式：

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

属性方式：
<itv-form :gutter="20">
  <itv-form-input label="日期" v-model="input1" :span="12" suffix-icon="el-icon-date"></itv-form-input>
  <itv-form-input label="内容" v-model="input2" :span="12" prefix-icon="el-icon-search"></itv-form-input>
</itv-form>
slot 方式：
<itv-form :gutter="20">
  <itv-form-input label="日期" v-model="input3" :span="12">
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </itv-form-input>
  <itv-form-input label="内容" v-model="input4" :span="12">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </itv-form-input>
</itv-form>
<script>
  export default {
    data() {
      return {
        input1: '',
        input2: '',
        input3: '',
        input4: ''
      }
    }
  }
</script>

Expand Copy Copy

文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea。

文本域高度可通过 rows 属性控制

<itv-form>
  <itv-form-input label="内容" type="textarea" :rows="2" v-model="textarea"></itv-form-input>
</itv-form>

<script>
  export default {
    data() {
      return {
        textarea: ''
      }
    }
  }
</script>

Expand Copy Copy

可自适应文本高度的文本域

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

<itv-form>
  <itv-form-input label="内容1" type="textarea" :rows="2" autosize v-model="textarea1"></itv-form-input>
  <itv-form-input label="内容2" type="textarea" :rows="2" :autosize="{ minRows: 2, maxRows: 4}" v-model="textarea2"></itv-form-input>
</itv-form>

<script>
  export default {
    data() {
      return {
        textarea1: '',
        textarea2: ''
      }
    }
  }
</script>

Expand Copy Copy

复合型输入框

可前置或后置元素，一般为标签或按钮

可通过 slot 来指定在 input 中前置或者后置内容。

<itv-form>
  <itv-form-input label="内容" v-model="input1">
    <template slot="prepend">Http://</template>
  </itv-form-input>
  <itv-form-input label="内容" v-model="input2">
    <template slot="append">.com</template>
  </itv-form-input>
  <itv-form-input label="内容" v-model="input3">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="餐厅名" value="1"></el-option>
      <el-option label="订单号" value="2"></el-option>
      <el-option label="用户电话" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </itv-form-input>
</itv-form>

<style>
  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
  export default {
    data() {
      return {
        input1: '',
        input2: '',
        input3: '',
        select: ''
      }
    }
  }
</script>

Expand Copy Copy

尺寸

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

<itv-form :gutter="10">
  <itv-form-input label="默认" :span="12" v-model="input1"></itv-form-input>
  <itv-form-input label="medium" size="medium" :span="12" v-model="input2"></itv-form-input>
  <itv-form-input label="small" size="small" :span="12" v-model="input3"></itv-form-input>
  <itv-form-input label="mini" size="mini" :span="12" v-model="input4"></itv-form-input>
</itv-form>


<script>
  export default {
    data() {
      return {
        input1: '',
        input2: '',
        input3: '',
        input4: ''
      }
    }
  }
</script>

Expand Copy Copy

输入长度限制

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

<itv-form>
  <itv-form-input label="内容1" v-model="text" maxlength="10" show-word-limit></itv-form-input>
  <itv-form-input label="内容2" type="textarea" v-model="textarea" maxlength="30" show-word-limit></itv-form-input>
</itv-form>

<script>
  export default {
    data() {
      return {
        text: '',
        textarea: ''
      }
    }
  }
</script>

Expand Copy Copy

Attributes

TIP

默认继承FormItem基础属性FormItem组件。

参数	说明	类型	可选值	默认值
type	类型	string	text，textarea 和其他 原生 input 的 type 值 (opens new window)	text
value / v-model	绑定值	string / number	—	—
maxlength	原生属性，最大输入长度	number	—	—
minlength	原生属性，最小输入长度	number	—	—
show-word-limit	是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效	boolean	—	false
placeholder	输入框占位文本	string	—	—
clearable	是否可清空	boolean	—	false
show-password	是否显示切换密码图标	boolean	—	false
disabled	禁用	boolean	—	false
size	输入框尺寸，只在 type!="textarea" 时有效	string	medium / small / mini	—
prefix-icon	输入框头部图标	string	—	—
suffix-icon	输入框尾部图标	string	—	—
rows	输入框行数，只对 type="textarea" 有效	number	—	2
autosize	自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }	boolean / object	—	false
autocomplete	原生属性，自动补全	string	on, off	off
auto-complete	下个主版本弃用	string	on, off	off
name	原生属性	string	—	—
readonly	原生属性，是否只读	boolean	—	false
max	原生属性，设置最大值	—	—	—
min	原生属性，设置最小值	—	—	—
step	原生属性，设置输入字段的合法数字间隔	—	—	—
resize	控制是否能被用户缩放	string	none, both, horizontal, vertical	—
autofocus	原生属性，自动获取焦点	boolean	true, false	false
form	原生属性	string	—	—
label	输入框关联的label文字	string	—	—
tabindex	输入框的tabindex	string	-	-
validate-event	输入时是否触发表单的校验	boolean	-	true

Slots

name	说明
prefix	输入框头部内容，只对 type="text" 有效
suffix	输入框尾部内容，只对 type="text" 有效
prepend	输入框前置内容，只对 type="text" 有效
append	输入框后置内容，只对 type="text" 有效

Events

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
change	仅在输入框失去焦点或用户按下回车时触发	(value: string | number)
input	在 Input 值改变时触发	(value: string | number)
clear	在点击由 clearable 属性生成的清空按钮时触发	—

Methods

方法名	说明	参数
focus	使 input 获取焦点	—
blur	使 input 失去焦点	—
select	选中 input 中的文字	—