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)
        }
      }
    }

这样，既限制了输入内容的字符长度，又实现了数据处理以后的双向数据绑定。