pref: optimize dialog property (#158)
This commit is contained in:
@@ -1,16 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<ResponseDialog
|
<ResponseDialog
|
||||||
v-for="(item, index) in stack"
|
v-for="(item, index) in stack"
|
||||||
v-model:visible="item.visible"
|
|
||||||
:key="item.key"
|
:key="item.key"
|
||||||
:keep-alive="item.keepAlive"
|
v-model:visible="item.visible"
|
||||||
:default-size="item.defaultSize"
|
v-bind="omitProps(item)"
|
||||||
:default-mobile-size="item.defaultMobileSize"
|
|
||||||
:resize-allow="item.resizeAllow"
|
|
||||||
:min-width="item.minWidth"
|
|
||||||
:max-width="item.maxWidth"
|
|
||||||
:min-height="item.minHeight"
|
|
||||||
:max-height="item.maxHeight"
|
|
||||||
:auto-z-index="false"
|
:auto-z-index="false"
|
||||||
:pt:mask:style="{ zIndex: baseZIndex + index + 1 }"
|
:pt:mask:style="{ zIndex: baseZIndex + index + 1 }"
|
||||||
:pt:root:onMousedown="() => rise(item)"
|
:pt:root:onMousedown="() => rise(item)"
|
||||||
@@ -42,7 +35,8 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import ResponseDialog from 'components/ResponseDialog.vue'
|
import ResponseDialog from 'components/ResponseDialog.vue'
|
||||||
import { useDialog } from 'hooks/dialog'
|
import { type DialogItem, useDialog } from 'hooks/dialog'
|
||||||
|
import { omit } from 'lodash'
|
||||||
import Button from 'primevue/button'
|
import Button from 'primevue/button'
|
||||||
import { usePrimeVue } from 'primevue/config'
|
import { usePrimeVue } from 'primevue/config'
|
||||||
import Dialog from 'primevue/dialog'
|
import Dialog from 'primevue/dialog'
|
||||||
@@ -55,4 +49,15 @@ const { config } = usePrimeVue()
|
|||||||
const baseZIndex = computed(() => {
|
const baseZIndex = computed(() => {
|
||||||
return config.zIndex?.modal ?? 1100
|
return config.zIndex?.modal ?? 1100
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const omitProps = (item: DialogItem) => {
|
||||||
|
return omit(item, [
|
||||||
|
'key',
|
||||||
|
'visible',
|
||||||
|
'title',
|
||||||
|
'headerButtons',
|
||||||
|
'content',
|
||||||
|
'contentProps',
|
||||||
|
])
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
ref="dialogRef"
|
ref="dialogRef"
|
||||||
:visible="true"
|
:visible="true"
|
||||||
@update:visible="updateVisible"
|
@update:visible="updateVisible"
|
||||||
|
:modal="modal"
|
||||||
:close-on-escape="false"
|
:close-on-escape="false"
|
||||||
:maximizable="!isMobile"
|
:maximizable="!isMobile"
|
||||||
maximizeIcon="pi pi-arrow-up-right-and-arrow-down-left-from-center"
|
maximizeIcon="pi pi-arrow-up-right-and-arrow-down-left-from-center"
|
||||||
@@ -91,6 +92,7 @@ interface Props {
|
|||||||
minHeight?: number
|
minHeight?: number
|
||||||
maxHeight?: number
|
maxHeight?: number
|
||||||
zIndex?: number
|
zIndex?: number
|
||||||
|
modal?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ interface HeaderButton {
|
|||||||
command: () => void
|
command: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
interface DialogItem {
|
export interface DialogItem {
|
||||||
key: string
|
key: string
|
||||||
title: string
|
title: string
|
||||||
content: Component
|
content: Component
|
||||||
@@ -22,6 +22,7 @@ interface DialogItem {
|
|||||||
maxWidth?: number
|
maxWidth?: number
|
||||||
minHeight?: number
|
minHeight?: number
|
||||||
maxHeight?: number
|
maxHeight?: number
|
||||||
|
modal?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useDialog = defineStore('dialog', () => {
|
export const useDialog = defineStore('dialog', () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user