TextArea 文本域组件
介绍
文本框内输入或编辑文字,支持限制输入数量。
安装
import { createApp } from 'vue';
import { TextArea } from '@nutui/nutui';
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 | 输入内容时触发 | val |
focus | 聚焦时触发 | val |
blur | 失焦时触发 | val |