feat: support custom z-index

vbenjs · Dec 15, 2024 · 4e31cd8 · 4e31cd8
1 parent 6a46a24
commit 4e31cd8
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
 import type { AuthenticationProps } from './types';
 
-import { watch } from 'vue';
+import { computed, watch } from 'vue';
 
 import { useVbenModal } from '@vben-core/popup-ui';
 import { Slot, VbenAvatar } from '@vben-core/shadcn-ui';
 
 interface Props extends AuthenticationProps {
   avatar?: string;
+  zIndex?: number;
 }
 
 defineOptions({
   name: 'LoginExpiredModal',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   avatar: '',
+  zIndex: 0,
 });
 
 const open = defineModel<boolean>('open');
@@ -29,10 +31,14 @@ watch(
   },
 );
 
+const getZIndex = computed(() => {
+  return props.zIndex || calcZIndex();
+});
+
 /**
  * 获取最大的zIndex值
  */
-function getMaxZIndex() {
+function calcZIndex() {
   let maxZ = 0;
   const elements = document.querySelectorAll('*');
   [...elements].forEach((element) => {
@@ -55,7 +61,7 @@ function getMaxZIndex() {
       :footer="false"
       :fullscreen-button="false"
       :header="false"
-      :z-index="getMaxZIndex()"
+      :z-index="getZIndex"
       class="border-none px-10 py-6 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset]"
     >
       <VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />