XInput 组件使用教程
优质
小牛编辑
137浏览
2023-12-01
安装
import { XInput } from 'vux'
export default {
components: {
XInput
}
}
// 在入口文件全局引入
import Vue from 'vue'
import { XInput } from 'vux'
Vue.component('x-input', XInput)
<group>
<x-input title="title" v-model="value"></x-input>
</group>
x-input
只能在Group
中使用
如果你想实现在输入框右边按钮切换密码明文,请使用slot=right
实现type
切换。
mask
在 2.6.1
支持,但注意的是使用 mask 后值也是经过 mask 处理后的值,进行判断或者提交到接口前应该注意。
比如格式化手机号码,mask
值为 999 9999 9999
,得到的值将是 13 位的 145 3456 3456
,提交或者判断都应该先清除中间空格。
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
value | string | 表单值,使用v-model 绑定 | -- | |
type | string | text | 即input的type 属性,目前支持 text ,number ,email ,password ,tel | -- |
is-type | string function | 内置验证器,支持email ,china-name ,china-mobile , 同样也支持直接传函数, 需要同步返回一个对象{valid:true} 或者{valid:false, msg:错误信息} | -- | |
required | boolean | false | 是否必值,如果不禁用验证,当没有填写时会在右侧显示错误icon | -- |
title | string | label文字 | -- | |
placeholder | string | placeholder 提示 | -- | |
show-clear | boolean | true | 是否显示清除icon | -- |
min | number | 最小输入字符限制 | -- | |
max | number | 最大输入字符限制,等同于maxlength ,达到限制到不能再输入 | -- | |
disabled | boolean | false | 是否禁用填写 | -- |
readonly | boolean | false | 同input的标准属性readonly | -- |
debounce | number | debounce 用以限制on-change 事件触发。如果你需要根据用户输入做ajax 请求,建议开启以节省无效请求和服务器资源,单位为毫秒 | -- | |
placeholder-align | string | left | placeholder 文字对齐方式 | v2.1.1-rc.8 |
text-align | string | left | 值对齐方式 | -- |
label-width | string | label 宽度,权重比 group 的 labelWidth 高。不设定时将进行自动宽度计算,但超过15个字符时不会进行宽度设定。 | v2.2.1-rc.4 | |
mask | string | (beta) 值格式化,依赖于 vanilla-masker,其中 9 表示数字,A 表示大写字母,S 表示数字或者字母 | v2.6.1 | |
should-toast-error | string | true | 是否在点击错误图标时用 toast 的形式显示错误 | v2.6.3 |
事件
名字 | 参数 | 说明 | 版本要求 |
@on-blur | (value, $event) | input的blur 事件 | -- |
@on-focus | (value, $event) | input的focus 事件 | -- |
@on-enter | (value, $event) | input输入完成后点击enter(确认) 事件 | -- |
@on-change | (value) | 输入值变化时触发。如果你使用了debounce ,那么触发将不会是实时的。 | -- |
@on-click-error-icon | (error) | 点击错误图标时触发,你可以关闭 should-toast-error 然后用这个事件来自定义显示错误的提示内容 | v2.6.3 |
@on-click-clear-icon | -- | 点击清除按钮时触发 | v2.9.0 |
插槽
名字 | 说明 | 版本要求 |
label | 用于自定义label (即 title)部分内容,比如使用icon | -- |
restricted-label | 用于自定义label 部分,和slot=label 不同的是,该slot宽度受到父组件group 的限制 | -- |
right | 用以在输入框右边显示内容,比如单位,切换密码显示方式等 | -- |
right-full-height | 用于放置和 cell 高度的验证码图片 | v2.8.1 |
方法
名字 | 参数 | 说明 | 版本要求 |
focus | 手动获得焦点 | ||
blur | 手动设置 input 失去焦点 | ||
reset | (value = '') | 重置输入框值,清除错误信息 | v2.1.1-rc.10 |