输入框

示例


基础用法

使用v-model绑定输入的值,disabled来禁用组件

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
http://
.com
http://
.com
追加内容

使用appendprependsuffixprefix扩展点,可以往组件追加内容

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
http://
.com
与Select组合

通过前面介绍的扩展点,我们可以与Select进行组合

index.vdt
index.js
index.vue (Vue)
index.jsx (React)


http://
.com
尺寸

添加size属性,定义如下尺寸:large, defaultsmallmini

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

textarea文本框

指定typetextarea渲染成文本框,同时可以用rows来指定展示的行数

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

可清除

指定clearable可以展示快速清除按钮

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
auto width
自动宽度

指定autoWidth可以让输入框宽度随文本长度变化而变化

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
type 在原生input标签的type取值的基础上扩展了textarea值,当我改值时渲染成textarea String "text"
name 原生input标签的name属性 String undefined
value 输入框的值,可用v-model进行双向绑定 String undefined
defaultValue inputdefaultValue,首次渲染使用该值 String undefined
placeholder 占位文案 String undefined
readonly 是否只读 Boolean false
clearable 是否展示快速清除按钮 Boolean false
disabled 是否禁用 Boolean false
size 组件尺寸 "large" | "default" | "small" | "mini" "default"
rows type = "textarea"时,默认展示文本行数 Number | String 2
spellcheck textarea是否进行拼写检查 Boolean false
fluid 是否宽度100% Boolean false
autoWidth 是否宽度随输入的文本的长度变化而变化 Boolean false
width 指定宽度,组件会加上单位px String | Number undefined
tabindex 原生tabindex属性 String undefined
autocomplete 原生autocomplete属性 String undefined

扩展点

名称 说明
prepend input前面追加内容
append input后面追加内容
prefix input头部追加前缀
suffix input尾部追加后缀

事件

事件名 说明 参数
clear 点击清除按钮时触发 -