Textarea 文本域

示例

尺寸

可供选用的 ui 属性值：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>

只读

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

Read-only

在 GitHub 上编辑此示例编辑

<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 来使文本域处于禁用状态。

Disabled

在 GitHub 上编辑此示例编辑

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

自动扩展

设置 autoresize 来使文本域处于自动扩展状态。

在 GitHub 上编辑此示例编辑

<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

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`s`	小尺寸样式。
`m`	中尺寸样式。

value

string

v-model

文本域的值。

disabled boolean false 文本域是否为禁用状态。

readonly boolean false 文本域是否为只读状态。

line-number boolean false 是否显示行号。

rows number | string - 默认情况下文本域可视行数。

placeholder string - 输入占位符。

composition boolean false 是否感知输入法输入过程的值。

select-on-focus boolean false 聚焦时是否自动选中文本域文本。

autoresize boolean false 高度是否会被内容撑开。

get-length function(string): number 自定义的字符长度计算函数。

resizable boolean 指定是否可以调节长宽。

maxlength number - 最大可输入的字符长度。

strict boolean false 是否超出最大字符长度后不允许继续输入。

事件

名称描述

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。

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

在 GitHub 上编辑此页面编辑