效果展示
代码:
<el-form-item label="养护要点说明:" prop="remark" :rules="[{ required: true, message: '不能为空' }]">
<el-input
type="textarea"
@input="timeEffectInput" // 输入事件(在这处理限制)
maxlength="200" // 最大字数限制
resize="none" // 控制是否能被用户缩放
show-word-limit // 是否显示输入字数统计
:rows="3" // 自适应内容高度,可传入对象,如,{ minRows: 2, maxRows: 6 }
style="width: 92%"
v-model="dialogForm.remark"
placeholder="请输入养护要点说明!"
></el-input>
</el-form-item>
timeEffectInput() {
const length = this.dialogForm.remark.length // 先拿到当前输入时文本域文字长度
if (length >= 200) { // 当长度超过200
// 获取文本域计数统计设置字体为红色
this.$el.querySelector('.el-input__count').style = 'color:red !important'
// 防止后续输入溢出截取0-200的字符
this.dialogForm.remark = this.dialogForm.remark.substr(0, 200)
} else {
// 不超过则设置为原字体颜色
this.$el.querySelector('.el-input__count').style = 'color:#909399 !important'
}
},