发现用这个组件,为了给用户更好的体验,要加下属性
1. 通过设置 autosize
属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize
还可以设定为一个对象,指定最小行数和最大行数。:autosize="{ minRows: 3, maxRows: 6}"
2. 输入长度限制 maxlength
3. 是否显示输入字数统计 show-word-limit
1. 显示
2. 写法
<div class="remark">
<div class="label item-label" style="line-height: 40px;padding-left: 20px;box-sizing: border-box;width:100%">
主要来访嘉宾姓名及职位
</div>
<el-input
type="textarea"
v-model="visitForm.guest"
:autosize="{ minRows: 3, maxRows: 6}"
maxlength="200"
class="form-input"
placeholder="填写示例:张三-院长,李四-设备科科长;"
show-word-limit
></el-input>
</div>
3. 提交必填校验
这个注意输入全是空格的情况,因为element-ui输入空格也算1个字符,
// 文本域 判断是否为空
isEmptyOrWhitespace(str) {
return !str || str.trim().length === 0;
},
if (this.isEmptyOrWhitespace(visitForm.guest)) {
this.handleMessage("主要来访嘉宾姓名及职位必填")
return;
}