Textarea 文本域

介绍

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

基础用法

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

显示字数统计

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

高度自定义，拉伸

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

只读、禁用

<template>
  <nut-textarea readonly model-value="textarea 只读状态" />
  <nut-textarea disabled model-value="textarea 禁用状态" />
</template>

API

Props

参数	说明	类型	默认值
v-model	输入值，支持双向绑定	string	-
textarea-style 1.7.3	文本域自定义样式	StyleValue	-
textarea-class 1.7.3	文本域自定义类名	ClassType	-
placeholder	设置占位提示文字	string	请输入内容
placeholder-style 1.6.9	指定 placeholder 的样式	string	-
placeholder-class 1.6.9	指定 placeholder 的样式类	string	textarea-placeholder
max-length	限制最长输入字符	string | number	-
rows	textarea的高度，优先级高于autosize属性 仅支持 H5	string | number	2
limit-show	textarea是否展示输入字符。须配合max-length使用	boolean	false
autosize	是否自适应内容高度，也可传入对象, 如 { maxHeight: 200, minHeight: 100 }，单位为px	boolean | {maxHeight?: number; minHeight?: number}	false
text-align	文本位置,可选值left,center,right	string	-
readonly	只读属性	boolean	false
disabled	禁用属性	boolean	false
autofocus	自动获取焦点	boolean	false
cursor-spacing	指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离	number	0
cursor	指定focus时的光标位置	number	-1
show-confirm-bar	是否显示键盘上方带有”完成“按钮那一栏	boolean	false
selection-start	光标起始位置，自动聚集时有效，需与selection-end搭配使用	number	-1
selection-end	光标结束位置，自动聚集时有效，需与selection-start搭配使用	number	-1
adjust-position	键盘弹起时，是否自动上推页面	boolean	false
hold-keyboard	focus时，点击页面的时候不收起键盘	boolean	false
disable-default-padding	是否去掉 iOS 下的默认内边距	boolean	false
confirm-type	设置键盘右下角按钮的文字，可选值 send search next go done return	string	return
confirm-hold	点击键盘右下角按钮时是否保持键盘不收起	boolean	false
adjust-keyboard-to	键盘对齐位置，可选值 cursor bottom	string	cursor

Events

事件名	说明	回调参数
change	输入框值改变时触发	value
focus	聚焦时触发	event
blur	失焦时触发	value,event
confirm	点击完成按钮时触发	event
input	键盘输入时触发	value,event

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值
--nut-textarea-font	var(--nut-font-size-2)
--nut-textarea-limit-color	var(--nut-text-color)
--nut-textarea-text-color	var(--nut-title-color)
--nut-textarea-disabled-color	var(--nut-disable-color)