wjio

src/client/components/ui/tooltip.vue

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

src/client/components/url.vue

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

src/client/directives/tooltip.ts

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