| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <script lang="ts" setup> |
| H | 2 | import { propTypes } from '@/utils/propTypes' |
| 3 | import { isNumber } from '@/utils/is' | |
| 4 | defineOptions({ name: 'Dialog' }) | |
| 5 | ||
| 6 | const slots = useSlots() | |
| 7 | ||
| 8 | const props = defineProps({ | |
| 9 | modelValue: propTypes.bool.def(false), | |
| 10 | title: propTypes.string.def('Dialog'), | |
| 11 | fullscreen: propTypes.bool.def(true), | |
| 12 | width: propTypes.oneOfType([String, Number]).def('40%'), | |
| 13 | scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度 | |
| 14 | maxHeight: propTypes.oneOfType([String, Number]).def('400px') | |
| 15 | }) | |
| 16 | ||
| 17 | const getBindValue = computed(() => { | |
| 18 | const delArr: string[] = ['fullscreen', 'title', 'maxHeight', 'appendToBody'] | |
| 19 | const attrs = useAttrs() | |
| 20 | const obj = { ...attrs, ...props } | |
| 21 | for (const key in obj) { | |
| 22 | if (delArr.indexOf(key) !== -1) { | |
| 23 | delete obj[key] | |
| 24 | } | |
| 25 | } | |
| 26 | return obj | |
| 27 | }) | |
| 28 | ||
| 29 | const isFullscreen = ref(false) | |
| 30 | ||
| 31 | const toggleFull = () => { | |
| 32 | isFullscreen.value = !unref(isFullscreen) | |
| 33 | } | |
| 34 | ||
| 35 | const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight) | |
| 36 | ||
| 37 | watch( | |
| 38 | () => isFullscreen.value, | |
| 39 | async (val: boolean) => { | |
| 40 | await nextTick() | |
| 41 | if (val) { | |
| 42 | const windowHeight = document.documentElement.offsetHeight | |
| 43 | dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px` | |
| 44 | } else { | |
| 45 | dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight | |
| 46 | } | |
| 47 | }, | |
| 48 | { | |
| 49 | immediate: true | |
| 50 | } | |
| 51 | ) | |
| 52 | ||
| 53 | const dialogStyle = computed(() => { | |
| 54 | return { | |
| 55 | height: unref(dialogHeight) | |
| 56 | } | |
| 57 | }) | |
| 58 | </script> | |
| 59 | ||
| 60 | <template> | |
| 61 | <ElDialog | |
| 62 | v-bind="getBindValue" | |
| 63 | :close-on-click-modal="true" | |
| 64 | :fullscreen="isFullscreen" | |
| 65 | :width="width" | |
| 66 | destroy-on-close | |
| 67 | lock-scroll | |
| 68 | draggable | |
| 69 | class="com-dialog" | |
| 70 | :show-close="false" | |
| 71 | > | |
| 72 | <template #header="{ close }"> | |
| 73 | <div class="relative h-54px flex items-center justify-between pl-15px pr-15px"> | |
| 74 | <slot name="title"> | |
| 75 | {{ title }} | |
| 76 | </slot> | |
| 77 | <div | |
| 78 | class="absolute right-15px top-[50%] h-54px flex translate-y-[-50%] items-center justify-between" | |
| 79 | > | |
| 80 | <Icon | |
| 81 | v-if="fullscreen" | |
| 82 | class="is-hover mr-10px cursor-pointer" | |
| 83 | :icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'" | |
| 84 | color="var(--el-color-info)" | |
| 85 | hover-color="var(--el-color-primary)" | |
| 86 | @click="toggleFull" | |
| 87 | /> | |
| 88 | <Icon | |
| 89 | class="is-hover cursor-pointer" | |
| 90 | icon="ep:close" | |
| 91 | hover-color="var(--el-color-primary)" | |
| 92 | color="var(--el-color-info)" | |
| 93 | @click="close" | |
| 94 | /> | |
| 95 | </div> | |
| 96 | </div> | |
| 97 | </template> | |
| 98 | ||
| 99 | <ElScrollbar v-if="scroll" :style="dialogStyle"> | |
| 100 | <slot></slot> | |
| 101 | </ElScrollbar> | |
| 102 | <slot v-else></slot> | |
| 103 | <template v-if="slots.footer" #footer> | |
| 104 | <slot name="footer"></slot> | |
| 105 | </template> | |
| 106 | </ElDialog> | |
| 107 | </template> | |
| 108 | ||
| 109 | <style lang="scss"> | |
| 110 | .com-dialog { | |
| 111 | .#{$elNamespace}-overlay-dialog { | |
| 112 | display: flex; | |
| 113 | justify-content: center; | |
| 114 | align-items: center; | |
| 115 | } | |
| 116 | ||
| 117 | .#{$elNamespace}-dialog { | |
| 118 | margin: 0 !important; | |
| 119 | ||
| 120 | &__header { | |
| 121 | height: 54px; | |
| 122 | padding: 0; | |
| 123 | margin-right: 0 !important; | |
| 124 | border-bottom: 1px solid var(--el-border-color); | |
| 125 | } | |
| 126 | ||
| 127 | &__body { | |
| 128 | padding: 15px !important; | |
| 129 | } | |
| 130 | ||
| 131 | &__footer { | |
| 132 | border-top: 1px solid var(--el-border-color); | |
| 133 | } | |
| 134 | ||
| 135 | &__headerbtn { | |
| 136 | top: 0; | |
| 137 | } | |
| 138 | } | |
| 139 | } | |
| 140 | </style> | |
