From b55f5c3d6a923459bea5b9a6aaf35c89a057823f Mon Sep 17 00:00:00 2001
From: Frost-ZX <30585462+Frost-ZX@users.noreply.github.com>
Date: Tue, 15 Jun 2021 00:46:37 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=82=AC=E6=B5=AE=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E4=BA=A4=E4=BA=92=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FloatingBtn.vue | 38 ++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/FloatingBtn.vue b/src/components/FloatingBtn.vue
index 75de380..635607e 100644
--- a/src/components/FloatingBtn.vue
+++ b/src/components/FloatingBtn.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="floating-btn">
-        <div class="btns-inner">
+    <div ref="floatingBtn" class="floating-btn">
+        <div :class="['btns-inner', { show: showInner }]">
             <button class="btn" type="button" title="折叠侧边菜单" @click="toggleSideCollapse()">
                 <i class="el-icon-menu" aria-hidden="true"></i>
             </button>
@@ -24,7 +24,8 @@ export default {
     name: 'FloatingBtn',
     data() {
         return {
-            config: this.$root.config.storage
+            config: this.$root.config.storage,
+            showInner: false
         }
     },
     mounted () {
@@ -36,19 +37,29 @@ export default {
          * 设置动画
          */
         initAnimation() {
-            var btns = document.querySelectorAll('.floating-btn .btn');
+            var vm = this;
+            var el = vm.$refs['floatingBtn'];
+            var btns = el.querySelectorAll('.btn');
             var className = 'animate';
 
             btns.forEach((elem) => {
-                elem.onclick = function () {
+                elem.addEventListener('click', function () {
                     this.classList.remove(className);
                     setTimeout(() => {
                         this.classList.add(className);
+                        vm.toggleInnerBtns();
                     }, 20);
-                };
+                });
             });
         },
 
+        /**
+         * 切换按钮显示
+         */
+        toggleInnerBtns() {
+            this.showInner = !this.showInner;
+        },
+
         /**
          * 返回主页
          */
@@ -82,7 +93,6 @@ export default {
          */
         toggleSideCollapse() {
             var cfg = this.config;
-
             cfg.sideMenuCollapse = !cfg.sideMenuCollapse;
         },
 
@@ -98,13 +108,11 @@ export default {
     bottom: 2rem;
     text-align: center;
 
-    &:hover {
-        .btns-inner .btn {
-            width: 2.6rem;
-            height: 2.6rem;
-            font-size: 1rem;
-            color: #FFF;
-        }
+    .btns-inner.show .btn {
+        width: 2.6rem;
+        height: 2.6rem;
+        font-size: 1rem;
+        color: #FFF;
     }
 }
 
@@ -117,7 +125,7 @@ export default {
         background-color: @colorSecondary;
         font-size: 0;
         color: transparent;
-        transition: all calc(@transitionTime * 1.6);
+        transition: all @transitionTime;
 
         &:not(:first-child) {
             margin-top: 0.75rem;