vue 重写element input限制字数

最新推荐文章于 2024-08-22 13:57:45 发布

前方太黑暗

最新推荐文章于 2024-08-22 13:57:45 发布

阅读量1.8k

点赞数 2

分类专栏： vue 文章标签： html 重写input 重写input字数限制

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/120458178

版权

vue 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种针对头条接口的特殊需求，在Element UI的输入框组件中优化汉字计数的方法。通过重写输入事件处理函数，实现了将一个汉字视为两个字符进行计数，以更准确地控制输入长度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用element时，提供了限制字数的属性

<el-input v-model="form.campaignName" size="medium" style="width: 250px;" show-word-limit maxlength="150"></el-input>

但是会发现，提示不管你输入啥都是按照一次字符算的。

在开发头条的接口中，提示一个汉字占2个字符，所以要重写

------------------------------------------------------------------------

<el-input v-model="form.campaignName" size="medium" style="width: 250px;" maxlength="100" @input="campaignNameInput"></el-input>
          <span class="gray"> 字数限制:{{campaignNameNum}}/100</span>

/** 广告组名称字符限制 **/
    campaignNameInput() {
      let temp = 0;
      for (var i = 0; i < this.form.campaignName.length; i++) {
        if (/[\u4e00-\u9fa5]/.test(this.form.campaignName[i])) {
          temp += 2
        } else {
          temp++
        }
      }
      this.campaignNameNum = temp;
    },