WithPasswordToggle

View source
带显示/隐藏切换的密码输入框组件。

简介

MWithPasswordToggle 是一个带有显示/隐藏切换功能的密码输入框组件。提供眼睛图标按钮，点击可在明文和密文之间切换显示，提升密码输入的用户体验。

基于 Nuxt UI 的 Input 组件封装

用法

右侧眼睛按钮在明文与密文间切换：

<script setup lang="ts">
const value = ref("hide-me")
</script>

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

leadingIcon 前置图标

通过 leadingIcon 为密码框添加语义化图标：

<template>
  <MWithPasswordToggle leading-icon="i-lucide-lock" />
</template>

size 尺寸

通过 size 切换输入框与按钮尺寸：

<template>
  <MWithPasswordToggle v-model="value" size="md" />
</template>

buttonProps 切换按钮

通过 buttonProps 自定义切换按钮样式：

<template>
  <MWithPasswordToggle v-model="value" :button-props="{ color: 'primary', variant: 'soft' }" />
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

buttonPropsButtonProps
idstring
namestring
placeholderstring

The placeholder text when the input is empty.

color'primary'"primary" | "secondary" | "info" | "success" | "warning" | "error" | "important" | "neutral"
variant'outline'"outline" | "soft" | "subtle" | "ghost" | "none"
size'md'"xs" | "sm" | "md" | "lg" | "xl"
autocomplete"on" | "off" | string & {}
autofocusDelaynumber
defaultValueT
modelModifiersModelModifiers
iconany

Display an icon based on the leading and trailing props.

avatarAvatarProps

Display an avatar on the left side.

leadingIconany

Display an icon on the left side.

trailingIconany

Display an icon on the right side.

loadingIconappConfig.ui.icons.loadingany

The icon when the loading prop is true.

liststring
maxstring | number
maxlengthstring | number
minstring | number
minlengthstring | number
patternstring
readonlyfalse | true | "true" | "false"
stepstring | number
modelValueT
requiredboolean
autofocusboolean
disabledboolean
highlightboolean

Highlight the ring color like a focus state.

fixedboolean

Keep the mobile text size on all breakpoints.

leadingboolean

When true, the icon will be displayed on the left side.

trailingboolean

When true, the icon will be displayed on the right side.

loadingboolean

When true, the loading icon will be displayed.

uiRecord<string, ClassNameValue> & { root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; }

Emits

Event Type
update:modelValue[value: T]
blur[event: FocusEvent]
change[event: Event]

Slots

Slot Type
leading{ ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any>) => string; leading: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailing: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; }
default{ ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any>) => string; leading: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailing: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; }

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    withPasswordToggle: {
      slots: {
        trailing: 'pe-1'
      }
    }
  }
})

Changelog

No recent changes

WithFloatingLabel

带浮动标签和清除按钮的输入框组件。

快速开始

了解 AutoForm 的核心设计理念和基本使用方式。

Copyright © 2025 - 2026 YiXuan - MIT License