|
|
@@ -1,9 +1,11 @@
|
|
|
<script lang="ts" setup>
|
|
|
import { propTypes } from '@/utils/propTypes'
|
|
|
import { isNumber } from '@/utils/is'
|
|
|
+
|
|
|
defineOptions({ name: 'Dialog' })
|
|
|
|
|
|
const slots = useSlots()
|
|
|
+const emits = defineEmits(['update:modelValue'])
|
|
|
|
|
|
const props = defineProps({
|
|
|
modelValue: propTypes.bool.def(false),
|
|
|
@@ -57,6 +59,15 @@ const dialogStyle = computed(() => {
|
|
|
})
|
|
|
|
|
|
const closing = ref(false)
|
|
|
+
|
|
|
+function closeHandler() {
|
|
|
+ emits('update:modelValue', false)
|
|
|
+ closing.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function closedHandler() {
|
|
|
+ closing.value = false
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -70,8 +81,8 @@ const closing = ref(false)
|
|
|
draggable
|
|
|
class="com-dialog"
|
|
|
:show-close="false"
|
|
|
- @close="closing=true"
|
|
|
- @closed="closing=false"
|
|
|
+ @close="closeHandler"
|
|
|
+ @closed="closedHandler"
|
|
|
>
|
|
|
<template #header="{ close }">
|
|
|
<div class="relative h-54px flex items-center justify-between pl-15px pr-15px">
|
|
|
@@ -105,7 +116,7 @@ const closing = ref(false)
|
|
|
</ElScrollbar>
|
|
|
<slot v-else></slot>
|
|
|
<template v-if="slots.footer" #footer>
|
|
|
- <div :style="{'pointer-events': closing ? 'none' : 'auto'}">
|
|
|
+ <div :style="{ 'pointer-events': closing ? 'none' : 'auto' }">
|
|
|
<slot name="footer"></slot>
|
|
|
</div>
|
|
|
</template>
|