实现textarea字数监控

在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左下方显示
效果图

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

        }
      })
    },