fix(menu): 图标旋转问题

Thysrael · Jun 8, 2023 · 531f403 · 531f403
1 parent 969a50a
commit 531f403
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 36 deletions.
diff --git a/demo/index.md b/demo/index.md
@@ -1,4 +1,4 @@
-![]()![]()![]()![]()![]()![]()![]()![]()![]()![]()![]()![]()![]()![]()![]()![]()demo 是演示 ficus 功能的事例文件夹，一共有三个子文件夹：
+demo 是演示 ficus 功能的事例文件夹，一共有三个子文件夹：
 
 `demo/2022` 文件夹记录着 2022 年的笔记，共有如下文件：
 

diff --git a/src/renderer/components/header/MenuItem.vue b/src/renderer/components/header/MenuItem.vue
@@ -1,47 +1,48 @@
 <template>
-  <li @mouseenter="hover = true"
-      @mouseout="hover = false">
+  <li>
     <div class="flex flex-wrap items-center">
-      <div style="width: 10px;padding-left: 5px">
-        {{ item.checked ? `√`: ``}}
+      <div style="width: 10px;padding-left: 10px">
+        <span v-if="item.checked"
+              class="inline-flex items-center justify-center p-1 text-xs text-gray-500 rounded overflow-x-hidden flex-none"
+              style="background-color: #42b983;"/>
       </div>
       <div
         style="width: 200px;height: 23px;"
-        class="flex content-center items-center"
-    >
-
-      <div class="ml-4"
-           style="width: 160px; font-size: 12px; user-select: none; display: flex; justify-content: space-between; ">
-        <div style="text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap" :title="item.label" >
-          {{ item.label }}
+        class="flex content-center items-center hoverParent"
+      >
+        <div class="ml-4"
+             style="width: 160px; font-size: 12px; user-select: none; display: flex; justify-content: space-between; ">
+          <div style="text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap" :title="item.label" >
+            {{ item.label }}
+          </div>
+          <div style="text-align: right">
+          {{ item.accelerator }}
+          </div>
         </div>
-        <div style="text-align: right">
-        {{ item.accelerator }}
+        <div v-if="hasChildren">
+          <svg class="hoverItem" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve" width="15px" height="15px">
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g id="SVGRepo_iconCarrier">
+              <path d="M9,18l7-6L9,6V18z" fill="#474747" fill-opacity="1"></path> <rect class="st0" width="24" height="24"></rect><rect class="st0" width="24" height="24"></rect>
+            </g>
+          </svg>
+
+          <svg class="notHoverItem" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve" width="15px" height="15px">
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g id="SVGRepo_iconCarrier">
+              <path d="M6.5,8.5l6,7l6-7H6.5z" fill="#474747" fill-opacity="1"></path> <rect class="st0" width="24" height="24"></rect> <rect class="st0" width="24" height="24"></rect>
+            </g>
+          </svg>
         </div>
       </div>
-
-        <svg v-if="hasChildren && hover" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve" width="15px" height="15px">
-          <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-            <g id="SVGRepo_iconCarrier">
-            <path d="M9,18l7-6L9,6V18z" fill="#474747" fill-opacity="1"></path> <rect class="st0" width="24" height="24"></rect><rect class="st0" width="24" height="24"></rect>
-          </g>
-        </svg>
-
-        <svg v-if="hasChildren && !hover" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve" width="15px" height="15px">
-          <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-            <g id="SVGRepo_iconCarrier">
-            <path d="M6.5,8.5l6,7l6-7H6.5z" fill="#474747" fill-opacity="1"></path> <rect class="st0" width="24" height="24"></rect> <rect class="st0" width="24" height="24"></rect>
-          </g>
-        </svg>
-    </div>
     </div>
   </li>
 </template>
 
 <script>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 export default {
   name: 'MenuItem',
@@ -52,21 +53,28 @@ export default {
     }
   },
   setup (props) {
-    const hover = ref(false)
-
     // 创建一个计算属性，用于判断当前项是否有子节点
     const hasChildren = computed(() => {
       return props.item.submenu && props.item.submenu.length
     })
 
     return {
-      hasChildren,
-      hover
+      hasChildren
     }
   }
 }
 </script>
 
 <style scoped>
+.hoverItem, .notHoverItem {
+  display: none;
+}
 
+.hoverParent:hover .hoverItem {
+  display: block;
+}
+
+.hoverParent:not(:hover) .notHoverItem {
+  display: block;
+}
 </style>