当前位置: 首页 > 文档资料 > VUX 中文文档 >

XInput 组件使用教程

优质
小牛编辑
135浏览
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切换。

mask2.6.1 支持,但注意的是使用 mask 后值也是经过 mask 处理后的值,进行判断或者提交到接口前应该注意。
比如格式化手机号码,mask 值为 999 9999 9999,得到的值将是 13 位的 145 3456 3456,提交或者判断都应该先清除中间空格。

属性

名字类型默认值说明版本要求
valuestring表单值,使用v-model绑定--
typestringtext即input的type属性,目前支持 text,number,email,password,tel--
is-typestring
function
内置验证器,支持email,china-name,china-mobile, 同样也支持直接传函数, 需要同步返回一个对象{valid:true}或者{valid:false, msg:错误信息}--
requiredbooleanfalse是否必值,如果不禁用验证,当没有填写时会在右侧显示错误icon--
titlestringlabel文字--
placeholderstringplaceholder 提示--
show-clearbooleantrue是否显示清除icon--
minnumber最小输入字符限制--
maxnumber最大输入字符限制,等同于maxlength,达到限制到不能再输入--
disabledbooleanfalse是否禁用填写--
readonlybooleanfalse同input的标准属性readonly--
debouncenumberdebounce用以限制on-change事件触发。如果你需要根据用户输入做ajax请求,建议开启以节省无效请求和服务器资源,单位为毫秒--
placeholder-alignstringleftplaceholder 文字对齐方式v2.1.1-rc.8
text-alignstringleft值对齐方式--
label-widthstringlabel 宽度,权重比 group 的 labelWidth 高。不设定时将进行自动宽度计算,但超过15个字符时不会进行宽度设定。v2.2.1-rc.4
maskstring(beta) 值格式化,依赖于 vanilla-masker,其中 9 表示数字,A 表示大写字母,S 表示数字或者字母v2.6.1
should-toast-errorstringtrue是否在点击错误图标时用 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