style: 添加tags弹出动画

index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <link rel="stylesheet" href="/iconfont.css" />
-    <link rel="stylesheet" href="/animate.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>后台管理系统</title>
     <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.13.0/Sortable.js"></script>

package-lock.json

@@ -11,6 +11,7 @@
         "@logicflow/core": "^0.4.6",
         "@logicflow/extension": "^0.4.6",
         "@vueuse/core": "^5.0.3",
+        "animate.css": "^4.1.1",
         "await-to-js": "^3.0.0",
         "axios": "^0.21.1",
         "cropperjs": "^1.5.11",
@@ -1402,6 +1403,11 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
@@ -6642,6 +6648,11 @@
         "uri-js": "^4.2.2"
       }
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "@logicflow/core": "^0.4.6",
     "@logicflow/extension": "^0.4.6",
     "@vueuse/core": "^5.0.3",
+    "animate.css": "^4.1.1",
     "await-to-js": "^3.0.0",
     "axios": "^0.21.1",
     "cropperjs": "^1.5.11",

src/layout/components/tag/index.vue

@@ -34,7 +34,7 @@
     <ul
       v-show="visible"
       :style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }"
-      class="contextmenu"
+      class="contextmenu animate__animated animate__flipInX"
     >
       <div
         v-for="(item, key) in tagsViews"
@@ -70,8 +70,9 @@
                 :divided="item.divided"
                 :disabled="item.disabled"
                 @click="onClickDrop(key, item)"
-                >{{ item.text }}</el-dropdown-item
               >
+                {{ item.text }}
+              </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -306,7 +307,12 @@ export default {
       onClickDrop(key, {}, currentSelect.value);
     }
 
+    function closeMenu() {
+      visible.value = false;
+    }
+
     function openMenu(tag, e) {
+      closeMenu();
       if (tag.path === "/welcome") {
         // 右键菜单为首页，只显示刷新
         Array.from([1, 2, 3]).forEach(v => {
@@ -343,11 +349,11 @@ export default {
         buttonLeft.value = left;
       }
       buttonTop.value = e.clientY;
-      visible.value = true;
-    }
-
-    function closeMenu() {
-      visible.value = false;
+      nextTick(() => {
+        setTimeout(() => {
+          visible.value = true;
+        }, 50);
+      });
     }
 
     // 鼠标移入
@@ -515,6 +521,8 @@ export default {
     font-size: 12px;
     font-weight: 400;
     color: #333;
+    outline: 0;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
     li {
       width: 100%;
       margin: 0;

src/main.ts

@@ -12,6 +12,7 @@ import "./style/index.scss";
 // 导入字体图标
 import "./assets/iconfont/iconfont.js";
 import "./assets/iconfont/iconfont.css";
+import "animate.css";
 
 import "v-contextmenu/dist/themes/default.css";