el-input 显示剩余字数 elment表单显示剩余字数 textarea显示剩余字数

1. template

<el-form :model="bulletin" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
 <el-form-item label="模板内容：" prop="content">
   <div class="form-conten">
     <el-input type="textarea" v-model="bulletin.content" :rows="8" style="width:650px"  maxlength="500"  @input="descInput">
     </el-input>
     <span style="color:#999;" class="remaining">剩余{{this.remnant}}/500</span>
   </div>
 </el-form-item>
</el-form>

2. data数据

bulletin: { //表单
  content: null,
   },
rules: {
  content: [
      { required: true, message: '请输入模板内容', trigger: 'blur' },
      { max: 500, message: '长度在 500个字符', trigger: 'blur' }
    ],
  }

3.methods

// 字数
    descInput(){
      var txtVal = this.bulletin.content.length;
      this.remnant = 500 - txtVal;
    },

4. style less语法

.form-conten{
  position: relative;
  width:650px;
  .remaining{
    position:absolute;
    bottom: 10px;
    right: 30px;
  }
}