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