表单组件 |
您所在的位置：网站首页 › input输入框组件的type属性 › 表单组件 |
|
Field 输入框介绍引入代码演示基础用法自定义类型禁用输入框错误提示高度自适应插入按钮APIPropsEvents方法SlotsField 输入框介绍 表单中的输入框组件，支持input和textarea两种类型 引入import { Field } from 'vant';Vue.use(Field); 代码演示基础用法通过 v-model 绑定输入框的值 自定义类型根据type属性定义不同类型的输入框 禁用输入框 错误提示通过error或者error-message属性增加对应的错误提示 高度自适应对于 textarea，可以通过autosize属性设置高度自适应 插入按钮通过 button 插槽可以在输入框尾部插入按钮 发送验证码 APIPropsField 默认支持 Input 标签所有的原生属性，比如 maxlength、placeholder、autofocus 等 参数说明类型默认值版本label输入框左侧文本String--value当前输入的值String | Number--type可设置为原生类型, 如 number tel textareaStringtext-size大小，可选值为 largeString-1.6.9border是否显示内边框Booleantrue-disabled是否禁用输入框Booleanfalse-readonly是否只读Booleanfalse-required是否显示表单必填星号Booleanfalse-clearable是否启用清除控件Booleanfalse1.1.9clickable是否开启点击反馈Booleanfalse2.0.0is-link是否展示右侧箭头并开启点击反馈Booleanfalse1.1.10error是否将输入内容标红Booleanfalse-error-message底部错误提示文案，为空时不展示String''-label-class左侧文本额外类名any-2.0.0label-width左侧文本宽度，可指定单位，默认为 pxString | Number90px1.6.17label-align左侧文本对齐方式，可选值为 center rightStringleft1.1.10input-align输入框内容对齐方式，可选值为 center rightStringleft1.1.10error-message-align错误提示文案对齐方式，可选值为 center rightStringleft1.6.11autosize自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为 pxBoolean | Objectfalse1.0.0left-icon输入框左侧图标名称或图片链接，可选值见 Icon 组件String-1.5.7right-icon输入框尾部图标名称或图片链接，可选值见 Icon 组件String-1.5.7 EventsField 默认支持 Input 标签所有的原生事件，如 focus、blur、keypress 等 事件说明回调参数input输入框内容变化时触发-click点击时触发-clear点击清除按钮后触发-click-left-icon点击头部图标时触发-click-right-icon点击尾部图标时触发- 方法通过 ref 可以获取到 field 实例并调用实例方法 方法名参数返回值介绍focus--获取输入框焦点blur--取消输入框焦点 Slots名称说明label自定义输入框标签input自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效left-icon自定义输入框头部图标right-icon自定义输入框尾部图标button自定义输入框尾部按钮 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |