输入框 Input

提供简介的界面，方便用户输入各类信息，有效引导用户准确输入内容，便捷的采集信息。

基础用法

输入框的基本用法

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

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

不同状态

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

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

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

输入框尺寸

通过 size 属性设置输入框的尺寸，支持 4 种尺寸，分别是 mini - 迷你，small - 小型，default - 普通（默认），large - 大型。

迷你小型普通大型

<template>
  <bp-radio-group v-model="size" class="mb-5" type="button">
    <bp-radio value="mini">迷你</bp-radio>
    <bp-radio value="small">小型</bp-radio>
    <bp-radio value="default">普通</bp-radio>
    <bp-radio value="large">大型</bp-radio>
  </bp-radio-group>

  <bp-input style="width: 240px" :size clearable placeholder="请输入内容" />
</template>

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

const size = ref("default");
</script>

字数限制

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

0/11

<template>
  <bp-input v-model="txt" style="width: 180px" :maxlength="11" show-limit clearable placeholder="请输入内容" />
</template>

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

前置&后置元素

通过 perfix 和 suffix 属性设置输入框前置和后置元素。

+86

<template>
  <bp-space>
    <bp-input placeholder="请输入手机号">
      <template #prefix> +86 </template>
    </bp-input>
    <bp-input clearable placeholder="请输入内容">
      <template #suffix>
        <IconSearch2Line />
      </template>
    </bp-input>
  </bp-space>
</template>

密码输入

支持密码输入，通过 type 属性设置输入框类型为 password。

<template>
  <bp-input v-model="psw" type="password" style="width: 180px" clearable placeholder="请输入密码" />
</template>

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

Input 属性

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

Input 事件

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

Input 插槽

prefix	头部元素	-	-
suffix	尾部元素	-	-

Input 方法

focus	聚焦	-	-	-
blur	失焦	-	-	-
triggerEye	切换明文/匿文	-	切换后状态{Boolean}	-
clear	清空输入框	-	-	-