From 64ead3b7144b775dc90f7464afca87bec4813cd2 Mon Sep 17 00:00:00 2001
From: YangQi <2419731931@qq.com>
Date: Tue, 26 Jul 2022 19:11:16 +0800
Subject: [PATCH] perf: more appropriate HTML structure (#159)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整 HTML，使结构更贴合标签语义
- 移除部分不会生效的 CSS
---
 .../CodemirrorEditor/rightClickMenu.vue       | 54 +++++++------------
 1 file changed, 18 insertions(+), 36 deletions(-)

diff --git a/src/components/CodemirrorEditor/rightClickMenu.vue b/src/components/CodemirrorEditor/rightClickMenu.vue
index 7ef4b67..a7abf2c 100644
--- a/src/components/CodemirrorEditor/rightClickMenu.vue
+++ b/src/components/CodemirrorEditor/rightClickMenu.vue
@@ -1,21 +1,21 @@
 <template>
-  <ul
-    v-show="value"
+  <div
     id="menu"
     class="menu"
+    v-show="value"
     :style="`left: ${left}px;top: ${top}px;`"
   >
-    <div class="menu__group" v-for="(menuItem, index) in menu" :key="index">
+    <ul class="menu__group" v-for="(menuItem, index) in menu" :key="index">
       <li
-        v-for="item of menuItem"
-        :key="item.key"
         class="menu_item"
-        @mousedown="onMouseDown(item.key)"
+        v-for="{ key, text } of menuItem"
+        :key="key"
+        @mousedown="onMouseDown(key)"
       >
-        <span>{{ item.text }}</span>
+        {{ text }}
       </li>
-    </div>
-  </ul>
+    </ul>
+  </div>
 </template>
 
 <script>
@@ -94,54 +94,36 @@ export default {
 }
 
 .menu_item {
+  list-style: none;
+  box-sizing: border-box;
+  padding: 4px 0 4px 24px;
   margin-top: 10px;
   min-width: 200px;
   font-size: 12px;
   line-height: 20px;
   color: #333333;
   cursor: pointer;
+
   &:first-of-type {
     margin-top: 0;
   }
+
   &:hover {
     background: #f0f0f0;
   }
-  span,
-  .btn-upload {
-    display: inline-block;
-    padding: 4px 0;
-    padding-left: 24px;
-    width: 100%;
-  }
-  .btn-upload {
-    margin: 0;
-    border: none;
-    outline: none;
-    background: transparent;
-  }
-  .btn-upload:hover {
-    background: #aaaaaa;
-  }
+
   ::v-deep .el-upload {
     width: 100%;
   }
 }
 
 .menu__group {
-  padding-top: 6px;
-  padding-bottom: 6px;
+  margin: 0;
+  padding: 6px 0;
   border-bottom: 1px solid #eeeeee;
+
   &:last-of-type {
     border-bottom: none;
   }
 }
-
-li:hover {
-  background-color: #1790ff;
-}
-
-li {
-  font-size: 15px;
-  list-style: none;
-}
 </style>