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>
改变大小
默认 resize
为 true
,当关闭时不可改变大小。
查看代码
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 | — | — |
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 | 清空按钮点击时触发 | — |