update 进行了一系列优化

Web/src/views/main/_layout/sider/index copy.vue

@@ -0,0 +1,138 @@
+<template>
+  <section>
+    <a-layout-sider
+      :collapsed="siderCollapsed === undefined ? $root.global.settings.siderCollapsed : siderCollapsed"
+      @collapse="onCollapse"
+      v-if="$root.global.settings.layout === 'left-menu' || $root.global.settings.layout === 'right-menu'"
+      width="200"
+    >
+      <Logo />
+      <div class="yo-sider-nav">
+        <App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
+        <!-- <swiper :options="siderSwiperOptions" ref="sider-swiper">
+          <swiper-slide>
+            <a-spin :spinning="nav.loading">
+              <a-icon slot="indicator" spin type="loading" />
+              <Menu
+                :menu-style="{ height: '100%', borderRight: 0 }"
+                :nav="nav"
+                @openChange="onMenuOpenChange"
+                mode="inline"
+              />
+            </a-spin>
+          </swiper-slide>
+          <div class="swiper-scrollbar" id="layout--swiper-scrollbar" slot="scrollbar"></div>
+        </swiper>-->
+        <div class="swiper-container" id="layout--swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <a-spin :spinning="nav.loading">
+                <a-icon slot="indicator" spin type="loading" />
+                <Menu
+                  :menu-style="{ height: '100%', borderRight: 0 }"
+                  :nav="nav"
+                  @openChange="onMenuOpenChange"
+                  mode="inline"
+                />
+              </a-spin>
+            </div>
+            <div class="swiper-scrollbar" id="layout--swiper-scrollbar"></div>
+          </div>
+        </div>
+      </div>
+    </a-layout-sider>
+    <template v-else-if="$root.global.settings.layout === 'top-nav'">
+      <Menu
+        :menu-style="{ borderBottom: 0 }"
+        :nav="nav"
+        @openChange="onMenuOpenChange"
+        mode="horizontal"
+      />
+    </template>
+  </section>
+</template>
+<script>
+import Logo from '../logo';
+import App from './app';
+import Menu from './menu';
+
+import Swiper from 'swiper';
+
+let timer,
+  swiper,
+  siderSwiperOptions = {
+    direction: 'vertical',
+    slidesPerView: 'auto',
+    freeMode: true,
+    scrollbar: {
+      el: '#layout--swiper-scrollbar',
+    },
+    mousewheel: true,
+  };
+
+export default {
+  components: {
+    Logo,
+    App,
+    Menu,
+  },
+  props: {
+    nav: {
+      default() {
+        return {
+          apps: [],
+          menus: [],
+          loading: false,
+        };
+      },
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      siderCollapsed: undefined,
+    };
+  },
+  mounted() {
+    swiper = new Swiper('#layout--swiper-container', siderSwiperOptions);
+
+    window.addEventListener('resize', () => {
+      if (this.$root.global.settings.layout === 'left-menu' || this.$root.global.settings.layout === 'right-menu') {
+        if (!this.$root.global.settings.siderCollapsed) {
+          if (window.innerWidth < 1000) {
+            this.siderCollapsed = true;
+          } else {
+            this.siderCollapsed = undefined;
+          }
+        }
+
+        this.onUpdateSwiper();
+      }
+    });
+  },
+  methods: {
+    onUpdateSwiper() {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        // if (this.$refs['sider-swiper']) {
+        //   this.$refs['sider-swiper'].$swiper.update();
+        // }
+        swiper.update();
+      }, 300);
+    },
+
+    onMenuOpenChange() {
+      this.onUpdateSwiper();
+    },
+
+    onCollapse() {
+      this.onUpdateSwiper();
+    },
+
+    windowTriggerResize() {
+      let e = new Event('resize');
+      window.dispatchEvent(e);
+    },
+  },
+};
+</script>

Web/src/views/main/_layout/sider/index.vue

@@ -9,20 +9,22 @@
       <Logo />
       <div class="yo-sider-nav">
         <App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
-        <swiper :options="siderSwiperOptions" ref="sider-swiper">
-          <swiper-slide>
-            <a-spin :spinning="nav.loading">
-              <a-icon slot="indicator" spin type="loading" />
-              <Menu
-                :menu-style="{ height: '100%', borderRight: 0 }"
-                :nav="nav"
-                @openChange="onMenuOpenChange"
-                mode="inline"
-              />
-            </a-spin>
-          </swiper-slide>
-          <div class="swiper-scrollbar" id="layout--swiper-scrollbar" slot="scrollbar"></div>
-        </swiper>
+        <div class="swiper-container" id="layout--swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <a-spin :spinning="nav.loading">
+                <a-icon slot="indicator" spin type="loading" />
+                <Menu
+                  :menu-style="{ height: '100%', borderRight: 0 }"
+                  :nav="nav"
+                  @openChange="onMenuOpenChange"
+                  mode="inline"
+                />
+              </a-spin>
+            </div>
+          </div>
+          <div class="swiper-scrollbar" id="layout--swiper-scrollbar"></div>
+        </div>
       </div>
     </a-layout-sider>
     <template v-else-if="$root.global.settings.layout === 'top-nav'">
@@ -40,7 +42,19 @@ import Logo from '../logo';
 import App from './app';
 import Menu from './menu';
 
-let timer;
+import Swiper from 'swiper';
+
+let timer,
+  swiper,
+  siderSwiperOptions = {
+    direction: 'vertical',
+    slidesPerView: 'auto',
+    freeMode: true,
+    scrollbar: {
+      el: '#layout--swiper-scrollbar',
+    },
+    mousewheel: true,
+  };
 
 export default {
   components: {
@@ -62,20 +76,13 @@ export default {
   },
   data() {
     return {
-      siderSwiperOptions: {
-        direction: 'vertical',
-        slidesPerView: 'auto',
-        freeMode: true,
-        scrollbar: {
-          el: '#layout--swiper-scrollbar',
-        },
-        mousewheel: true,
-      },
-
       siderCollapsed: undefined,
     };
   },
   mounted() {
+    // swiper不能使用vue版本的组件.效果相当差
+    swiper = new Swiper('#layout--swiper-container', siderSwiperOptions);
+
     window.addEventListener('resize', () => {
       if (this.$root.global.settings.layout === 'left-menu' || this.$root.global.settings.layout === 'right-menu') {
         if (!this.$root.global.settings.siderCollapsed) {
@@ -86,22 +93,26 @@ export default {
           }
         }
 
-        clearTimeout(timer);
-        timer = setTimeout(() => {
-          if (this.$refs['sider-swiper']) {
-            this.$refs['sider-swiper'].$swiper.update();
-          }
-        }, 300);
+        this.onUpdateSwiper();
       }
     });
   },
   methods: {
+    onUpdateSwiper() {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        // 需要更新两次
+        swiper.update();
+        swiper.update();
+      }, 300);
+    },
+
     onMenuOpenChange() {
-      this.windowTriggerResize();
+      this.onUpdateSwiper();
     },
 
     onCollapse() {
-      this.windowTriggerResize();
+      this.onUpdateSwiper();
     },
 
     windowTriggerResize() {