Input 输入框

Input 输入框

用户可以在表单中输入内容的文本输入框，对齐 Ant Design Input 基础组件能力，支持前后缀、前置/后置标签、可清除、字数统计、校验状态、尺寸与形态变体。

何时使用

  • 需要用户输入表单域内的单行文本时。
  • 需要提供可清除、带图标前缀/后缀、带单位或标签、限制长度并显示字数等增强交互时。

说明：Input.TextArea、Input.Search、Input.Password、Input.OTP 等变体不耦合在本组件中，请按需选用独立的 Textarea 等组件。

导入

import { Input } from "@reglow/reui";

兼容旧引用：@reglow/reui 已改为转发 reui/input，现有业务无需改动即可获得升级能力。

代码演示

基础用法

<script setup>
import { ref } from "vue";
import { Input } from "@reglow/reui";

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

<template>
  <Input v-model="value" placeholder="请输入" class="max-w-sm" />
</template>

前后缀

<template>
  <Input placeholder="请输入手机号" class="max-w-sm">
    <template #prefix>
      <PhoneIcon class="size-4" />
    </template>
    <template #suffix>
      <span class="text-xs text-muted-foreground">可选</span>
    </template>
  </Input>
</template>

前置/后置标签

<template>
  <div class="flex max-w-sm flex-col gap-3">
    <Input v-model="domain" addon-before="https://" addon-after=".com" />
    <Input v-model="price">
      <template #addonAfter>元</template>
    </Input>
  </div>
</template>

可清除

<template>
  <Input v-model="value" allow-clear placeholder="输入后可清除" class="max-w-sm" />
</template>

字数统计与最大长度

<template>
  <Input v-model="value" show-count :max-length="20" placeholder="最多 20 字" class="max-w-sm" />
</template>

自定义计数格式：

<script setup>
const countFormatter = ({ count, maxLength }) => `${count}/${maxLength}`;
</script>

<template>
  <Input v-model="value" :show-count="{ formatter: countFormatter }" :max-length="50" class="max-w-sm" />
</template>

校验状态

<template>
  <div class="flex max-w-sm flex-col gap-3">
    <Input v-model="value" status="error" placeholder="错误状态" />
    <Input v-model="value" status="warning" placeholder="警告状态" />
  </div>
</template>

尺寸

<template>
  <div class="flex max-w-sm flex-col gap-3">
    <Input size="large" placeholder="大尺寸" />
    <Input size="medium" placeholder="中尺寸（默认）" />
    <Input size="small" placeholder="小尺寸" />
  </div>
</template>

形态变体

<template>
  <div class="flex max-w-sm flex-col gap-3">
    <Input variant="outlined" placeholder="描边（默认）" />
    <Input variant="filled" placeholder="填充" />
    <Input variant="borderless" placeholder="无边框" />
    <Input variant="underlined" placeholder="下划线" />
  </div>
</template>

回车事件

<script setup>
const onSearch = (e) => {
  console.log("按回车查询", e.target.value);
};
</script>

<template>
  <Input v-model="keyword" placeholder="输入后回车搜索" class="max-w-sm" @press-enter="onSearch" />
</template>

API

Props

属性说明类型默认值
modelValue当前值（v-model）string | number—
defaultValue默认值（非受控）string | number—
placeholder占位文字string""
type输入类型，同原生 inputstring"text"
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
addonBefore前置标签（字符串或组件）VNode | string—
addonAfter后置标签（字符串或组件）VNode | string—
prefix前缀图标/文字VNode | string—
suffix后缀图标/文字VNode | string—
allowClear可点击清除（传入对象可定制图标）boolean | { clearIcon?: VNode }false
showCount展示字数（传入对象可自定义格式）boolean | { formatter?: (info: { value, count, maxLength? }) => VNode | string }false
maxLength最大长度number—
status校验状态"error" | "warning"—
size尺寸"large" | "medium" | "small""medium"
variant形态变体"outlined" | "borderless" | "filled" | "underlined""outlined"
bordered是否有边框booleantrue
classNames语义化结构自定义类名（root/addonBefore/addonAfter/prefix/input/clear/count/suffix）Partial<Record<...>>—
styles语义化结构自定义行内样式（同上）Partial<Record<...>>—

同时透传原生 input 属性（name、autocomplete、pattern、min、max、step 等），以及常规属性 class、id、style 等。

Slots

插槽说明
#prefix前缀内容（优先于 prefix prop）
#suffix后缀内容（优先于 suffix prop）
#addonBefore前置标签（优先于 addonBefore prop）
#addonAfter后置标签（优先于 addonAfter prop）
#clearIcon自定义清除图标

Events

事件说明回调参数
update:modelValuev-model 更新(value: string | number)
change内容变化（对齐 antd onChange）(value: string | number)
pressEnter按下回车(e: KeyboardEvent)
clear点击清除按钮—
focus获得焦点(e: FocusEvent)
blur失去焦点(e: FocusEvent)

实例方法

方法说明
focus()聚焦输入框
blur()移除焦点
const inputRef = ref<InstanceType<typeof Input> | null>(null);
inputRef.value?.focus();

设计规范

  • 高度随 size 变化：large 44px / medium 36px / small 32px。
  • 校验状态 status="error" 时边框与聚焦环变红，warning 变黄，均可通过 classNames/styles 进一步定制。
Editor 富文本编辑器
基于 Tiptap 的富文本编辑器，支持 Markdown
InputPassword 密码输入框
基于 `reui/input` 的密码输入框变体，对齐 [Ant Design Input.Password](https://ant.design/components/input-cn)。默认隐藏输入内容，可一键切换明文/密文。