多行文本 Textarea

提供了灵活的输入区域，支持用户自由地输入、编辑大段文字内容。

基础用法

基础的多行文本输入框用法

<template>
  <bp-textarea v-model="txt" clearable placeholder="请输入内容" />
</template>

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

字数限制

支持字数限制，通过 maxlength 属性设置最大字数，并且通过 show-limit 属性来显示字数统计。

0/220

<template>
  <bp-textarea v-model="txt" :maxlength="220" show-limit clearable placeholder="请输入内容" />
</template>

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

多行文本状态

可以通过 disabled 和 readonly 属性来设置输入框的禁用和只读状态

文本内容

文本内容

文本内容

<template>
  <bp-space>
    <bp-textarea v-model="txt" clearable placeholder="请输入内容" />
    <bp-textarea readonly v-model="txt" placeholder="请输入内容" />
    <bp-textarea disabled v-model="txt" placeholder="请输入内容" />
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";
const txt = ref("文本内容");
</script>

Textarea 属性

v-model	绑定值	String	-	-
name	输入框名称	String	-	-
placeholder	占位文本	String	-	-
size	输入框尺寸	InputSize	default	-
maxlength	最大输入长度	Number	-	-
show-limit	是否显示字数限制	Boolean	false	-
readonly	是否只读	Boolean	false	-
disabled	是否禁用	Boolean	false	-
clearable	是否允许清空	Boolean	false	-
rows	文本行数	Number	3	-

Textarea 事件

input	输入触发	{ev: Event, value: String}	-
focus	聚焦触发	ev: Event	-
blur	失焦触发	ev: Event	-
keypress	键入触发	ev: Event	-
keyup	键松触发	ev: Event	-

Textarea 方法

focus	聚焦	-	-	-
blur	失焦	-	-	-
clear	清空输入框	-	-	-