Bootstrap

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

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

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

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;