Textarea 文本域

示例

尺寸

可选的 ui 属性值:large/small/tiny

1
1
1
1
<template>
<article>
  <div>
    <veui-textarea
      autoresize
      line-number
      ui="large"
      value="Large"
    />
  </div>
  <div>
    <veui-textarea
      autoresize
      line-number
      value="Normal"
    />
  </div>
  <div>
    <veui-textarea
      autoresize
      line-number
      ui="small"
      value="Small"
    />
  </div>
  <div>
    <veui-textarea
      autoresize
      line-number
      ui="tiny"
      value="Tiny"
    />
  </div>
</article>
</template>

<script>
import { Textarea } from 'veui'

export default {
  components: {
    'veui-textarea': Textarea
  }
}
</script>

只读状态

设置 readonly 来使文本域处于只读状态。

<template>
<article>
  <section>
    <veui-checkbox v-model="readonly">
      Read-only
    </veui-checkbox>
  </section>
  <section>
    <div>
      <veui-textarea
        rows="2"
        :readonly="readonly"
        ui="large"
        value="Large"
      />
    </div>
    <div>
      <veui-textarea
        rows="2"
        :readonly="readonly"
        value="Normal"
      />
    </div>
    <div>
      <veui-textarea
        rows="2"
        :readonly="readonly"
        ui="small"
        value="Small"
      />
    </div>
    <div>
      <veui-textarea
        rows="2"
        :readonly="readonly"
        ui="tiny"
        value="Tiny"
      />
    </div>
  </section>
</article>
</template>

<script>
import { Textarea, Checkbox } from 'veui'

export default {
  components: {
    'veui-textarea': Textarea,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      readonly: true
    }
  }
}
</script>

禁用状态

设置 disabled 来使文本域处于禁用状态。

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <div>
      <veui-textarea
        :disabled="disabled"
        ui="large"
        value="Large"
      />
    </div>
    <div>
      <veui-textarea
        :disabled="disabled"
        value="Normal"
      />
    </div>
    <div>
      <veui-textarea
        :disabled="disabled"
        ui="small"
        value="Small"
      />
    </div>
    <div>
      <veui-textarea
        :disabled="disabled"
        ui="tiny"
        value="Tiny"
      />
    </div>
  </section>
</article>
</template>

<script>
import { Textarea, Checkbox } from 'veui'

export default {
  components: {
    'veui-textarea': Textarea,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      disabled: true
    }
  }
}
</script>

API

属性

名称类型默认值描述
uistring-

预设样式。

描述
large大尺寸样式。
small小尺寸样式。
tiny特小尺寸样式。
valuestring''

v-model

文本域的值。

disabledbooleanfalse文本域是否为禁用状态。
readonlybooleanfalse文本域是否为只读状态。
line-numberbooleanfalse是否显示行号。
rowsnumber|string-默认情况下文本域可视行数。
placeholderstring-输入占位符。
compositionbooleanfalse是否感知输入法输入过程的值。
select-on-focusbooleanfalse聚焦时是否自动选中文本域文本。
autoresizebooleanfalse高度是否会被内容撑开。

事件

名称描述
change

输入框内容变化时触发,即原生 change 事件触发时。回调参数为 (value, event)

名称类型描述
valuestring文本域的值。
eventEvent原生 change 事件对象。
input

v-model

有效输入时触发,受 composition 属性影响。回调参数为 (value: string)value 为输入框的 value 值。

此外,Textarea 支持如下的原生事件:

auxclickclickcontextmenudblclickmousedownmouseentermouseleavemousemovemouseovermouseoutmouseupselectwheelkeydownkeypresskeyupfocusblurfocusinfocusout

回调函数的参数都为原生事件对象。