feat:vue-element-admin升级改造vue3

src/layout/index.vue

@@ -2,54 +2,63 @@
   <div :class="classObj" class="app-wrapper">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
     <sidebar class="sidebar-container" />
-    <div class="main-container">
+    <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />
+        <tags-view v-if="needTagsView" />
       </div>
       <app-main />
+      <right-panel v-if="showSettings">
+        <settings />
+      </right-panel>
     </div>
   </div>
 </template>
 
-<script>
-import { Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
 
-export default {
+<script>
+import {computed, defineComponent, onBeforeMount, onBeforeUnmount, onMounted, reactive, toRefs} from "vue";
+import {Navbar, Sidebar, AppMain} from './components'
+import {
+  sidebar,
+  device,
+  resizeMounted,
+  addEventListenerOnResize,
+  removeEventListenerResize,
+  watchRouter
+} from './mixin/ResizeHandler'
+import {useStore} from "@store";
+
+
+export default defineComponent({
   name: 'Layout',
   components: {
     Navbar,
     Sidebar,
     AppMain
   },
-  mixins: [ResizeMixin],
-  computed: {
-    sidebar() {
-      return this.$store.state.app.sidebar
-    },
-    device() {
-      return this.$store.state.app.device
-    },
-    fixedHeader() {
-      return true
-    },
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
+  setup() {
+    const store = useStore()
 
+    const state = reactive({
+      handleClickOutside: () => {
+        store.dispatch('app/closeSideBar', false)
+      }
+    })
+
+    const classObj = computed(() => {
+      return {
+        hideSidebar: !sidebar.opened,
+        openSidebar: sidebar.opened,
+        withoutAnimation: sidebar.withoutAnimation,
+        mobile: device === 'mobile'
+      }
+    })
+  }
+
+})
+
+</script>
 <style lang="scss" scoped>
 @import "@styles/mixin.scss";
 @import "@styles/variables.scss";
@@ -59,11 +68,13 @@ export default {
   position: relative;
   height: 100%;
   width: 100%;
-  &.mobile.openSidebar{
+
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
   }
 }
+
 .drawer-bg {
   background: #000;
   opacity: 0.3;