natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

wjio

This commit is contained in:
syuilo 2020-09-21 14:02:13 +09:00
parent 8762387935
commit 2839c1df0d
3 changed files with 25 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/client/components/ui/tooltip.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition name="zoom-in-top" appear> <transition name="zoom-in-top" appear @after-leave="$emit('closed')">
<div class="buebdbiu" v-if="show"> <div class="buebdbiu" v-if="showing">
<slot>{{ text }}</slot> <slot>{{ text }}</slot>
</div> </div>
</transition> </transition>
@ -12,6 +12,10 @@ import * as os from '@/os';
export default defineComponent({ export default defineComponent({
props: { props: {
showing: {
type: Boolean,
required: true,
},
source: { source: {
required: true, required: true,
}, },
@ -21,20 +25,13 @@ export default defineComponent({
} }
}, },
data() {
return {
show: false
};
},
mounted() { mounted() {
this.show = true;
this.$nextTick(() => { this.$nextTick(() => {
if (this.source == null) { if (this.source == null) {
this.destroyDom(); this.$emit('closed');
return; return;
} }
const rect = this.source.getBoundingClientRect(); const rect = this.source.getBoundingClientRect();
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
@ -43,13 +40,6 @@ export default defineComponent({
this.$el.style.top = (y + 16) + 'px'; this.$el.style.top = (y + 16) + 'px';
}); });
}, },
methods: {
close() {
this.show = false;
setTimeout(this.destroyDom, 300);
}
}
}) })
</script> </script>

4
src/client/components/url.vue
View File

@ -76,7 +76,9 @@ export default defineComponent({
source: this.$el source: this.$el
}); });
this.close = promise.cancel; this.close = () => {
promise.cancel();
};
this.checkTimer = setInterval(() => { this.checkTimer = setInterval(() => {
if (!document.body.contains(this.$el)) this.closePreview(); if (!document.body.contains(this.$el)) this.closePreview();

25
src/client/directives/tooltip.ts
View File

@ -1,6 +1,6 @@
import { Directive } from 'vue'; import { Directive } from 'vue';
import MkTooltip from '@/components/ui/tooltip.vue';
import { isDeviceTouch } from '@/scripts/is-device-touch'; import { isDeviceTouch } from '@/scripts/is-device-touch';
import { popup } from '@/os';
const start = isDeviceTouch ? 'touchstart' : 'mouseover'; const start = isDeviceTouch ? 'touchstart' : 'mouseover';
const end = isDeviceTouch ? 'touchend' : 'mouseleave'; const end = isDeviceTouch ? 'touchend' : 'mouseleave';
@ -10,32 +10,31 @@ export default {
const self = (el as any)._tooltipDirective_ = {} as any; const self = (el as any)._tooltipDirective_ = {} as any;
self.text = binding.value as string; self.text = binding.value as string;
self.tag = null; self._close = null;
self.showTimer = null; self.showTimer = null;
self.hideTimer = null; self.hideTimer = null;
self.checkTimer = null; self.checkTimer = null;
self.close = () => { self.close = () => {
if (self.tag) { if (self._close) {
clearInterval(self.checkTimer); clearInterval(self.checkTimer);
self.tag.close(); self._close();
self.tag = null; self._close = null;
} }
}; };
const show = e => { const show = async e => {
if (!document.body.contains(el)) return; if (!document.body.contains(el)) return;
if (self.tag) return; if (self._close) return;
self.tag = new MkTooltip({ const promise = popup(await import('@/components/ui/tooltip.vue'), {
parent: vn.context,
propsData: {
text: self.text, text: self.text,
source: el source: el
} });
}).$mount();
document.body.appendChild(self.tag.$el); self._close = () => {
promise.cancel();
};
}; };
el.addEventListener(start, () => { el.addEventListener(start, () => {