TextArea 文本域组件

介绍

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

安装

  1. import { createApp } from 'vue';
  2. import { TextArea } from '@nutui/nutui';
  3. const app = createApp();
  4. app.use(TextArea);

代码演示

基础用法

  1. <nut-textarea v-model="value" />
  1. import { ref } from 'vue';
  2. export default {
  3. setup() {
  4. const value = ref('');
  5. return { value };
  6. },
  7. };

显示字数统计

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

高度自定义,拉伸

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

直读、禁用

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

Prop

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

Event

名称说明回调参数
change输入内容时触发val
focus聚焦时触发val
blur失焦时触发val

TextArea  文本域 - 图1