'admin-21.01.25:处理iframes刷新、Tagsview风格问题'

vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue

@@ -8,15 +8,15 @@
           <div class="layout-columns-aside-li-box">
             <template v-if="!v.meta.isLink">
               <i :class="v.meta.icon"></i>
-              <div class="layout-columns-aside-li-box-title">
+              <div class="layout-columns-aside-li-box-title font12">
-                {{v.meta.title && v.meta.title.length >= 2 ? v.meta.title.substr(0,2) : v.meta.title}}
+                {{v.meta.title && v.meta.title.length >= 4 ? v.meta.title.substr(0,4) : v.meta.title}}
               </div>
             </template>
             <template v-else>
               <a :href="v.meta.isLink" target="_blank">
                 <i :class="v.meta.icon"></i>
-                <div class="layout-columns-aside-li-box-title">
+                <div class="layout-columns-aside-li-box-title font12">
-                  {{v.meta.title && v.meta.title.length >= 2 ? v.meta.title.substr(0,2) : v.meta.title}}
+                  {{v.meta.title && v.meta.title.length >= 4 ? v.meta.title.substr(0,4) : v.meta.title}}
                 </div>
               </a>
             </template>

vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue

@@ -8,7 +8,7 @@
           <i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v.path)"></i>
           <i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.meta.icon"
             v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
-          <span>{{v.meta.title}}</span>
+          <span :class="{'is-active-four': v.meta.isAffix}">{{v.meta.title}}</span>
           <template v-if="isActive(v.path)">
             <i class="el-icon-refresh-right ml5" @click="refreshCurrentTagsView(v.path)"></i>
             <i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active" v-if="!v.meta.isAffix"
@@ -419,6 +419,11 @@ export default {
           right: -51px;
         }
       }
+      .is-active-four {
+        &::after {
+          right: -40px;
+        }
+      }
       &::before,
       &::after {
         content: "";

vue-admin-wonderful-next/src/views/layout/routerView/iframes.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="layout-scrollbar">
     <div class="layout-view-bg-white flex h100" v-loading="iframeLoading">
-      <iframe :src="currentRouteMeta.isLink" frameborder="0" height="100%" width="100%" id="iframe"></iframe>
+      <iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe"></iframe>
     </div>
   </div>
 </template>
@@ -13,8 +13,12 @@ import {
   reactive,
   toRefs,
   onMounted,
+  onBeforeMount,
+  onUnmounted,
   nextTick,
+  getCurrentInstance,
 } from "vue";
+import { useRoute } from "vue-router";
 export default defineComponent({
   name: "layoutIfameView",
   props: {
@@ -24,24 +28,40 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { proxy } = getCurrentInstance();
+    const route = useRoute();
     const state = reactive({
       iframeLoading: true,
+      iframeUrl: "",
     });
-    // 获取父级菜单数据
+    // 初始化页面加载 loading
-    const currentRouteMeta = computed(() => {
+    const initIframeLoad = () => {
-      return props.meta;
-    });
-    // 页面加载时
-    onMounted(() => {
       nextTick(() => {
+        state.iframeLoading = true;
         const iframe = document.getElementById("iframe");
         iframe.onload = () => {
           state.iframeLoading = false;
         };
       });
+    };
+    // 页面加载前
+    onBeforeMount(() => {
+      state.iframeUrl = props.meta.isLink;
+      proxy.mittBus.on("onTagsViewRefreshRouterView", (path: string) => {
+        if (route.path !== path) return false;
+        state.iframeUrl = `${props.meta.isLink}?key=${Math.random()}`;
+        initIframeLoad();
+      });
+    });
+    // 页面加载时
+    onMounted(() => {
+      initIframeLoad();
+    });
+    // 页面卸载时
+    onUnmounted(() => {
+      proxy.mittBus.off("onTagsViewRefreshRouterView");
     });
     return {
-      currentRouteMeta,
       ...toRefs(state),
     };
   },