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

最新推荐文章于 2024-01-15 14:27:14 发布

Y_U_U

最新推荐文章于 2024-01-15 14:27:14 发布

阅读量1.6k

点赞数 3

文章标签：前端 vue Powered by 金山文档

本文链接：https://blog.csdn.net/Y_U_U/article/details/128732604

版权

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'
                    }
                }
            },

展示效果如下：