File tree Expand file tree Collapse file tree 2 files changed +12
-12
lines changed Expand file tree Collapse file tree 2 files changed +12
-12
lines changed Original file line number Diff line number Diff line change 1
1
<script setup lang="ts">
2
- import { ModalsContainer } from ' vue-final-modal'
3
- import ModalDragResize from ' ./ModalDragResize.vue'
2
+ import { ModalsContainer , useModal } from ' vue-final-modal'
4
3
5
- const show = ref (false )
4
+ const { open } = useModal ({
5
+ keepAlive: true ,
6
+ component: defineAsyncComponent (() => import (' ./ModalDragResize.vue' )),
7
+ })
6
8
</script >
7
9
8
10
<template >
9
- <VButton @click =" show = true " >
11
+ <VButton @click =" () => open() " >
10
12
Open Modal
11
13
</VButton >
12
14
13
- <ModalDragResize v-model =" show" />
14
-
15
15
<ModalsContainer />
16
16
</template >
Original file line number Diff line number Diff line change @@ -18,19 +18,19 @@ Here is a basic drag and resize modal example that using [vue3-drag-resize](http
18
18
19
19
``` vue [Preview.vue]
20
20
<script setup lang="ts">
21
- import { ModalsContainer } from 'vue-final-modal'
22
- import ModalDragResize from './ModalDragResize.vue'
21
+ import { ModalsContainer, useModal } from 'vue-final-modal'
23
22
24
- const show = ref(false)
23
+ const { open } = useModal({
24
+ keepAlive: true,
25
+ component: defineAsyncComponent(() => import('./ModalDragResize.vue')),
26
+ })
25
27
</script>
26
28
27
29
<template>
28
- <VButton @click="show = true ">
30
+ <VButton @click="() => open() ">
29
31
Open Modal
30
32
</VButton>
31
33
32
- <ModalDragResize v-model="show" />
33
-
34
34
<ModalsContainer />
35
35
</template>
36
36
```
You can’t perform that action at this time.
0 commit comments