Textarea

Demos

Size variants

Available size variants for the ui prop: large/small/tiny.

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

Read-only state

Use readonly prop to set a textarea to read-only state.

Read-only

Large

Normal

Small

Tiny

<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 state

Use disabled prop to set a textarea to disabled state.

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

Props

Name Type Default Description

ui

string

预设样式。

值	描述
`large`	大尺寸样式。
`small`	小尺寸样式。
`tiny`	特小尺寸样式。

value

string

v-model

文本域的值。

disabled boolean false Whether the textarea is disabled.

readonly boolean false Whether the textarea is read-only.

line-number boolean false Whether to show line numbers.

rows number|string - The default visible rows of the textarea.

placeholder string - The placeholder text of the textarea.

composition boolean false Whether the input process should be aware of composition.

select-on-focus boolean false Whether to select text content when focused.

autoresize boolean false Whether the textarea should automatically expand when the content exceeds default height.

事件

名称描述

change

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

名称	类型	描述
`value`	`string`	文本域的值。
`event`	`Event`	原生 `change` 事件对象。

input

v-model

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

此外，Textarea 支持如下的原生事件：

auxclick、click、contextmenu、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseover、mouseout、mouseup、select、wheel、keydown、keypress、keyup、focus、blur、focusin、focusout。

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