Textarea 文本域

增强的文本域。

基础使用

查看代码

<template>
	<demo-container>
		<gov-textarea v-model="value" placeholder="请输入" />
	</demo-container>
</template>

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

设置行数

默认 rows 为3行。

查看代码

<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>

最大长度

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

查看代码

<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 是否显示清空按钮。

查看代码

<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>

改变大小

默认 resize 为 true，当关闭时不可改变大小。

查看代码

<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	—	—
rows	textarea 行数	Number/String	—	3
maxlength	最大长度	Number/String	—	—
clearable	是否可清空	Boolean	true, false	false
placeholder	占位符	String	—	—
resize	是否可调整大小	Boolean	true, false	true
disabled	是否禁用	Boolean	true, false	false
triggerForm	是否触发表单验证	Boolean	true, false	true

Events

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