文本域 Textarea ​

多行文本控件

基础用法 ​

展示最基础的多行文本域

<template>
  <bp-textarea :style="{ width: '380px' }" v-model="val" clearable placeholder="Please input"></bp-textarea>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("");
</script>

文本域状态 ​

支持 readonly - 只读，disabled - 禁用，is-danger - 是否警示等属性控制状态

<template>
  <bp-space type="horizontal">
    <bp-textarea :style="{ width: '380px' }" readonly placeholder="Readonly"></bp-textarea>
    <bp-textarea :style="{ width: '380px' }" disabled placeholder="Diasbled"></bp-textarea>
    <bp-textarea :style="{ width: '380px' }" is-danger placeholder="Danger"></bp-textarea>
  </bp-space>
</template>

字数限制 ​

在限定 maxlength 后，可以通过 show-limit 开启字数限制提示。

<template>
  <bp-textarea :style="{ width: '380px' }" v-model="val" placeholder="Please input" :maxlength="200" show-limit></bp-textarea>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("");
</script>

Textarea 属性 ​

v-model
输入框绑定值
String
-
disabled
是否禁用
Boolean
false
readonly
是否只读状态
Boolean
false
is-danger
是否警示状态
Boolean
false
placeholder
占位提示文字
String
-
maxlength
限制输入最大长度
Number
-
showLimit
是否展示字数限制提示
Boolean
false
clearable
是否允许清空
Boolean
false

Textarea 事件 ​

input
输入内容触发
none
focus
聚焦触发
none
blur
失焦触发
none
keyup
键盘按下触发
none
keypress
按下回车时触发
none

Textarea 插槽 ​

perfix
前置元素
-
suffix
后置元素
-