问题:在使用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, '')
}
}