refactor[ScrollBar]: use el-scrollbar (#646)

src/views/layout/Layout.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-wrapper" :class="classObj">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
     <sidebar class="sidebar-container"></sidebar>
     <div class="main-container">
       <navbar></navbar>
@@ -36,6 +37,11 @@ export default {
         mobile: this.device === 'mobile'
       }
     }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('closeSideBar', { withoutAnimation: false })
+    }
   }
 }
 </script>
@@ -48,4 +54,13 @@ export default {
     height: 100%;
     width: 100%;
   }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
 </style>

src/views/layout/components/Sidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <scroll-bar>
+  <el-scrollbar wrapClass="scrollbar-wrapper">
     <el-menu
       mode="vertical"
       :show-timeout="200"
@@ -11,16 +11,15 @@
     >
       <sidebar-item :routes="permission_routers"></sidebar-item>
     </el-menu>
-  </scroll-bar>
+  </el-scrollbar>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
-import ScrollBar from '@/components/ScrollBar'
 
 export default {
-  components: { SidebarItem, ScrollBar },
+  components: { SidebarItem },
   computed: {
     ...mapGetters([
       'permission_routers',