vue cli3 改造完成

src/components/RightPanel/index.vue

@@ -2,10 +2,6 @@
   <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
     <div class="rightPanel-background" />
     <div class="rightPanel">
-      <div v-if="settingBtn" :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
-        <i :class="show?'el-icon-close':'el-icon-setting'" />
-      </div>
-      <div v-else :style="{'top':buttonTop+'px'}" @click="show=!show"/>
       <div class="rightPanel-items">
         <slot />
       </div>
@@ -31,24 +27,17 @@ export default {
   computed: {
     show: {
       get() {
-        return this.$store.state.settings.showRightPanel
+        return this.$store.state.settings.showSettings
       },
       set(val) {
-        this.$store.dispatch('changeSetting', {
-          key: 'showRightPanel',
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'showSettings',
           value: val
         })
       }
     },
-    theme: {
-      get() {
-        return this.$store.state.settings.theme
-      }
-    },
-    settingBtn: {
-      get() {
-        return this.$store.state.settings.settingBtn
-      }
+    theme() {
+      return this.$store.state.settings.theme
     }
   },
   watch: {
@@ -65,6 +54,7 @@ export default {
   },
   mounted() {
     this.insertToBody()
+    this.addEventClick()
   },
   beforeDestroy() {
     const elx = this.$refs.rightPanel
@@ -91,75 +81,69 @@ export default {
 </script>
 
 <style>
-.showRightPanel {
-  overflow: hidden;
-  position: relative;
-  width: calc(100% - 15px);
-}
+  .showRightPanel {
+    overflow: hidden;
+    position: relative;
+    width: calc(100% - 15px);
+  }
 </style>
 
 <style lang="scss" scoped>
-.rightPanel-background {
-  opacity: 0;
-  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
-  background: rgba(0, 0, 0, .2);
-  width: 0;
-  height: 0;
-  top: 0;
-  left: 0;
-  position: fixed;
-  z-index: -1;
-}
-
-.rightPanel {
-  background: #fff;
-  position: fixed;
-  height: 100vh;
-  width: 100%;
-  max-width: 260px;
-  top: 0px;
-  left: 0px;
-  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
-  transition: all .25s cubic-bezier(.7, .3, .1, 1);
-  transform: translate(100%);
-  z-index: 40000;
-  left: auto;
-  right: 0px;
-}
-
-.show {
-  transition: all .3s cubic-bezier(.7, .3, .1, 1);
-
   .rightPanel-background {
-    z-index: 20000;
-    opacity: 1;
-    width: 100%;
-    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+    background: rgba(0, 0, 0, .2);
+    z-index: -1;
   }
 
   .rightPanel {
-    transform: translate(0);
+    width: 100%;
+    max-width: 260px;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    right: 0;
+    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+    transition: all .25s cubic-bezier(.7, .3, .1, 1);
+    transform: translate(100%);
+    background: #fff;
+    z-index: 40000;
   }
-}
 
-.handle-button {
-  position: absolute;
-  left: -48px;
-  border-radius: 6px 0 0 6px !important;
-  width: 48px;
-  height: 48px;
-  pointer-events: auto;
-  z-index: 0;
-  cursor: pointer;
-  pointer-events: auto;
-  font-size: 24px;
-  text-align: center;
-  color: #fff;
-  line-height: 48px;
+  .show {
+    transition: all .3s cubic-bezier(.7, .3, .1, 1);
 
-  i {
+    .rightPanel-background {
+      z-index: 20000;
+      opacity: 1;
+      width: 100%;
+      height: 100%;
+    }
+
+    .rightPanel {
+      transform: translate(0);
+    }
+  }
+
+  .handle-button {
+    width: 48px;
+    height: 48px;
+    position: absolute;
+    left: -48px;
+    text-align: center;
     font-size: 24px;
+    border-radius: 6px 0 0 6px !important;
+    z-index: 0;
+    pointer-events: auto;
+    cursor: pointer;
+    color: #fff;
     line-height: 48px;
+    i {
+      font-size: 24px;
+      line-height: 48px;
+    }
   }
-}
 </style>