textarea 字数限制

原创已于 2024-12-25 11:25:25 修改 · 444 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui #前端

于 2023-04-13 17:34:42 首次发布

<div class="discussWrap">
    <textarea id="text" v-model="content" placeholder="讨论" maxlength="500" @input="getNumber"/>
    <span class="reciprocal">{{reciprocal}} / 500</span>
</div>

data{
    return{
        content:'',
        reciprocal: 0,
    }
}

getNumber(){
  this.reciprocal = this.content.length;
},

//修改
<el-input
  v-model="content"
  type="textarea"
  maxlength="300"
  show-word-limit>
</el-input>

以上可以从控制台修改限制的最大长度，所以做以下变更

<el-input
  class="textareaInput"
  v-model="ruleForm.ruleName"
  :maxlength="maxLength"
  placeholder="请输入规则名称"
  show-word-limit
  type="textarea"
></el-input>

const maxLength = ref(10);

watch(
  () => ruleForm.ruleName,
  (newVal) => {
    if (newVal.length > maxLength.value) {
      ruleForm.ruleName = newVal.slice(0, maxLength.value); // 截断超出长度的部分
    }
  }
);