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.
`buttonProps`		`ButtonProps`
`id`		`string`
`name`		`string`
`placeholder`		`string` The placeholder text when the input is empty.
`color`	`'primary'`	`string \| number \| symbol`
`variant`	`'outline'`	`string \| number \| symbol`
`size`	`'md'`	`string \| number \| symbol`
`autocomplete`		`string`
`autofocusDelay`		`number`
`defaultValue`		`string \| number \| bigint \| false \| true`
`modelModifiers`		`ModelModifiers<AcceptableValue>`
`icon`		`any` Display an icon based on the `leading` and `trailing` props.
`avatar`		`AvatarProps` Display an avatar on the left side.
`leadingIcon`		`any` Display an icon on the left side.
`trailingIcon`		`any` Display an icon on the right side.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`list`		`string`
`max`		`string \| number`
`maxlength`		`string \| number`
`min`		`string \| number`
`minlength`		`string \| number`
`pattern`		`string`
`readonly`		`false \| true \| "true" \| "false"`
`step`		`string \| number`
`modelValue`		`string \| number \| bigint \| false \| true`
`required`		`boolean`
`autofocus`		`boolean`
`disabled`		`boolean`
`highlight`		`boolean` Highlight the ring color like a focus state.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`ui`		`{ [x: string]: ClassNameValue; }`

Emits

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

Slots

Slot	Type
`leading`	`{ ui: { [x: string]: (props?: Record<string, any>) => string; }; }`
`default`	`{ ui: { [x: string]: (props?: Record<string, any>) => string; }; }`

Changelog

d4a6c — refactor: 将组件 Props 类型定义提取到独立文件

9bdda — refactor: 优化组件代码格式

e49b2 — ♻️ refactor: 为输入增强组件添加泛型类型支持

7099c — ♻️ refactor: 优化输入增强组件的实现

d97ef — ♻️ refactor: 优化 AutoForm 组件架构和渲染逻辑

WithCopy

带复制功能的输入框组件

快速开始

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