DemoTextfieldPasswordInput.vue
1.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script lang="ts" setup>
const show1 = ref(false)
const show2 = ref(true)
const password = ref('Password')
const confirmPassword = ref('wqfasds')
const rules = {
required: (value: string) => !!value || 'Required.',
min: (v: string) => v.length >= 8 || 'Min 8 characters',
}
</script>
<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<VTextField
v-model="password"
:append-inner-icon="show1 ? 'ri-eye-off-line' : 'ri-eye-line'"
:rules="[rules.required, rules.min]"
:type="show1 ? 'text' : 'password'"
name="input-10-1"
label="Normal with hint text"
hint="At least 8 characters"
placeholder="············"
counter
@click:append-inner="show1 = !show1"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextField
v-model="confirmPassword"
:rules="[rules.required, rules.min]"
:append-inner-icon="show2 ? 'ri-eye-off-line' : 'ri-eye-line'"
:type="show2 ? 'text' : 'password'"
name="input-10-2"
placeholder="············"
label="Visible"
hint="At least 8 characters"
@click:append-inner="show2 = !show2"
/>
</VCol>
</VRow>
</template>