Browse Source

修复弹框z轴位置错乱问题

master
许孟阳 2 weeks ago
parent
commit
bd3f2bc5ad
  1. 8
      src/components/dialog.vue
  2. 2
      src/components/popover-menu.vue
  3. 4
      src/views/backpack/equip-menu.vue
  4. 2
      src/views/shop/shop.vue

8
src/components/dialog.vue

@ -5,7 +5,7 @@
<span>{{ title }}</span> <span>{{ title }}</span>
</div> </div>
<slot /> <slot />
<img :src="lock_close" class="close" @click="show = false; emit('close')"></img> <img v-if="showHeader" :src="lock_close" class="close" @click="show = false; emit('close')"></img>
</div> </div>
</teleport> </teleport>
</template> </template>
@ -54,6 +54,10 @@ const prop = defineProps({
type: String, type: String,
default: '0' default: '0'
}, },
z: {
type: Number,
default: 9
}
}) })
watch(show, (n, o) => { watch(show, (n, o) => {
emit('update:modelValue', n); emit('update:modelValue', n);
@ -78,7 +82,7 @@ onMounted(() => {
bottom: v-bind('prop.bottom'); bottom: v-bind('prop.bottom');
padding: v-bind('prop.padding'); padding: v-bind('prop.padding');
position: absolute; position: absolute;
z-index: 9; z-index: v-bind('z');
border: 2px solid #fff; border: 2px solid #fff;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.7); box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.7);

2
src/components/popover-menu.vue

@ -22,7 +22,7 @@ const { state, commit, dispatch } = useStore();
const prop = defineProps({ const prop = defineProps({
items: { items: {
type: Array<PopoverMenuItem>(), type: Array as () => PopoverMenuItem[],
default: [] default: []
} }
}) })

4
src/views/backpack/equip-menu.vue

@ -1,5 +1,5 @@
<template> <template>
<Dialog :show-header="false" v-model="show" :left="left" :top="top" padding="0"> <Dialog :show-header="false" v-model="show" :left="left" :top="top" padding="0" :z="10">
<PopoverMenu :items="[ <PopoverMenu :items="[
{ label: t('use'), onClick: useEquip }, { label: t('use'), onClick: useEquip },
{ label: t('strengthen'), onClick: strengthenEquip }, { label: t('strengthen'), onClick: strengthenEquip },
@ -9,7 +9,7 @@
]" /> ]" />
</Dialog> </Dialog>
<Dialog :title="t('strengthen') + t('equip')" v-model="showStrengthen" top="10rem" left="2rem" padding="0"> <Dialog :title="t('strengthen') + t('equip')" v-model="showStrengthen" top="10rem" left="2rem" padding="0" :z="11">
<Strengthen :equip="state.grid[index]" /> <Strengthen :equip="state.grid[index]" />
</Dialog> </Dialog>

2
src/views/shop/shop.vue

@ -30,7 +30,7 @@
</div> </div>
</Dialog> </Dialog>
<Dialog :show-header="false" v-model="show" :left="left" :top="top" padding="0"> <Dialog :show-header="false" v-model="show" :left="left" :top="top" padding="0" :z="10">
<PopoverMenu :items="[ <PopoverMenu :items="[
{ label: t('buy'), onClick: () => buyEquip(index) }, { label: t('buy'), onClick: () => buyEquip(index) },
]" /> ]" />

Loading…
Cancel
Save