Textarea

1.5.0 新增

多行输入框组件，支持使用v-model对数据双向绑定，根据是否有内容、是否聚焦有折叠、展开两种状态。

示例

基本用法

使用v-model对输入内容双向绑定。

  1. <cube-textarea v-model="value"></cube-textarea>
  1. export default {
  2.   data() {
  3.     return {
  4.       value: &#39;&#39;
  5.     }
  6.   }
  7. }

多项配置

支持原生组件的配置。

  1. <cube-textarea v-model="value" :placeholder="placeholder" :maxlength="maxlength" :readonly="readonly" :disabled="disabled" :autofocus="autofocus"></cube-textarea>
  1. export default {
  2.   data() {
  3.     return {
  4.       value: &#39;&#39;,
  5.       placeholder: &#39;请输入内容&#39;,
  6.       readonly: true,
  7.       maxlength: 100,
  8.       disabled: true,
  9.       autofocus: true
  10.     }
  11.   }
  12. }

Props 配置

参数 说明 类型 可选值 默认值
v-model 绑定的值 String - 空
disabled 禁用状态 Boolean true/false false
readonly 只读状态 Boolean true/false false
maxlength 最大输入长度 Number - 60
placeholder 占位文本 String - 空
autofocus 自动对焦 Boolean true/false false

事件

事件名 说明 参数
focus 输入框聚焦后触发此事件，如果禁用状态，则不触发 e - 事件对象
blur 输入框失焦后触发此事件 e - 事件对象

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/textarea