65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
Vue
<template>
|
|
<!-- <div :style="{ visibility: !modelValue ? 'inherit' : 'hidden' }">
|
|
<slot name="btn"/>
|
|
</div> -->
|
|
<!-- <div
|
|
:class="modelValue ? 'absolute' : ''"
|
|
:style="{ left: fabPosLeft + 'px', top: fabPosTop + 'px' }"
|
|
>
|
|
<slot name="btn"/>
|
|
</div> -->
|
|
<q-dialog v-model="modelValue" :transition-duration="0">
|
|
<div class="position-relative q-px-md">
|
|
|
|
<q-card
|
|
class="q-pa-none q-mx-md no-scroll rounded-card absolute"
|
|
:style="{ left: 0, top: fabPosTop - cardHeight - 16 + 'px' }"
|
|
align="center"
|
|
>
|
|
|
|
<q-resize-observer @resize="onCardResize"/>
|
|
<slot name="card"/>
|
|
</q-card>
|
|
<div
|
|
class="absolute bg-red"
|
|
:style="{ left: fabPosLeft + 100+ 'px', top: fabPosTop +100+ 'px', height: '100px', width: '100px' }"
|
|
id="fabDialog"
|
|
>
|
|
{{ fabPosLeft }} {{ fabPosTop }}
|
|
</div>
|
|
</div>
|
|
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const modelValue = defineModel<boolean>({
|
|
required: true
|
|
})
|
|
|
|
withDefaults(defineProps<{
|
|
fabPosLeft?: number
|
|
fabPosTop?: number
|
|
}>(),
|
|
{
|
|
fabPosLeft: 0,
|
|
fabPosTop: 0
|
|
}
|
|
)
|
|
|
|
interface sizeParams {
|
|
height: number,
|
|
width: number
|
|
}
|
|
|
|
const cardHeight = ref(0)
|
|
function onCardResize (size: sizeParams) {
|
|
cardHeight.value = size.height
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|