移动设备 不显示tooltip

src/plugins/directive/tooltip.ts

@@ -1,9 +1,9 @@
-import type { Directive, DirectiveBinding } from 'vue'
-import tippy, { type Instance, type Placement } from 'tippy.js'
+import type { Directive, DirectiveBinding } from "vue"
+import tippy, { type Instance, type Placement } from "tippy.js"
 
-import './tooltip.scss'
+import "./tooltip.scss"
 
-const TOOLTIP_INSTANCE = 'TOOLTIP_INSTANCE'
+const TOOLTIP_INSTANCE = "TOOLTIP_INSTANCE"
 
 interface CustomHTMLElement extends HTMLElement {
   [TOOLTIP_INSTANCE]?: Instance
@@ -17,46 +17,48 @@ interface BindingValue {
   delay?: Delay
 }
 
+function isTouchDevice() {
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0 || window.matchMedia("(pointer: coarse)").matches
+}
+
 const TooltipDirective: Directive = {
   mounted(el: CustomHTMLElement, binding: DirectiveBinding<BindingValue | string>) {
-    let content = ''
-    let placement: Placement = 'top'
+    let content = ""
+    let placement: Placement = "top"
     let delay: Delay = [300, 0]
 
-    if (typeof binding.value === 'string') {
+    if (typeof binding.value === "string") {
       content = binding.value
-    }
-    else {
+    } else {
       content = binding.value.content
       if (binding.value.placement !== undefined) placement = binding.value.placement
       if (binding.value.delay !== undefined) delay = binding.value.delay
     }
-
     el[TOOLTIP_INSTANCE] = tippy(el, {
+      trigger: isTouchDevice() ? "" : "mouseenter focus", // 触摸设备不需要 tooltip
       content,
-      theme: 'tooltip',
+      theme: "tooltip",
       duration: 100,
-      animation: 'scale',
+      animation: "scale",
       allowHTML: true,
       placement,
-      delay,
+      delay
     })
   },
 
   updated(el: CustomHTMLElement, binding: DirectiveBinding<BindingValue | string>) {
-    let content = ''
-    if (typeof binding.value === 'string') {
+    let content = ""
+    if (typeof binding.value === "string") {
       content = binding.value
-    }
-    else {
+    } else {
       content = binding.value.content
     }
     if (el[TOOLTIP_INSTANCE]) el[TOOLTIP_INSTANCE].setContent(content)
   },
-  
+
   unmounted(el: CustomHTMLElement) {
     if (el[TOOLTIP_INSTANCE]) el[TOOLTIP_INSTANCE].destroy()
-  },
+  }
 }
 
-export default TooltipDirective
+export default TooltipDirective

src/views/Editor/Thumbnails/index.vue

@@ -70,8 +70,8 @@
             <div class="thumbnail">
               <ThumbnailSlide :id="`thumbnailSlide_${index}`" :slide="element" :size="180" :visible="index < slidesLoadLimit" />
               <div class="tools" v-if="slideIndex === index">
-                <img src="./imgs/play.png" @click="enterScreening" alt="" />
-                <img src="./imgs/add.png" @click="createSlide" alt="" />
+                <img v-tooltip="'预览'" src="./imgs/play.png" @click="enterScreening" alt="" />
+                <img v-tooltip="'添加幻灯片'" src="./imgs/add.png" @click="createSlide" alt="" />
               </div>
             </div>