heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

fix(client): fix z-index bug

Browse source
This commit is contained in:
syuilo 2021-12-11 23:01:05 +09:00
parent 48212e7a44
commit 31a3748a18
2 changed files with 5 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/src/components/dialog.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')"> <MkModal ref="modal" :front="true" @click="done(true)" @closed="$emit('closed')">
<div class="mk-dialog"> <div class="mk-dialog">
<div v-if="icon" class="icon"> <div v-if="icon" class="icon">
<i :class="icon"></i> <i :class="icon"></i>

26
packages/client/src/components/ui/modal.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<transition :name="$store.state.animation ? popup ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? popup ? 500 : 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered"> <transition :name="$store.state.animation ? popup ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? popup ? 500 : 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ front }" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> <div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ front }" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<div class="bg _modalBg" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div> <div class="bg _modalBg" :style="{ zIndex }" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
<div ref="content" class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick"> <div ref="content" class="content" :class="{ popup, fixed, top: position === 'top' }" :style="{ zIndex }" @click.self="onBgClick">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
@ -11,6 +11,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import * as os from '@/os';
function getFixedContainer(el: Element | null): Element | null { function getFixedContainer(el: Element | null): Element | null {
if (el == null || el.tagName === 'BODY') return null; if (el == null || el.tagName === 'BODY') return null;
@ -51,6 +52,7 @@ export default defineComponent({
emits: ['opening', 'click', 'esc', 'close', 'closed'], emits: ['opening', 'click', 'esc', 'close', 'closed'],
data() { data() {
return { return {
zIndex: os.claimZIndex(this.front),
showing: true, showing: true,
fixed: false, fixed: false,
transformOrigin: 'center', transformOrigin: 'center',
@ -230,13 +232,8 @@ export default defineComponent({
} }
.qzhlnise { .qzhlnise {
> .bg {
z-index: 10000;
}
> .content:not(.popup) { > .content:not(.popup) {
position: fixed; position: fixed;
z-index: 10000;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -268,25 +265,10 @@ export default defineComponent({
> .content.popup { > .content.popup {
position: absolute; position: absolute;
z-index: 10000;
&.fixed { &.fixed {
position: fixed; position: fixed;
} }
} }
&.front {
> .bg {
z-index: 20000;
}
> .content:not(.popup) {
z-index: 20000;
}
> .content.popup {
z-index: 20000;
}
}
} }
</style> </style>