Vue el-input实现动态显示type为textarea的文字数量、剩余字数

87 阅读 0 评论 58 点赞

我是靠谱客的博主顺利电话，最近开发中收集的这篇文章主要介绍Vue el-input实现动态显示type为textarea的文字数量、剩余字数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、<el-form-item label="备注" prop="memo" style="display:block">

          <el-input

            type="textarea"

            v-model="updateDiseaseForm.memo"

            class="wh462"

            placeholder="描述当前疾病史备注情况"

            maxlength="128" @input="descInput"></el-input>

          <span class="numberV" style="position: absolute; right: 10px;bottom: 0;">{{txtVal}}/128</span>

        </el-form-item>

2、methods:{

  descInput(){

      this.txtVal = this.updateDiseaseForm.memo.length;

    },

}

3、在编辑框内显示从后台带回的字数，在带回值时进行如下赋值：

this.txtVal = this.updateDiseaseForm.memo.length;