elk/components/modal/ModalDrawer.vue
2022-11-24 19:48:35 +08:00

67 lines
1.4 KiB
Vue

<script setup lang='ts'>
const {
direction = 'bottom',
} = defineProps<{
direction?: string
}>()
const { modelValue } = defineModel<{
modelValue: boolean
}>()
const positionClass = computed(() => {
switch (direction) {
case 'bottom':
return 'bottom-0 left-0 right-0 border-t'
case 'top':
return 'top-0 left-0 right-0 border-b'
case 'left':
return 'bottom-0 left-0 top-0 border-r'
case 'right':
return 'bottom-0 top-0 right-0 border-l'
default:
return ''
}
})
const transform = computed(() => {
switch (direction) {
case 'bottom':
return 'translateY(100%)'
case 'top':
return 'translateY(-100%)'
case 'left':
return 'translateX(-100%)'
case 'right':
return 'translateX(100%)'
default:
return ''
}
})
let init = $ref(modelValue)
watchOnce(modelValue, () => {
init = true
})
</script>
<template>
<div
fixed top-0 bottom-0 left-0 right-0 z-40
:class="modelValue ? '' : 'pointer-events-none'"
>
<div
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
:class="modelValue ? 'opacity-85' : 'opacity-0'"
@click="modelValue = false"
/>
<div
bg-base border border-base absolute transition-all duration-200 ease-out
:class="positionClass"
:style="modelValue ? {} : { transform }"
>
<slot v-if="init" />
</div>
</div>
</template>