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

Improve modal performance

This commit is contained in:
syuilo 2021-03-05 16:21:16 +09:00
parent eb745d2aa0
commit b3088facf4
1 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/client/components/ui/modal.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> <div class="mk-modal" v-hotkey.global="keymap" :style="{ display, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<transition :name="$store.state.animation ? 'modal-bg' : ''" appear> <transition :name="$store.state.animation ? 'modal-bg' : ''" appear>
<div class="bg _modalBg" v-if="manualShowing != null ? manualShowing : showing" @click="onBgClick"></div> <div class="bg _modalBg" v-if="manualShowing != null ? manualShowing : showing" @click="onBgClick"></div>
</transition> </transition>
<div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content"> <div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content">
<transition :name="$store.state.animation ? popup ? 'modal-popup-content' : 'modal-content' : ''" appear @after-leave="$emit('closed')" @enter="$emit('opening')" @after-enter="childRendered"> <transition :name="$store.state.animation ? popup ? 'modal-popup-content' : 'modal-content' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
<slot v-if="manualShowing != null ? true : showing" v-bind:showing="manualShowing"></slot> <slot v-if="manualShowing != null ? true : showing" v-bind:showing="manualShowing"></slot>
</transition> </transition>
</div> </div>
@ -52,6 +52,7 @@ export default defineComponent({
fixed: false, fixed: false,
transformOrigin: 'center', transformOrigin: 'center',
contentClicking: false, contentClicking: false,
display: this.manualShowing == null ? 'block' : 'none',
}; };
}, },
computed: { computed: {
@ -64,6 +65,15 @@ export default defineComponent({
return this.src != null; return this.src != null;
} }
}, },
watch: {
manualShowing: {
handler(v) {
console.log(v);
if (v) this.display = 'block';
},
immediate: true
}
},
mounted() { mounted() {
this.$watch('src', () => { this.$watch('src', () => {
this.fixed = getFixedContainer(this.src) != null; this.fixed = getFixedContainer(this.src) != null;
@ -163,6 +173,11 @@ export default defineComponent({
onBgClick() { onBgClick() {
if (this.contentClicking) return; if (this.contentClicking) return;
this.$emit('click'); this.$emit('click');
},
onClosed() {
this.$emit('closed');
this.display = 'none';
} }
} }
}); });