InputPassword 密码输入框

基于 `reui/input` 的密码输入框变体，对齐 [Ant Design Input.Password](https://ant.design/components/input-cn)。默认隐藏输入内容，可一键切换明文/密文。

基于 reui/input 的密码输入框变体，对齐 Ant Design Input.Password。默认隐藏输入内容，可一键切换明文/密文。

何时使用

  • 需要输入密码、令牌等敏感信息，并在输入过程中默认掩码显示。
  • 需要提供"显示/隐藏"切换，便于用户确认输入无误时。

导入

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

代码演示

基础用法

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

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

<template>
  <InputPassword v-model="password" placeholder="请输入密码" class="max-w-sm" />
</template>

关闭显隐切换

visibilityToggle=false 时固定为密文，不展示切换按钮。

<template>
  <InputPassword
    v-model="password"
    placeholder="固定密文"
    :visibility-toggle="false"
    class="max-w-sm"
  />
</template>

自定义显隐图标

通过 iconRender 自定义切换按钮图标，参数为当前是否明文 visible。

<script setup>
import { h } from "vue";
import { Lock, Unlock } from "lucide-vue-next";

const renderIcon = (visible) => h(visible ? Lock : Unlock, { class: "size-4" });
</script>

<template>
  <InputPassword v-model="password" :icon-render="renderIcon" class="max-w-sm" />
</template>

受控显隐

visibilityToggle 传入对象可完全受控，并通过 onVisibleChange 接收状态变化。

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

const visible = ref(false);
const onVisibleChange = (v) => (visible.value = v);
</script>

<template>
  <InputPassword
    v-model="password"
    :visibility-toggle="{ visible, onVisibleChange }"
    class="max-w-sm"
  />
</template>

校验状态 / 尺寸 / 形态

密码框同样支持 status、size、variant、bordered，与 Input、DatePicker 共用同一套主题。

<template>
  <div class="flex max-w-sm flex-col gap-3">
    <InputPassword v-model="p1" variant="filled" placeholder="填充样式" />
    <InputPassword v-model="p2" status="error" placeholder="错误状态" />
    <InputPassword v-model="p3" size="small" placeholder="小尺寸" />
  </div>
</template>

禁用 / 只读

<template>
  <div class="flex max-w-sm flex-col gap-3">
    <InputPassword v-model="p1" disabled placeholder="禁用" />
    <InputPassword v-model="p2" readonly placeholder="只读（可切换明文）" />
  </div>
</template>

API

Props

除下列新增属性外，其余继承 Input 的全部 props（modelValue、placeholder、disabled、readonly、prefix、addonBefore/After、allowClear、maxLength、status、size、variant、bordered、classNames、styles、class 等）。

属性说明类型默认值
visibilityToggle是否显示切换按钮，或受控显隐boolean | { visible?; onVisibleChange?; tabIndex? }true
iconRender自定义切换按钮图标(visible: boolean) => VNodevisible ? <Eye/> : <EyeOff/>

Events

同 Input：update:modelValue、change、pressEnter、clear、focus、blur。

实例方法

同 Input：focus()、blur()。

Slots

同 Input：#prefix、#addonBefore、#addonAfter、#clearIcon。（显隐切换按钮固定在输入框末尾。）

Input 输入框
Input 输入框
InputSelect 输入选择器
既可以从预设选项中选择，也允许自由输入（按 Enter 确认），支持单选和多选，适用于标签输入、自定义值选择等场景。