vue中el-input文本域超出字数限制，字数统计标红

最新推荐文章于 2025-09-11 04:47:26 发布

原创最新推荐文章于 2025-09-11 04:47:26 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

这段HTML代码展示了如何在Vue.js应用中使用el-input组件创建一个带字数限制的textarea。当输入超过预设的最大长度时，字数统计显示为红色，否则显示为灰色。

部署运行你感兴趣的模型镜像

html代码：

<el-input 
type="textarea"
placeholder="请输入内容" 
v-model="textarea" 
:maxlength="maxlength" 
show-word-limit //展示字数统计
:autosize="{ minRows: 2, maxRows: 4}" //高度能够根据文本内容自动进行调整
@input="limitLength">
</el-input>

data: {
                textarea: '',
                maxlength: 30
            },
methods: {
      limitLength(value) {//value 为获取到的输入框的值
                    if (value.length >= this.maxlength) {
                        this.$el.querySelector('.el-input__count').style = 'color:red !important'
                    } else {
                        this.$el.querySelector('.el-input__count').style = 'color:#909399 !important'
                    }
                }
            },

展示效果如下：