47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<q-input v-model="password" v-bind="attrs" :label="label" :type="type">
|
||
|
|
<template #append><q-icon :name="name" class="cursor-pointer" @click="toggle" /></template
|
||
|
|
></q-input>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { computed, defineComponent, ref } from 'vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'PasswordInput',
|
||
|
|
props: {
|
||
|
|
modelValue: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
emits: {
|
||
|
|
'update:modelValue': (value: string) => !!value,
|
||
|
|
},
|
||
|
|
setup(props, { emit, attrs }) {
|
||
|
|
const isPassword = ref(true);
|
||
|
|
const type = computed(() => (isPassword.value ? 'password' : 'text'));
|
||
|
|
const name = computed(() => (isPassword.value ? 'visibility_off' : 'visibility'));
|
||
|
|
const password = computed({
|
||
|
|
get: () => props.modelValue,
|
||
|
|
set: (value: string) => emit('update:modelValue', value),
|
||
|
|
});
|
||
|
|
function toggle() {
|
||
|
|
isPassword.value = !isPassword.value;
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
attrs,
|
||
|
|
isPassword,
|
||
|
|
name,
|
||
|
|
password,
|
||
|
|
toggle,
|
||
|
|
type,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|