音量、播放模式等设置弹出式按钮在鼠标移到按钮上时将自动弹出设置内容

publish/changeLog.md

@@ -11,6 +11,7 @@
 
 - 支持wy源flac hires歌曲类型的显示
 - 快捷键调整音量时每次加减2%音量改为4%（#1220）
+- 音量、播放模式等设置弹出式按钮在鼠标移到按钮上时将自动弹出设置内容，保留点击切换显示/隐藏
 
 ### 修复
 

src/renderer/components/layout/PlayBar/PlayProgress.vue

@@ -28,9 +28,10 @@ export default {
     const dom_btn = ref<HTMLElement | null>(null)
 
     const handleShowPopup = (evt) => {
-      if (visible.value) evt.stopPropagation()
+      if (visible.value) {
-      if (visible.value) handlMsLeave()
+        evt.stopPropagation()
-      else handlMsEnter()
+        handlMsLeave()
+      } else handlMsEnter()
     }
     const {
       nowPlayTimeStr,

src/renderer/components/material/PopupBtn.vue

@@ -1,7 +1,7 @@
 <template>
-  <div ref="dom_btn" :class="$style.content" @click="handleShowPopup">
+  <div ref="dom_btn" :class="$style.content" @click="handleShowPopup" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave">
     <slot />
-    <base-popup v-model:visible="visible" :btn-el="dom_btn">
+    <base-popup v-model:visible="visible" :btn-el="dom_btn" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave">
       <slot name="content" />
     </base-popup>
   </div>
@@ -14,11 +14,37 @@ const visible = ref(false)
 const dom_btn = ref<HTMLElement | null>(null)
 
 const handleShowPopup = (evt: MouseEvent) => {
-  if (visible.value) evt.stopPropagation()
+  if (visible.value) {
-  setTimeout(() => {
+    evt.stopPropagation()
-    // if (!)
+    handlMsLeave()
-    visible.value = !visible.value
+  } else handlMsEnter()
-  }, 50)
+  // setTimeout(() => {
+  //   // if (!)
+  //   visible.value = !visible.value
+  // }, 50)
+}
+
+let timeout: number | null = null
+const handlMsEnter = () => {
+  if (timeout) {
+    clearTimeout(timeout)
+    timeout = null
+  }
+  if (visible.value) return
+  timeout = setTimeout(() => {
+    visible.value = true
+  }, 100) as unknown as number
+}
+const handlMsLeave = () => {
+  if (timeout) {
+    clearTimeout(timeout)
+    timeout = null
+  }
+  if (!visible.value) return
+  timeout = setTimeout(() => {
+    timeout = null
+    visible.value = false
+  }, 100) as unknown as number
 }
 
 defineExpose({