Skip to content

Textarea 文本域

增强的文本域。

基础使用

查看代码
vue
<template>
	<demo-container>
		<gov-textarea v-model="value" placeholder="请输入" />
	</demo-container>
</template>

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

设置行数

默认 rows 为3行。

查看代码
vue
<template>
	<demo-container>
		<gov-textarea v-model="value" rows="6" autosize placeholder="请输入" />
	</demo-container>
</template>

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

最大长度

可设置最大输入长度,并带有统计提示。

查看代码
vue
<template>
	<demo-container>
		<gov-textarea v-model="value" maxlength="100" placeholder="请输入" />
	</demo-container>
</template>

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

清空按钮

clearable 是否显示清空按钮。

查看代码
vue
<template>
	<demo-container>
		<gov-textarea
			v-model="value"
			maxlength="100"
			placeholder="请输入"
			clearable
		/>
	</demo-container>
</template>

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

改变大小

默认 resizetrue,当关闭时不可改变大小。

查看代码
vue
<template>
	<demo-container>
		<gov-textarea
			v-model="value"
			:resize="false"
			maxlength="100"
			placeholder="请输入"
			clearable
		/>
	</demo-container>
</template>

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

Attributes

属性名说明类型可选值默认值
modelValue绑定的值String
rowstextarea 行数Number/String3
maxlength最大长度Number/String
clearable是否可清空Booleantrue, falsefalse
placeholder占位符String
resize是否可调整大小Booleantrue, falsetrue
disabled是否禁用Booleantrue, falsefalse
triggerForm是否触发表单验证Booleantrue, falsetrue

Events

事件名说明回调参数
update:modelValue绑定值更新时触发新的值
input输入时触发输入的值
change值改变时触发新的值
focus获得焦点时触发
blur失去焦点时触发
clear清空按钮点击时触发

Released under the MIT License.