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