Use Cases
Modal Drag Resize
A drag and resize modal example.
A modal you can drag and resize, built with vue3-drag-resize.
The modal is created with keepAlive: true, so it stays mounted after it closes and opens again with the size and position it had. See Modal Keep Alive.
Preview
Preview.vue
<script setup lang="ts">
import { defineAsyncComponent, onBeforeUnmount } from 'vue'
import { useModal } from 'vue-final-modal'
const { open, destroy } = useModal({
keepAlive: true,
component: defineAsyncComponent(() => import('./ModalDragResize.vue')),
})
onBeforeUnmount(() => destroy())
</script>
<template>
<VButton @click="() => open()">
Open Modal
</VButton>
</template>
<ModalDragResize> component
<script setup lang="ts">
import { useId } from 'vue'
import VueDragResize from 'vue3-drag-resize'
import { VueFinalModal } from 'vue-final-modal'
const titleId = useId()
const width = ref(0)
const height = ref(0)
const top = ref(0)
const left = ref(0)
function dragResize(newRect: { width: number, height: number, top: number, left: number }) {
width.value = newRect.width
height.value = newRect.height
top.value = newRect.top
left.value = newRect.left
}
</script>
<template>
<VueFinalModal
v-slot="{ close }"
background="interactive"
content-transition="vfm-fade"
:hide-overlay="true"
:aria-labelledby="titleId"
>
<!-- <ClientOnly> is only needed with Nuxt -->
<ClientOnly>
<VueDragResize
:is-active="true"
:w="200"
:h="200"
class="bg-primary-100 dark:bg-gray-800"
@resizing="dragResize"
@dragging="dragResize"
>
<h3 :id="titleId">
Hello World!
</h3>
<p>{{ top }} × {{ left }}</p>
<p>{{ width }} × {{ height }}</p>
<button type="button" class="absolute top-0 right-0 mt-2 mr-2 px-2 border rounded-md" aria-label="Close" @mousedown.stop @touchstart.stop @click="close()">
×
</button>
</VueDragResize>
</ClientOnly>
</VueFinalModal>
</template>