nutui/src/packages/__VUE/textarea/doc.md

TextArea 文本域

介绍

文本框内输入或编辑文字，支持限制输入数量。

安装

import { createApp } from 'vue';
//vue
import { TextArea } from '@nutui/nutui';
//taro
import { TextArea } from '@nutui/nutui-taro';

const app = createApp();
app.use(TextArea);

代码演示

基础用法

:::demo

<template>
  <nut-textarea v-model="value" />
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const value = ref('');
    return { value };
  },
};
</script>

:::

显示字数统计

:::demo

<template>
  <nut-textarea v-model="value" limit-show max-length="20" />
</template>

:::

高度自定义，拉伸

:::demo

<template>
  <nut-textarea v-model="value" rows="10" autosize />
</template>

:::

只读、禁用

:::demo

<template>
  <nut-textarea readonly model-value="textarea只读状态" />
  <nut-textarea disabled model-value="textarea禁用状态" limit-show max-length="20" />
</template>

:::

Prop

参数	说明	类型	默认值
v-model	输入值，支持双向绑定	String	-
placeholder	设置占位提示文字	String	'请输入内容'
max-length	限制最长输入字符	String、Number	-
rows v3.1.20	textarea的高度，优先级高于autosize属性 仅支持 H5	String、Number	2
limit-show	textarea是否展示输入字符。须配合max-length使用	Boolean	false
autosize v3.1.20	是否自适应内容高度，也可传入对象, 如 { maxHeight: 200, minHeight: 100 }，单位为px	Boolean 、{maxHeight?: number; minHeight?: number}	false
text-align	文本位置,可选值left,center,right	String	left
readonly	只读属性	Boolean	false
disabled	禁用属性	Boolean	false
autofocus	自动获取焦点	Boolean	false

Event

名称	说明	回调参数
change	输入框值改变时触发	value
focus	聚焦时触发	event
blur	失焦时触发	{value,event}