1.字符为js识别字符
<el-input
v-model="form.desc"
resize="none"
:rows="4"
show-word-limit
type="textarea"
maxlength="50"
autocomplete="off"
placeholder="请输入简介"
@input="checkLength"
></el-input>
<script>
checkLength(e) {
this.form.miniProgramDesc = e.substring(0, 50)
}
</script>
输入内容之后可以做下截取的操作，用来避免在某种操作方式下输入字符数可能超过maxlength的长度，textarea存在的问题
2.字符为数据库识别字符(汉字算两个字符)
<div class="charInput">
<el-input v-model="textInfo" type="textarea" :maxlength="maxLength" show-word-limit class="inputDesc" @input="checkLength"></el-input>
<span class="input-count">{{ textLength }}/{{ maxCharLength }}</span>
</div>
<script>
data() {
return {
textLength: 0,
maxLength:100,
maxCharLength:100
}
}
checkLength(e) { // js字数与数据库字符数不一样
let b = 0 // 输入的字符数
for (var i = 0, length = e.length; i < length; i++) {
var c = e.charAt(i);
if (/^[\u0000-\u00ff]$/.test(c)) {
b++;
} else { b += 2; }
if (b > this.maxCharLength) {
this.textInfo = e.substr(0, i)
if (/^[\u0000-\u00ff]$/.test(c)) {
b--;
} else { b -= 2; }
break
}
}
this.textLength = b
}
</script>
相当于自己模拟ielemui的show-word-limit 的显示
