鍍金池/ 問答/HTML/ Vue 使用自定義input組件來限制用戶輸入的字符長(zhǎng)度,所引發(fā)的問題。

Vue 使用自定義input組件來限制用戶輸入的字符長(zhǎng)度,所引發(fā)的問題。

需求是禁止input輸入過多的字符,不能用maxlength!

通過unicode來判斷中英文來獲取相應(yīng)的字節(jié),超過直接不能輸入

遇到的問題

因?yàn)殚_發(fā)的時(shí)候使用的是vux(vue移動(dòng)端UI組件庫),所以用的不是原生的input,這將導(dǎo)致一個(gè)問題是組件是通過watch父組件傳入的value值然后再賦值到原生的input value 以下是vux input組件部分源碼:

watch: {
    // currentValue 綁定的是組件原生的value, value 是父組件v-model傳過來的值
     value (val) {
      this.currentValue = val
    }
}

以下是我的代碼示例,這里就先用簡(jiǎn)單的substr代替

  // 監(jiān)聽input組件的oninput事件
 handleInputChange(val) {
   this.inputName = val.substr(0, 6);
}   

寫完之后發(fā)現(xiàn)毫無效果,因?yàn)闆]有觸發(fā)input組件的watch,例子用于原生的input是不會(huì)有任何問題的,也嘗試過加native。所以問題來了,我要怎么才能主動(dòng)觸發(fā)子組件的watch? 還是我應(yīng)該換一種思路去解決這個(gè)問題?

回答
編輯回答
詆毀你

可否用v-model?
你組件直接v-model = 'val'
val 為data里面的某個(gè)變量
然后watch val這個(gè)值的變化難道不可以?

2017年7月1日 09:02