nutui/site_docs/docs/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);

代码演示

基础用法

<nut-textarea v-model="value" />

import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    return { value };
  },
};

显示字数统计

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

高度自定义，拉伸

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

只读、禁用

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

Prop

参数	说明	类型	默认值
v-model	输入值，支持双向绑定	String	-
placeholder	设置占位提示文字	String	'请输入内容'
max-length	限制最长输入字符	String、Number	-
rows	textarea的高度	String、Number	2
limit-show	textarea是否展示输入字符。须配合max-length使用	Boolean	false
autosize	高度是否可拉伸	Boolean	false
text-align	文本位置,可选值left,center,right	String	left
readonly	只读属性	Boolean	false
disabled	禁用属性	Boolean	false

Event

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