DemoTextfieldIconSlots.vue
1.57 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script lang="ts" setup>
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
import { themeConfig } from '@themeConfig'
const message = ref('Hey!')
const loading = ref(false)
const clickMe = () => {
loading.value = true
message.value = 'Wait for it...'
setTimeout(() => {
loading.value = false
message.value = 'You\'ve clicked me!'
}, 2000)
}
</script>
<template>
<VTextField
v-model="message"
clearable
clear-icon="ri-close-line"
label="Message"
placeholder="Hey!!"
type="text"
>
<!-- Prepend -->
<template #prepend>
<VTooltip location="bottom">
<template #activator="{ props }">
<VIcon
v-bind="props"
icon="ri-question-line"
/>
</template>
I'm a tooltip
</VTooltip>
</template>
<!-- AppendInner -->
<template #append-inner>
<VFadeTransition leave-absolute>
<VProgressCircular
v-if="loading"
size="24"
color="info"
indeterminate
/>
<VNodeRenderer
v-else
:nodes="themeConfig.app.logo"
/>
</VFadeTransition>
</template>
<!-- Append -->
<template #append>
<VBtn
:size="$vuetify.display.smAndDown ? 'small' : 'large'"
class="mt-n2"
:icon="$vuetify.display.smAndDown"
@click="clickMe"
>
<VIcon icon="ri-focus-3-line" />
<span
v-if="$vuetify.display.mdAndUp"
class="ms-3"
>Click me</span>
</VBtn>
</template>
</VTextField>
</template>