Vux插件关于X-input输入框Val值正则表达式的使用


问题:在使用X-input输入框的时候onkeyup对V-model绑定的值没有更新。

解决办法:

1.最近在公司项目Vue的开发中用到的X-input插件,但是通过正则表达式来匹配输入框不能输入中文字符。虽然正则生效了,但是V-model绑定没有生效。通过观察插件原生代码发现只有on-enter这个子组件传递个父组件的方法。但是这个方法里面只有on-enter,在输入字符的时候只能按下enter键方法在生效。这就不能及时的匹配输入的字符移动端就会出现很大的BUG

 

2:其中一个是css3的新特性
            在CSS3.0下可以直接使用样式来控制输入控件的输入法设置,通过设置对象样式的ime-mode即可,可选设定值为:
                   auto:不影响IME的状态。
                  active:指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime
                   inactive:指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime
                  disabled:完全禁用ime。对于有焦点的控件(如输入框),用户不可以激活ime
                  normal:正常的IME状态。(IE不支持,不推荐选用)
但是这个新样式才才Chrome 30.0.1599.69 m浏览器下面不生效,所以还是只能通过JS来判断输入字符是否符合正则表达式

3:通过vue watch属性来修改发现还是不能修改

 分析原因:通过断点发现this.currentValue的oldVal 值一直没改变过。所以后面需要重新给this.currentValue 赋值 因为this.currentValue(newVal, oldVal) 有一个newVal 和 oldVal 这个是里面的值没有适时刷新的原因

先watch 监听数据 然后把newVal 用正则去掉不是需要的字符。然后在调用插件on-change 方法 重新赋值  赋值时候在用一次正则因为 这个插件在一个开始 this.currentValue 获取到的是输入框的值,不用一次正则表达式不会生效,意思是监听用一次 赋值用一次 因为有newVal  和 oldVal  

最后解决方法:

 

<x-input title="用户名"
v-validate="'required|username'"
type="text"
placeholder="请输入4-16位字母或数字"
label-width="70px"
:min="4"
:max="16"
name="username"
v-model="username"
ref="usernameVale"
@on-change="handleInputChange"></x-input>
watch: {
username(newVal, oldVal) {
this.username = newVal.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/ig, '')
},
}
methods: {
  
handleInputChange() {
 
this.$refs.usernameVale.currentValue = this.username.replace(/[^\w]_/g, '')
}
}



免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM