输入框

示例


基础用法

使用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)

搜索框

组件库提供了Search组件,用于定义点击后展开的搜索框,该组件有两种类型,通过type属性指定,绑定submit事件用于提交搜索结果

不要将该组件用于表单中,因为它本身就会渲染成独立的表单

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

属性

Input

属性 说明 类型 默认值
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
nativeProps 原生inputtextarea上的属性 Object undefined
属性 说明 类型 默认值
value 组件输入的值 String ""
placeholder 展位文案 String "请输入关键字"
type 类型 "default" | "line" "default"
size 尺寸 "large" | "default" | "small" | "mini" "default"

扩展点

Input

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

事件

Input

事件名 说明 参数
clear 点击清除按钮时触发 -
事件名 说明 参数
submit 表单提交事件 keywords