Textarea 多行输入

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

当要输入很多文字的时候

import { DuTextarea } from 'dangoui'

说明

一个简单的 Textarea，如要实现高度定制的多行输入框，请基于平台基础组件自行实现

示例

不同类型

<template>
  <PreviewBlock title="无边框">
    <div class="flex-auto">
      <DuTextarea placeholder="请输入..." v-model:value="text" />
    </div>
  </PreviewBlock>
  <PreviewBlock title="带边框">
    <div class="flex-auto">
      <DuTextarea placeholder="请输入..." v-model:value="text2" bordered />
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuTextarea } from 'dangoui'

const text = ref('')

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

字数

<template>
  <PreviewBlock title="字数统计">
    <div class="flex-auto">
      <DuTextarea placeholder="请输入..." show-count v-model:value="text2" bordered />
    </div>
  </PreviewBlock>
  <PreviewBlock title="设置字数上限">
    <div class="flex-auto">
      <DuTextarea placeholder="请输入..." show-count v-model:value="text3" :maxlength="16" bordered />
    </div>
  </PreviewBlock>
  <PreviewBlock title="超出字数上限">
    <div class="flex-auto">
      <DuTextarea placeholder="请输入..." show-count v-model:value="text4" :maxlength="16" bordered />
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuTextarea } from 'dangoui'

const text = ref('')

const text2 = ref('')

const text3 = ref('')

const text4 = ref('长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字')
</script>

API

属性

属性名	类型	默认值	说明
value	`string`	`""`	值
placeholder	`string`	`""`	占位文字
maxlength	`number`	`-1`	最多可输入文字数，为 -1 时没有输入限制
bordered	`boolean`	`false`	是否是外边框类型
show-count	`boolean`	`false`	是否显示字数统计
ext-class	`string \| string[] \| Record<string, boolean>`	-	自定义 class
ext-style	`string \| { [x: string]: string \| number; }`	-	自定义 style

事件

名称	类型
update:value	`(event: "update:value", value: string): void`