Appearance

Return to top
On this page

Textarea 文本域

基本使用

文本域的基本用法

显示代码
html
<template>
  <n-textarea v-model="value1" placeholder="请输入内容..." />
</template>

<script setup>
  import { ref } from 'vue';
  const value1 = ref('');
</script>

拉伸方式

resize 属性可以规定文本域的拉伸方式

显示代码
html
<template>
  <n-textarea v-model="value2" />
  <n-textarea v-model="value3" resize="vertical" />
  <n-textarea v-model="value4" resize="horizontal" />
  <n-textarea v-model="value5" resize="none" />
</template>

<script setup>
  import { ref } from 'vue';
  const value2 = ref('随意拉伸');
  const value3 = ref('只能纵向拉伸');
  const value4 = ref('只能横向拉伸');
  const value5 = ref('禁止拉伸');
</script>

不同尺寸

rows 属性可以配置文本域的行数

cols 属性可以配置文本域的宽度

显示代码
html
<template>
  <n-textarea v-model="value6" rows="5" />
  <n-textarea v-model="value7" cols="10" />
</template>

<script setup>
  import { ref } from 'vue';
  const value6 = ref('');
  const value7 = ref('');
</script>

禁用状态

disabled 属性可以配置文本域禁用状态

显示代码
html
<template>
  <n-textarea v-model="value8" disabled />
</template>

<script setup>
  import { ref } from 'vue';
  const value8 = ref('禁用状态');
</script>

最大上限

max 属性可以配置文本域输入的最大上限文本

0/10
显示代码
html
<template>
  <n-textarea v-model="value9" max="10" />
</template>

<script setup>
  import { ref } from 'vue';
  const value9 = ref('');
</script>

API

参数说明类型可选值默认值
v-model绑定值'string' / 'number'————
placeholder输入框占位文本string————
max最大输入上限string————
disabled是否禁用boolean——false
autofocus是否自动获取焦点boolean——false
name原生 name 属性string————
resize拉伸方式string['vertical' , 'horizontal' , 'none','both']'both'
rows行数string——3
cols宽度string——70

Events

事件名称说明回调参数
onblur失去焦点触发的回调——
onfocus获取焦点触发的回调——