Textarea 文本域

何时使用

需要多行文本录入时使用。

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { DanTextarea } from '@dandan-ui/ui'

const value = ref('')
</script>

<template>
  <DanTextarea
    v-model="value"
    placeholder="请输入简介"
    :rows="4"
    style="max-width: 480px"
  />
</template>

字数统计

dan-ui 文本域示例

12 / 100

<script setup lang="ts">
import { ref } from 'vue'
import { DanTextarea } from '@dandan-ui/ui'

const value = ref('dan-ui 文本域示例')
</script>

<template>
  <DanTextarea
    v-model="value"
    :rows="4"
    maxlength="100"
    show-word-limit
    style="max-width: 480px"
  />
</template>

禁用与只读

禁用文本域

只读文本域

<script setup lang="ts">
import { DanTextarea } from '@dandan-ui/ui'
</script>

<template>
  <div style="display: grid; gap: 12px; max-width: 480px">
    <DanTextarea model-value="禁用文本域" :rows="3" disabled />
    <DanTextarea model-value="只读文本域" :rows="3" readonly />
  </div>
</template>

API

Props

属性	说明	类型	默认值	必填
modelValue / v-model	绑定文本	string	''	否
rows	可见行数	number	3	否
maxlength	最大字符数	number	—	否
showWordLimit	是否显示字数统计；需同时设置 maxlength	boolean	false	否
disabled	禁用；可继承 Form	boolean	false	否
readonly	只读	boolean	false	否
placeholder	占位文案	string	''	否

Events

事件名	说明	回调参数
update:modelValue	v-model 更新	(value: string) => void
input	输入时触发	(value: string) => void
change	变更确认，并联动 FormItem	(value: string) => void
focus	聚焦	(event: FocusEvent) => void
blur	失焦，并联动 FormItem	(event: FocusEvent) => void

Slots

无具名内容插槽；文本通过 v-model 绑定。

与 Form 联用

置于 DanFormItem 且配置 prop 后，失焦/变更会触发字段校验。

Token

变量	说明
--dan-color-border / --dan-color-primary	边框与聚焦
--dan-color-primary-light	聚焦光晕
--dan-font-size-xs	字数统计字号