实现textarea字数监控

在vue-cli脚手架里面 需要做一个实时监控textarea字数的功能,并且不能超过500,
用的ui是element ui 限制字数就直接用element ui原生的属性 maxlength

  

监控字数在textarea左下方显示
效果图


image.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'
          });

        }
      })
    },

你可能感兴趣的:(实现textarea字数监控)