fix(client): 一部のコンポーネントが裏に隠れるのを修正

This commit is contained in:
syuilo 2021-12-15 21:44:41 +09:00
parent cf5fe2d107
commit fa8eb43eaf
3 changed files with 13 additions and 5 deletions

View File

@ -7,6 +7,13 @@
--> -->
## 12.x.x (unreleased)
### Improvements
### Bugfixes
- クライアント: 一部のコンポーネントが裏に隠れるのを修正
## 12.99.3 (2021/12/14) ## 12.99.3 (2021/12/14)
### Bugfixes ### Bugfixes
- クライアント: オートコンプリートがダイアログの裏に隠れる問題を修正 - クライアント: オートコンプリートがダイアログの裏に隠れる問題を修正

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-toast"> <div class="mk-toast" style="{ zIndex }">
<transition name="notification-slide" appear @after-leave="$emit('closed')"> <transition name="notification-slide" appear @after-leave="$emit('closed')">
<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/> <XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
</transition> </transition>
@ -9,6 +9,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import XNotification from './notification.vue'; import XNotification from './notification.vue';
import * as os from '@/os';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -23,7 +24,8 @@ export default defineComponent({
emits: ['closed'], emits: ['closed'],
data() { data() {
return { return {
showing: true showing: true,
zIndex: os.claimZIndex(true),
}; };
}, },
mounted() { mounted() {
@ -45,7 +47,6 @@ export default defineComponent({
.mk-toast { .mk-toast {
position: fixed; position: fixed;
z-index: 10000;
left: 0; left: 0;
width: 250px; width: 250px;
top: 32px; top: 32px;

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-uploader _acrylic"> <div class="mk-uploader _acrylic" :style="{ zIndex }">
<ol v-if="uploads.length > 0"> <ol v-if="uploads.length > 0">
<li v-for="ctx in uploads" :key="ctx.id"> <li v-for="ctx in uploads" :key="ctx.id">
<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div> <div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
@ -25,6 +25,7 @@ export default defineComponent({
data() { data() {
return { return {
uploads: os.uploads, uploads: os.uploads,
zIndex: os.claimZIndex(true),
}; };
}, },
}); });
@ -33,7 +34,6 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.mk-uploader { .mk-uploader {
position: fixed; position: fixed;
z-index: 10000;
right: 16px; right: 16px;
width: 260px; width: 260px;
top: 32px; top: 32px;