Textarea

Examples

Size variants

Available ui prop values: s / m.

<template>
<article>
  <div>
    <veui-textarea
      autoresize
      line-number
      value="Normal"
    />
  </div>
  <div>
    <veui-textarea
      autoresize
      line-number
      ui="s"
      value="Small"
    />
  </div>
</article>
</template>

<script>
import { Textarea } from 'veui'

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

Read-only

Set the readonly prop to make the textarea read-only.

Read-only

Edit this demo on GitHubEdit

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

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

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

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Disabled

Set the disabled prop to disable the textarea.

Disabled

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <div>
      <veui-textarea
        :disabled="disabled"
        value="Normal"
      />
    </div>
    <div>
      <veui-textarea
        :disabled="disabled"
        ui="s"
        value="Small"
      />
    </div>
  </section>
</article>
</template>

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

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

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Auto-resize

Set the autoresize prop to make the textarea automatically resize.

Edit this demo on GitHubEdit

<template>
<article>
  <div>
    <veui-textarea
      v-model="value"
      autoresize
      line-number
    />
  </div>
</article>
</template>

<script>
import { Textarea } from 'veui'

export default {
  components: {
    'veui-textarea': Textarea
  },
  data () {
    return {
      value: 'Autoresize'
    }
  }
}
</script>

API

Props

Name Type Default Description

ui

string

Predefined style.

Value	Description
`s`	Small size style.
`m`	Medium size style.

value

string

v-model

The value of the textarea.

disabled boolean false Whether the textarea is disabled.

readonly boolean false Whether the textarea is read-only.

line-number boolean false Whether to display line numbers.

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

placeholder string - The placeholder text.

composition boolean false Whether to take into account the value of the input method editor.

select-on-focus boolean false Whether to select the text in the textarea when it receives focus.

autoresize boolean false Whether to automatically adjust the height of the textarea based on its content.

get-length function(string): number A custom function for calculating the length of characters.

resizable boolean Specifies whether the textarea can be resized.

maxlength number - The maximum number of characters that can be entered.

strict boolean false Whether to prevent further input when the maximum number of characters has been reached.

Events

Name Description

change

Triggered when the content of the textarea changes, i.e. when the native change event is triggered. The callback function receives (value, event) as parameters.

Name	Type	Description
`value`	`string`	The value of the textarea.
`event`	`Event`	The native `change` event object.

input

v-model

Triggered when valid input is entered, affected by the composition prop. The callback function receives (value: string) as a parameter, where value is the value of the input.

In addition, Textarea supports the following native events:

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

The parameters of the callback functions are all native event objects.

Edit this page on GitHubEdit