Improve usability

This commit is contained in:
syuilo 2021-08-08 12:45:44 +09:00
parent c64b19669c
commit 07391fbfec

View File

@ -7,7 +7,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, PropType } from 'vue';
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;
@ -31,6 +31,7 @@ export default defineComponent({
required: false required: false
}, },
src: { src: {
type: Object as PropType<HTMLElement>,
required: false, required: false,
}, },
position: { position: {
@ -56,6 +57,9 @@ export default defineComponent({
mounted() { mounted() {
this.$watch('src', () => { this.$watch('src', () => {
if (this.src) {
this.src.style.pointerEvents = 'none';
}
this.fixed = getFixedContainer(this.src) != null; this.fixed = getFixedContainer(this.src) != null;
this.$nextTick(() => { this.$nextTick(() => {
this.align(); this.align();
@ -69,7 +73,7 @@ export default defineComponent({
}).observe(popover); }).observe(popover);
}); });
document.addEventListener('mousedown', this.onDocumentClick); document.addEventListener('mousedown', this.onDocumentClick, { passive: true });
}, },
beforeUnmount() { beforeUnmount() {
@ -155,6 +159,7 @@ export default defineComponent({
}, },
close() { close() {
if (this.src) this.src.style.pointerEvents = 'auto';
this.showing = false; this.showing = false;
this.$emit('close'); this.$emit('close');
}, },