mirror of https://gitee.com/xiaonuobase/snowy
94 lines
2.0 KiB
Vue
94 lines
2.0 KiB
Vue
<template>
|
|
<a-modal
|
|
v-if="isModal"
|
|
:open="visible"
|
|
@cancel="cancel"
|
|
v-bind="$attrs"
|
|
:footer="slotKeys.includes('footer') ? undefined : null"
|
|
>
|
|
<template v-for="slotKey in slotKeys" #[slotKey]>
|
|
<slot :name="slotKey" />
|
|
</template>
|
|
</a-modal>
|
|
<a-drawer
|
|
v-else
|
|
:open="visible"
|
|
v-bind="$attrs"
|
|
@close="cancel"
|
|
:footer-style="{ textAlign: 'right' }"
|
|
:width="drawerWidth"
|
|
>
|
|
<template v-for="slotKey in slotKeys" #[slotKey]>
|
|
<slot :name="slotKey" />
|
|
</template>
|
|
</a-drawer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useSlots, computed, useAttrs, onMounted, onUnmounted } from 'vue'
|
|
import { globalStore } from '@/store'
|
|
const slots = useSlots()
|
|
const attrs = useAttrs()
|
|
const store = globalStore()
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false
|
|
}
|
|
})
|
|
const FormContainerTypeEnum = {
|
|
DRAWER: 'drawer',
|
|
MODAL: 'modal'
|
|
}
|
|
const formStyle = computed(() => {
|
|
return store.formStyle
|
|
})
|
|
const slotKeys = computed(() => {
|
|
return Object.keys(slots)
|
|
})
|
|
const isModal = computed(() => {
|
|
return FormContainerTypeEnum.MODAL === formStyle.value
|
|
})
|
|
|
|
// 响应式抽屉宽度
|
|
const isSmallScreen = ref(window.innerWidth <= 576)
|
|
const drawerWidth = computed(() => {
|
|
return isSmallScreen.value ? '100%' : attrs.width // 小屏幕100%宽度，其他情况使用默认值
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
const cancel = () => {
|
|
emit('close')
|
|
}
|
|
|
|
// 监听窗口大小变化
|
|
const handleResize = () => {
|
|
isSmallScreen.value = window.innerWidth <= 576
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('resize', handleResize)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', handleResize)
|
|
})
|
|
</script>
|
|
<script>
|
|
// 声明额外的选项
|
|
export default {
|
|
inheritAttrs: false
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 确保小屏幕下抽屉不会有额外的边距或滚动条 */
|
|
@media (max-width: 576px) {
|
|
:deep(.ant-drawer-content-wrapper) {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
</style>
|