Textarea 文本域

介绍

在文本域内输入或编辑多行文本。

基础用法

通过 v-model 绑定输入框的值。

<vd-textarea v-model="value" placeholder="请输入文本" />

const value = ref('');

展示边框

通过 border 属性展示边框。

<vd-textarea v-model="value" placeholder="请输入文本" :border="true" />

const value = ref('');

高度自适应

通过 autosize 属性设置高度自适应。

<vd-textarea v-model="value" placeholder="请输入文本" autosize />

const value = ref('');

展示清除按钮

通过 clearable 属性展示清除按钮。

<vd-textarea v-model="value" placeholder="请输入文本" clearable />

const value = ref('');

展示字数限制

已设置 maxlength 时，可通过 show-word-limit 属性展示字数限制。

<vd-textarea
  v-model="value"
  placeholder="请输入文本"
  maxlength="20"
  show-word-limit
/>

const value = ref('');

只读状态

通过 readonly 属性设置只读状态。

<vd-textarea v-model="value" placeholder="请输入文本" readonly />

const value = ref('');

禁用状态

通过 disabled 属性设置禁用状态。

<vd-textarea v-model="value" placeholder="请输入文本" disabled />

const value = ref('');

对其方式

通过 align 属性设置对其方式。

<vd-textarea v-model="value" placeholder="请输入文本" align="left" />
<vd-textarea v-model="value" placeholder="请输入文本" align="center" />
<vd-textarea v-model="value" placeholder="请输入文本" align="right" />

const value = ref('');

自定义占位符样式

通过 placeholder-style 属性自定义占位符样式。

<vd-textarea
  v-model="value"
  placeholder="请输入文本"
  placeholder-style="color: red;"
/>

const value = ref('');

自定义最小可见行

通过 rows 属性自定义最小可见行。

<vd-textarea
  v-model="value"
  placeholder="最小可见高度8行"
  rows="8"
/>

const value = ref('');

API

Props

参数	说明	类型	默认值
v-model	当前输入的值	string | number	-
rows	最小可见高度	string | number	3
align	内容对齐方式	InputAlign	'left'
border	是否显示边框	boolean	false
autosize	是否自适应内容高度	boolean	false
clearable	是否显示清除按钮	boolean	false
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
maxlength	最大输入长度，设置为 -1 的时候不限制最大长度	number	-1
show-word-limit	是否显示输入字数限制	boolean	false
placeholder	输入框占位文本	string	-
placeholder-class	占位符样式	ClassValue	-
placeholder-style	占位符样式	StyleValue	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
clear	清除时触发	-
change	改变时触发	string
input	输入时触发	TextareaOnInputEvent
focus	聚焦时触发	TextareaOnFocusEvent
blur	失焦时触发	TextareaOnBlurEvent
confirm	点击完成按钮时触发	TextareaOnConfirmEvent

TIP

按钮基于 textarea 组件，更多 props/events 可前往 uniapp 官网 Textarea 查看。

Slots

名称	说明
clear	清除图标
word-limit	字数限制