基本表单组件,支持 input 和 textarea,并在原生控件基础上进行了功能扩展,可以组合使用。
默认宽度是100%
通过placeholder设置未输入时的提示文字
通过maxlength设置最大输入长度
设置type为password即为password输入框,支持切换显示隐藏输入内容
设置type为number即为number输入框,只能输入数字
通过 icon 属性可以在输入框右边加一个图标
通过前置和后置的 slot 可以实现复合型的输入框。
通过设置属性 type 为 textarea 来使用文本域,用于多行输入。
通过设置属性 rows 控制文本域默认显示的行数。
设置属性 autosize,文本域会自动适应高度的变化。
autosize也可以设定为一个对象,指定最小行数和最大行数。
设置属性 disabled,文本域会禁止输入,不能获取到焦点,并且显示为disabled状态。
设置属性 readonly,文本域会不能输入。
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 输入的值,必须设置为.sync | Number, String | "" |
type | 类型,可选值有"password"、"number"、"text"、"textarea" | String | "text" |
placeholder | 内容为空时的提示语 | String | "" |
maxlength | 限制输入的内容长度 | Number | null |
icon | 右侧的小图标 | String | null |
disabled | 是否禁止输入 | Boolean | false |
readonly | 是否只读 | Boolean | false |
rows | 文本域的行数 | Number | 2 |
autosize | 文本域的行数高度跟随内容自动变化 | Boolean|Object | false |
事件名 | 说明 | 返回值 |
---|---|---|
on-click | 点击icon时触发 | event |
on-enter | 焦点在input, 按下enter键触发 | event |
on-focus | 获取焦点时触发 | event |
on-blur | 失去焦点时触发 | event |
on-input | 输入时触发 | value, event |
on-change | 值改变时触发 | value, event |