You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.0 KiB
42 lines
1.0 KiB
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
modelValue: string
|
|
label?: string
|
|
placeholder?: string
|
|
disabled?: boolean
|
|
}>(), {
|
|
label: '密码',
|
|
placeholder: '请输入密码',
|
|
disabled: false,
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string]
|
|
}>()
|
|
|
|
const showPassword = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<UFormField :label="label" required>
|
|
<div class="relative">
|
|
<UInput
|
|
:type="showPassword ? 'text' : 'password'"
|
|
:model-value="modelValue"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
class="w-full"
|
|
@update:model-value="emit('update:modelValue', $event)"
|
|
/>
|
|
<UButton
|
|
variant="link"
|
|
color="neutral"
|
|
size="sm"
|
|
:icon="showPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
|
|
:aria-label="showPassword ? '隐藏密码' : '显示密码'"
|
|
class="absolute right-1 top-1/2 -translate-y-1/2"
|
|
@click="showPassword = !showPassword"
|
|
/>
|
|
</div>
|
|
</UFormField>
|
|
</template>
|
|
|