输入框 Input ​

基础的文本输入控件。

基础用法 ​

一个基础输入框用法，通过 v-model 绑定数据值。

<template>
  <bp-space>
    <bp-input :style="{ width: '180px' }" v-model="val" clearable placeholder="Please enter"></bp-input>
    <bp-input disabled :style="{ width: '180px' }" v-model="val" placeholder="Please enter"></bp-input>
  </bp-space>
</template>

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

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

输入框尺寸 ​

提供四种输入框尺寸以适应不同使用场景，分别是mini - 迷你，small - 小型，normal - 常规，large - 大型。

<template>
  <bp-space type="horizontal">
    <bp-input v-model="val" :style="{ width: '120px' }" clearable size="mini" placeholder="Mini"></bp-input>
    <bp-input v-model="val" :style="{ width: '130px' }" clearable size="small" placeholder="Samll"></bp-input>
    <bp-input v-model="val" :style="{ width: '140px' }" clearable size="normal" placeholder="Normal"></bp-input>
    <bp-input v-model="val" :style="{ width: '160px' }" clearable size="large" placeholder="Large"></bp-input>
  </bp-space>
</template>

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

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

字数限制 ​

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

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

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

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

密码输入 ​

使输入框支持密码输入，且支持明文/匿文切换。

<template>
  <bp-input :style="{ width: '220px' }" type="password" v-model="psw" placeholder="Please enter your PIN"></bp-input>
</template>

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

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

Input 属性 ​

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

Input 事件 ​

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

Input 插槽 ​

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