实现textarea字数监控
2018-07-13 本文已影响0人
神话降临
在vue-cli脚手架里面 需要做一个实时监控textarea字数的功能,并且不能超过500,
用的ui是element ui 限制字数就直接用element ui原生的属性 maxlength
<div class="detailTextArea">
<el-input
type="textarea"
:rows="7"
placeholder="请输入内容"
maxlength='500'
v-model="textareas">
</el-input>
</div>
监控字数在textarea左下方显示
效果图
![](https://img.haomeiwen.com/i6436427/146a74099c885396.png)
这个想了很多,想的蛮复杂,最后用了一个比较简单的方法实现了
只需要在vue的updated生命周期里监听键盘事件就行了
updated(){
let dom = $('.detailTextArea .el-textarea__inner');
dom.keyup( ()=> {
this.textLength = dom.val().length;
if(this.textLength>500){
this.$message({
message: '点评字数不要超过500条哦',
type: 'warning'
});
}
})
},