文本域 Textarea

赞助

用于多行输入

何时使用

• 需要文本域输入较多内容时

基本使用

.lazy 默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<Textarea v-model:value.lazy="msg" />

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref('')
const lazyValue = ref('')
watchEffect(() => {
  console.log('value', value.value)
})
watchEffect(() => {
  console.log('lazyValue', lazyValue.value)
})
function onChange(e: Event) {
  console.log('change', e)
}
function onEnter(e: KeyboardEvent) {
  console.log('enter', e)
}
</script>
<template>
  <Space vertical :width="360">
    <Textarea v-model:value="value" placeholder="Basic usage rows 2" :rows="2" @change="onChange" @enter="onEnter" />
    <Textarea
      v-model:value.lazy="lazyValue"
      placeholder="Lazy usage rows 2"
      :rows="2"
      @change="onChange"
      @enter="onEnter"
    />
  </Space>
</template>

非受控模式

不传 v-model:value，用 defaultValue 指定初始值；输入、清除与字数提示照常生效；placeholder 只是占位提示，不能替代初值

非受控初值

Show Code

<template>
  <Textarea :width="200" default-value="非受控初值" allow-clear show-count placeholder="default value" />
</template>

适应文本高度的文本域

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const autoSizeValue = ref('')
</script>
<template>
  <Textarea :width="360" v-model:value="autoSizeValue" placeholder="Autosize height based on content lines" auto-size />
</template>

自定义行数

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const minMaxRowsValue = ref('')
</script>
<template>
  <Textarea
    :width="360"
    v-model:value="minMaxRowsValue"
    placeholder="Autosize height with minimum and maximum number of lines"
    :auto-size="{ minRows: 2, maxRows: 5 }"
  />
</template>

带清除图标

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const clearValue = ref('')
</script>
<template>
  <Textarea :width="360" v-model:value="clearValue" placeholder="textarea with clear icon" allow-clear />
</template>

带数字提示

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const countValue = ref('')
</script>
<template>
  <Textarea :width="360" v-model:value="countValue" placeholder="textarea with show count" show-count :maxlength="10" />
</template>

禁用

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const disabledValue = ref('')
</script>
<template>
  <Textarea :width="360" v-model:value="disabledValue" placeholder="disabled textarea" disabled />
</template>

APIs

Textarea Props

名称	说明	类型	默认值
width	文本域宽度，单位 px	string | number	'100%'
allowClear	可以点击清除图标删除内容	boolean	false
autoSize	自适应内容高度	boolean | {minRows?: number, maxRows?: number}	false
disabled	是否禁用	boolean	false
placeholder	文本域输入的占位符	string	undefined
maxlength	文字最大长度	number	undefined
showCount	是否展示字数	boolean	false
value v-model	文本域内容；传入即受控，不传时组件自持（可用 defaultValue 指定初值）	string	undefined
defaultValue	非受控初始值，未绑 v-model:value 时生效	string	undefined

Events

名称	说明	类型
change	文本域内容变化时的回调	(e: Event) => void
enter	按下回车的回调	(e: KeyboardEvent) => void
compositionstart	使用文本合成系统即输入法编辑器开始新的输入时的回调	(e: CompositionEvent) => void
compositionend	当文本段落的组成完成或取消时触发的回调	(e: CompositionEvent) => void
focus	文本域获取焦点时的回调，relatedTarget 为失去焦点的元素	(e: FocusEvent) => void
blur	文本域失焦的回调，relatedTarget 为获得焦点的元素	(e: FocusEvent) => void

Methods

名称	说明	类型
focus	获取文本域焦点	() => void
blur	使文本域失去焦点	() => void