输入框 Input

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

基础用法

输入框的基本用法

vue

<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 属性来设置输入框的禁用和只读状态

vue

<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 - 大型。

迷你小型普通大型

vue

<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/50

说明：显示所有字符数量，包括中文、英文、数字和符号

中英文字符分别计数模式

中2英5/100

说明：分别统计中文字符和英文字符数量，显示格式为"中X英Y/最大长度"

自定义计数规则 - 只统计单词数

6/30

说明：自定义计数规则，只统计英文单词数量

自定义计数规则 - 只统计中文字符

8/20

说明：自定义计数规则，只统计中文字符数量

不显示最大长度限制

中0英0

说明：不设置最大长度，只显示当前字符统计

vue

<template>
  <div class="word-count-demo">
    <div class="demo-section">
      <h3>默认字数统计模式</h3>
      <div class="demo-item">
        <bp-input
          v-model="defaultText"
          placeholder="请输入文本"
          :maxlength="50"
          show-limit
        />
        <p>说明：显示所有字符数量，包括中文、英文、数字和符号</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>中英文字符分别计数模式</h3>
      <div class="demo-item">
        <bp-input
          v-model="mixedText"
          placeholder="请输入中英文混合文本"
          :maxlength="100"
          show-limit
          word-count-mode="chinese-english"
        />
        <p>说明：分别统计中文字符和英文字符数量，显示格式为"中X英Y/最大长度"</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>自定义计数规则 - 只统计单词数</h3>
      <div class="demo-item">
        <bp-input
          v-model="wordText"
          placeholder="请输入英文文本"
          :maxlength="30"
          show-limit
          word-count-mode="custom"
          :custom-word-count="countWords"
        />
        <p>说明：自定义计数规则，只统计英文单词数量</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>自定义计数规则 - 只统计中文字符</h3>
      <div class="demo-item">
        <bp-input
          v-model="chineseText"
          placeholder="请输入中文文本"
          :maxlength="20"
          show-limit
          word-count-mode="custom"
          :custom-word-count="countChineseOnly"
        />
        <p>说明：自定义计数规则，只统计中文字符数量</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>不显示最大长度限制</h3>
      <div class="demo-item">
        <bp-input
          v-model="noLimitText"
          placeholder="请输入文本"
          show-limit
          word-count-mode="chinese-english"
        />
        <p>说明：不设置最大长度，只显示当前字符统计</p>
      </div>
    </div>
  </div>
</template>

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

// 默认模式
const defaultText = ref('');

// 中英文混合模式
const mixedText = ref('Hello 世界');

// 自定义计数 - 单词数
const wordText = ref('Hello world, this is a test');

// 自定义计数 - 仅中文字符
const chineseText = ref('这是一段中文文本');

// 无最大长度限制
const noLimitText = ref('');

/**
 * 自定义计数函数：统计单词数
 * @param value 输入值
 * @returns 单词数量
 */
const countWords = (value: string): number => {
  // 匹配英文单词
  const words = value.match(/\b[a-zA-Z]+\b/g);
  return words ? words.length : 0;
};

/**
 * 自定义计数函数：只统计中文字符
 * @param value 输入值
 * @returns 中文字符数量
 */
const countChineseOnly = (value: string): number => {
  const chineseRegex = /[\u4e00-\u9fa5]/g;
  const chineseMatches = value.match(chineseRegex) || [];
  return chineseMatches.length;
};
</script>

<style scoped>
.word-count-demo {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: 30px;
}

.demo-item {
  margin-bottom: 10px;
}

.demo-item p {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

h2 {
  color: #333;
  margin-bottom: 20px;
}

h3 {
  color: #555;
  margin-bottom: 15px;
}
</style>

前置&后置元素

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

+86

vue

<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。

vue

<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	清空输入框	-	-	-

输入框 Input ​

基础用法 ​

不同状态 ​

输入框尺寸 ​

字数限制 ​