Site Logo

Movk Nuxt

WithPasswordToggle

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

简介

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

基于 Nuxt UI 的 Input 组件封装

基础用法

最简单的密码切换输入框：

<script setup lang="ts">
const password = ref('')
</script>

<template>
  <MWithPasswordToggle v-model="password" placeholder="输入密码..." />
</template>

带图标

为密码框添加锁的图标：

<script setup lang="ts">
const password = ref('')
</script>

<template>
  <MWithPasswordToggle v-model="password" leading-icon="i-lucide-lock" placeholder="密码" />
</template>

登录表单

结合表单字段使用：

<script setup lang="ts">
const form = reactive({
  username: '',
  password: ''
})
</script>

<template>
  <div class="space-y-4">
    <UFormField label="用户名">
      <UInput v-model="form.username" leading-icon="i-lucide-user" placeholder="请输入用户名" />
    </UFormField>

    <UFormField label="密码">
      <MWithPasswordToggle v-model="form.password" leading-icon="i-lucide-lock" placeholder="请输入密码" />
    </UFormField>
  </div>
</template>

不同尺寸

支持多种尺寸：

<script setup lang="ts">
const password = ref('Test@123')
</script>

<template>
  <div class="space-y-4 flex flex-col">
    <MWithPasswordToggle v-model="password" size="sm" placeholder="Small" />

    <MWithPasswordToggle v-model="password" size="md" placeholder="Medium" />

    <MWithPasswordToggle v-model="password" size="lg" placeholder="Large" />
  </div>
</template>

自定义按钮

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

<script setup lang="ts">
const password = ref('SecurePass123')
</script>

<template>
  <MWithPasswordToggle
    v-model="password"
    :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

Custom props for the toggle button

idstring
namestring
placeholderstring

The placeholder text when the input is empty.

color'primary'"primary" | "secondary" | "success" | "info" | "warning" | "error" | "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.

ui{ root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; }

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; }; }

Changelog

Soon
  • 29974 — chore: 升级依赖并修复类型问题
  • 30ead — refactor: 重组项目结构以提升可维护性
v0.1.0
  • d4a6c — refactor: 将组件 Props 类型定义提取到独立文件
  • 9bdda — refactor(components): 优化组件代码格式
  • e49b2 — ♻️ refactor: 为输入增强组件添加泛型类型支持
  • 7099c — ♻️ refactor: 优化输入增强组件的实现
  • d97ef — ♻️ refactor: 优化 AutoForm 组件架构和渲染逻辑

WithCopy

带复制功能的输入框组件

快速开始

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

Copyright © 2025 - 2026 YiXuan - MIT License