WithPasswordToggle
简介
MWithPasswordToggle 是一个带有显示/隐藏切换功能的密码输入框组件。提供眼睛图标按钮，点击可在明文和密文之间切换显示，提升密码输入的用户体验。
基础用法
最简单的密码切换输入框：
<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' | anyThe element or component this component should render as. |
buttonProps | ButtonProps
| |
id | string | |
name | string | |
placeholder | stringThe 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" |
required | boolean | |
autocomplete | string | |
autofocus | boolean | |
autofocusDelay | number | |
disabled | boolean | |
highlight | boolean Highlight the ring color like a focus state. | |
defaultValue | null | string | number | bigint | false | true | |
modelModifiers | ModelModifiers<AcceptableValue> | |
icon | anyDisplay an icon based on the | |
avatar | AvatarPropsDisplay an avatar on the left side.
| |
leading | boolean When | |
leadingIcon | anyDisplay an icon on the left side. | |
trailing | boolean When | |
trailingIcon | anyDisplay an icon on the right side. | |
loading | boolean When | |
loadingIcon | appConfig.ui.icons.loading | anyThe icon when the |
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 | null | string | number | bigint | false | true | |
ui | { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; } |
Emits
| Event | Type |
|---|---|
update:modelValue | [value: AcceptableValue] |
blur | [event: FocusEvent] |
change | [event: Event] |
update:modelValue | [value: AcceptableValue | undefined] |
Slots
| Slot | Type |
|---|---|
leading | { ui: { root: (props?: Record<string, any> | undefined) => string; base: (props?: Record<string, any> | undefined) => string; leading: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailing: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
default | { ui: { root: (props?: Record<string, any> | undefined) => string; base: (props?: Record<string, any> | undefined) => string; leading: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailing: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |