当前位置：首页 > article >正文

element-ui textarea备注 textarea 多行输入框

article 2025/1/17 12:59:31

发现用这个组件，为了给用户更好的体验，要加下属性

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;
}

查看全文

http://www.kler.cn/a/506433.html