vue中實時監聽input中字符長度並限制，Element-ui el-input

用vue寫的后台管理系統，input需要限制輸入內容的字符長度

 

（如果需要限制字符串的長度，只需要使用element-ui中的input的maxlength和minlength屬性即可，原生的input同樣的做法）

 

如果是限制字符長度，el-input覆蓋了原生的方法，需要將el-input元素更換成原生input，如果想保持el-input 的樣式，只需要給input添加 el-input__inner 的class

 

<input style="width:500px;" class="el-input__inner" type="text" v-model="ticketInf.ticketName" @input="widthCheck($event.target, 100)">

 

現在我們只需要寫widthCheck這個方法即可，因為一個漢字是兩個字符，字母和符號為1個字符，所以我們判斷為漢字的長度*2變為兩個字符，其余不變。

 

如果長度大於了我們定義的100，就可以用substr的方法，去掉限制長度后的字符

 

// 限制輸入框輸入的字符數
    widthCheck (str, len) {
      var temp = 0
      for (var i = 0; i < str.value.length; i++) {
        if (/[\u4e00-\u9fa5]/.test(str.value[i])) {
          temp += 2
        } else {
          temp++
        }
        if (temp > len) {
          str.value = str.value.substr(0, i)
        }
      }
    }

這樣，既限制了輸入內容的字符長度，又實現了數據處理以后的雙向數據綁定。