输入框 Input

表单 · 可交互组件

单行文本输入

按需导入wbbb-ui/components/input

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { WbbbInput } from 'wbbb-ui/components/input'
import 'wbbb-ui/styles/input'

const value = ref('')
</script>

<template>
  <WbbbInput v-model="value" />
</template>

真实移动端预览新窗口打开 ↗

状态与交互

以下状态均可在右侧的真实 Playground 中操作与验收。

默认已填写焦点禁用错误

API 参考

属性（Props）

属性	说明	类型	默认值	必填
`clearable`	是否显示清空当前输入值的控件。	`boolean`	`false`	否
`disabled`	是否禁止用户与组件交互。	`boolean`	`false`	否
`error`	是否以错误视觉状态展示组件。	`boolean`	`false`	否
`maxlength`	限制允许输入的最大字符数。	`number`	`140`	否
`modelValue`	提供 v-model 使用的当前值。	`string \\| number`	`''`	否
`placeholder`	设置尚未输入或选择时的占位文案。	`string`	`''`	否
`readonly`	是否禁止编辑但保留内容可读。	`boolean`	`false`	否
`type`	设置组件的语义类型或样式变体。	`'text' \\| 'number' \\| 'idcard' \\| 'digit' \\| 'safe-password' \\| 'nickname'`	`'text'`	否

事件（Events）

update:modelValue
blur
change
clear
confirm
focus

插槽（Slots）

无

双向绑定

支持 v-model（modelValue）。

平台说明

构建验证：H5、App Vue、微信小程序、支付宝小程序与抖音小程序。

运行时差异：H5 支持键盘焦点与减弱动效；小程序端使用等价触控交互。上传、日期选择和服务弹层应在目标端再次验收。

使用提示：更多状态组合和跨端表现请在 Playground 中验证。

输入框 Input ​

基础用法 ​

状态与交互 ​

API 参考 ​