qdt-admin-layout 1.1.2 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdt-admin-layout",
-  "version": "1.1.2",
+  "version": "1.1.5",
   "description": "基于element-ui的后台管理layout的管家婆改版",
   "main": "src/index.js",
   "module": "dist/esm/index.js",

package/src/component/ContextMenu/index.vue

@@ -23,7 +23,7 @@
  */
 
 export default {
-  name: 'ContextMenu',
+  name: "ContextMenu",
 
   props: {
     // 是否显示，支持v-modal
@@ -35,85 +35,88 @@ export default {
     // 菜单距离屏幕顶部的距离，单位px
     top: Number,
     // 菜单距离屏幕边缘的最小距离，单位px
-    minDistance: { type: Number, default: 10 }
+    minDistance: { type: Number, default: 10 },
   },
 
   data() {
-    this.willAutoAdaptLeft = false
-    this.willAutoAdaptTop = false
+    this.willAutoAdaptLeft = false;
+    this.willAutoAdaptTop = false;
     return {
-      realLeft: '0px',
-      realTop: '0px'
-    }
+      realLeft: "0px",
+      realTop: "0px",
+    };
   },
 
   computed: {
     style() {
-      return { left: this.realLeft, top: this.realTop }
+      return { left: this.realLeft, top: this.realTop };
     },
 
     menuItems() {
-      return this.items.filter(Boolean)
-    }
+      return this.items.filter(Boolean);
+    },
   },
 
   watch: {
     value: {
       immediate: true,
       handler(v) {
-        document.body[v ? 'addEventListener' : 'removeEventListener']('click', this.close)
+        document.body[v ? "addEventListener" : "removeEventListener"](
+          "click",
+          this.close
+        );
         if (v) {
-          this.willAutoAdaptLeft = true
-          this.willAutoAdaptTop = true
-          this.$nextTick(this.autoAdapt)
+          this.willAutoAdaptLeft = true;
+          this.willAutoAdaptTop = true;
+          this.$nextTick(this.autoAdapt);
         }
-      }
+      },
     },
     left: {
       immediate: true,
-      handler: 'autoAdaptLeft'
+      handler: "autoAdaptLeft",
     },
     top: {
       immediate: true,
-      handler: 'autoAdaptTop'
-    }
+      handler: "autoAdaptTop",
+    },
   },
 
   methods: {
     close() {
-      this.$emit('input', false)
+      this.$emit("input", false);
     },
     autoAdapt() {
-      this.autoAdaptTop(this.top)
-      this.autoAdaptLeft(this.left)
+      this.autoAdaptTop(this.top);
+      this.autoAdaptLeft(this.left);
     },
     autoAdaptTop(v) {
       if (this.willAutoAdaptTop) {
-        this.willAutoAdaptTop = false
-        return
+        this.willAutoAdaptTop = false;
+        return;
       }
-      if (!this.value || v == null) return
+      if (!this.value || v == null) return;
 
-      const elHeight = this.$el.offsetHeight
-      const remainHeight = document.body.clientHeight - v - this.minDistance
-      const over = elHeight - remainHeight
-      const finalTop = over > 0 ? v - over : v
+      const elHeight = this.$el.offsetHeight;
+      const remainHeight = document.body.clientHeight - v - this.minDistance;
+      const over = elHeight - remainHeight;
+      const finalTop = over > 0 ? v - over : v;
 
-      this.realTop = `${finalTop}px`
+      this.realTop = `${finalTop}px`;
     },
     autoAdaptLeft(v) {
       if (this.willAutoAdaptLeft) {
-        this.willAutoAdaptLeft = false
-        return
+        this.willAutoAdaptLeft = false;
+        return;
       }
-      if (!this.value || v == null) return
+      if (!this.value || v == null) return;
 
-      const elWidth = this.$el.offsetWidth
-      const remainWidth = document.body.clientWidth - v - this.minDistance
-      const over = elWidth - remainWidth
-      const finalLeft = over > 0 ? v - over : v
+      const elWidth = this.$el.offsetWidth;
+      const remainWidth = document.body.clientWidth - v - this.minDistance;
+      const over = elWidth - remainWidth;
+      const finalLeft = over > 0 ? v - over : v;
 
-      this.realLeft = `${finalLeft}px`
+      this.realLeft = `${finalLeft}px`;
     },
 
     /**
@@ -122,19 +125,19 @@ export default {
      * @param event {Event}
      */
     onClick(event) {
-      if (!event.target.classList.contains('context-menu-item')) {
-        return
+      if (!event.target.classList.contains("context-menu-item")) {
+        return;
       }
 
-      const index = Number(event.target.dataset.index)
-      const menuItem = this.menuItems[index]
+      const index = Number(event.target.dataset.index);
+      const menuItem = this.menuItems[index];
 
-      menuItem && menuItem.click()
-    }
+      menuItem && menuItem.click();
+    },
   },
 
   beforeDestroy() {
-    document.body.removeEventListener('click', this.close)
-  }
-}
+    document.body.removeEventListener("click", this.close);
+  },
+};
 </script>

package/src/component/ContextMenu/style.scss

@@ -6,9 +6,9 @@
   border-radius: 4px;
   font-size: 12px;
   max-height: 50vh;
-  color: $--color-white;
-  background-color: $menu-background-dark;
-  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color: rgb(96, 98, 102);
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.4);
   overflow-y: auto;
   overflow-x: hidden;
 

package/src/component/TagsView/index.vue

@@ -8,21 +8,29 @@ import {
   pageGetters,
   pageMutations,
   tagsViewGetters,
-  tagsViewMutations
-} from '../../store'
-import useContextMenu from '../../component/ContextMenu/functionalUse'
-import HorizontalScroller from '../../component/HorizontalScroller'
-import { refreshPage } from '../../helper'
-import { getRouterKey, getRouterTitle, isRedirectRouter } from '../../config/logic'
-import { isAffix, getAffixTagsFromMenuTree, renderDefaultStyleTag } from './util'
+  tagsViewMutations,
+} from "../../store";
+import useContextMenu from "../../component/ContextMenu/functionalUse";
+import HorizontalScroller from "../../component/HorizontalScroller";
+import { refreshPage } from "../../helper";
+import {
+  getRouterKey,
+  getRouterTitle,
+  isRedirectRouter,
+} from "../../config/logic";
+import {
+  isAffix,
+  getAffixTagsFromMenuTree,
+  renderDefaultStyleTag,
+} from "./util";
 
 export default {
-  name: 'TagsView',
+  name: "TagsView",
 
   data() {
     return {
       // 当前激活的页签的key，随路由变化
-      activeKey: '',
+      activeKey: "",
 
       // 当前选中的页签
       selectedTag: undefined,
@@ -31,46 +39,47 @@ export default {
       contextMenu: {
         show: false,
         top: 0,
-        left: 0
-      }
-    }
+        left: 0,
+      },
+    };
   },
 
   computed: {
     contextMenuItems() {
-      const { visitedViews } = tagsViewGetters
-      const closeable = visitedViews.length > 1 && !isAffix(this.selectedTag)
+      const { visitedViews } = tagsViewGetters;
+      const closeable = visitedViews.length > 1 && !isAffix(this.selectedTag);
 
       return [
-        { content: '刷新', click: this.refreshSelectedTag },
-        { content: closeable && '关闭', click: this.closeSelectedTag },
-        { content: '关闭其他', click: this.closeOthersTags },
-        { content: '关闭全部', click: this.closeAllTags }
-      ].filter(i => i.content)
+        { content: "刷新", click: this.refreshSelectedTag },
+        { content: closeable && "关闭", click: this.closeSelectedTag },
+        { content: "关闭其他", click: this.closeOthersTags },
+        { content: "关闭全部", click: this.closeAllTags },
+      ].filter((i) => i.content);
     },
 
-    // 避免HorizontalScroller在右键时触发$forceUpdate
-    // https://segmentfault.com/q/1010000040171066
     tagsSlot() {
-      return this._u([{
-        key: 'default',
-        fn: this.renderTags,
-        proxy: true
-      }])
-    }
+      return this._u([
+        {
+          key: "default",
+          fn: this.renderTags,
+          proxy: true,
+        },
+      ]);
+    },
   },
 
   watch: {
     $route(to, from) {
-      tagsViewGetters.enableChangeTransition && this.decideRouteTransition(to, from)
+      tagsViewGetters.enableChangeTransition &&
+        this.decideRouteTransition(to, from);
 
       // 如果是刷新的话，不需要进行后续操作
-      if (isRedirectRouter(to)) return
+      if (isRedirectRouter(to)) return;
 
-      this.setActiveKey(to)
-      this.addTag(to)
-      this.$nextTick(this.moveToCurrentTag)
-    }
+      this.setActiveKey(to);
+      this.addTag(to);
+      this.$nextTick(this.moveToCurrentTag);
+    },
   },
 
   methods: {
@@ -79,7 +88,7 @@ export default {
      * @param route {import('vue-router').Route}
      */
     setActiveKey(route) {
-      this.activeKey = getRouterKey(route)
+      this.activeKey = getRouterKey(route);
     },
 
     /**
@@ -88,33 +97,35 @@ export default {
      * @param from {import('vue-router').Route}
      */
     decideRouteTransition(to, from) {
-      const { next, prev } = pageGetters.transition
-      const { visitedViews } = tagsViewGetters
-      const fromKey = getRouterKey(from)
-      const toKey = getRouterKey(to)
+      const { next, prev } = pageGetters.transition;
+      const { visitedViews } = tagsViewGetters;
+      const fromKey = getRouterKey(from);
+      const toKey = getRouterKey(to);
 
       // 这里认为页签数量不会太多，所以为了可读性使用两次循环查找
-      const fromIndex = visitedViews.findIndex(i => i.key === fromKey)
-      const toIndex = visitedViews.findIndex(i => i.key === toKey)
+      const fromIndex = visitedViews.findIndex((i) => i.key === fromKey);
+      const toIndex = visitedViews.findIndex((i) => i.key === toKey);
 
-      let transitionName = prev
+      let transitionName = prev;
 
       // 新开tab也认为顺序高于上一个tab
       if (toIndex === -1 || fromIndex < toIndex) {
-        transitionName = next
+        transitionName = next;
       }
 
-      pageMutations.transition({ curr: transitionName })
+      pageMutations.transition({ curr: transitionName });
     },
 
     // 初始化固定显示的页签
     initTags() {
       // TODO 如果页签栏初始化后菜单未加载，则固定页签会出问题
       // 添加所有固定显示的页签
-      getAffixTagsFromMenuTree(this.$router, appGetters.menus).forEach(tagsViewMutations.addTagOnly)
+      getAffixTagsFromMenuTree(this.$router, appGetters.menus).forEach(
+        tagsViewMutations.addTagOnly
+      );
 
       // 将当前路由对象添加为页签
-      this.addTag(this.$route)
+      this.addTag(this.$route);
     },
     /**
      * 尝试将路由对象添加为tab页
@@ -125,18 +136,17 @@ export default {
         ...route,
         meta: {
           ...route.meta,
-          title: getRouterTitle(route)
-        }
-      })
+          title: getRouterTitle(route),
+        },
+      });
     },
     // 横向滚动条移动至当前tab
     moveToCurrentTag() {
-      const { scroller } = this.$refs
-      const cur =
-        Array
-          .from(scroller.$el.children)
-          .find(el => el.classList.contains('active'))
-      cur && scroller.moveToTarget(cur)
+      const { scroller } = this.$refs;
+      const cur = Array.from(scroller.$el.children).find((el) =>
+        el.classList.contains("active")
+      );
+      cur && scroller.moveToTarget(cur);
     },
     /**
      * 激活末尾页签
@@ -144,20 +154,20 @@ export default {
      * @return {Promise<Route>}
      */
     gotoLastTag(refresh = false) {
-      const views = tagsViewGetters.visitedViews
-      const router = this.$router
+      const views = tagsViewGetters.visitedViews;
+      const router = this.$router;
 
       if (views.length === 0) {
-        return router.push('/')
+        return router.push("/");
       }
 
-      const latest = views[views.length - 1]
+      const latest = views[views.length - 1];
 
       // 目标路由是当前路由时需要刷新，否则直接跳转
       this.activeKey === latest.key
         ? refresh && refreshPage(router)
-        // 需要套一层$nextTick，否则tagsViewStore.visitedViews可能只会变动一次
-        : this.$nextTick(() => router.push(latest))
+        : // 需要套一层$nextTick，否则tagsViewStore.visitedViews可能只会变动一次
+          this.$nextTick(() => router.push(latest));
     },
 
     /**
@@ -165,27 +175,27 @@ export default {
      * @param view {View}
      */
     refreshSelectedTag(view = this.selectedTag) {
-      refreshPage(this.$router, view)
+      refreshPage(this.$router, view);
     },
     /**
      * 关闭所选页签
      * @param view {VisitedView}
      */
     closeSelectedTag(view = this.selectedTag) {
-      if (tagsViewGetters.visitedViews.length <= 1 || isAffix(view)) return
+      if (tagsViewGetters.visitedViews.length <= 1 || isAffix(view)) return;
 
-      tagsViewMutations.delTagAndCache(view)
-      this.activeKey === view.key && this.gotoLastTag()
+      tagsViewMutations.delTagAndCache(view);
+      this.activeKey === view.key && this.gotoLastTag();
     },
     // 关闭除激活、固定页签以外的所有页签
     closeOthersTags() {
-      tagsViewMutations.delOtherTagAndCache(this.selectedTag)
-      this.gotoLastTag()
+      tagsViewMutations.delOtherTagAndCache(this.selectedTag);
+      this.gotoLastTag();
     },
     // 关闭除固定页签以外的所有页签
     closeAllTags() {
-      tagsViewMutations.delAllTagAndCache()
-      this.gotoLastTag(true)
+      tagsViewMutations.delAllTagAndCache();
+      this.gotoLastTag(true);
     },
     /**
      * 在页签上打开右键菜单
@@ -193,39 +203,39 @@ export default {
      * @param e {MouseEvent}
      */
     openContextMenu(tag, e) {
-      e.preventDefault()
+      e.preventDefault();
 
       // 销毁之前的右键菜单实例
-      this.$contextmenu && this.$contextmenu()
+      this.$tagscontextmenu && this.$tagscontextmenu();
 
-      this.selectedTag = tag
+      this.selectedTag = tag;
 
-      this.$contextmenu = useContextMenu(this.contextMenuItems, {
+      this.$tagscontextmenu = useContextMenu(this.contextMenuItems, {
         left: e.clientX + 15,
-        top: e.clientY + 5
-      })
+        top: e.clientY + 5,
+      });
     },
 
     renderTags() {
-      const { $createElement: h, $router, activeKey } = this
-      const { itemSlot, visitedViews } = tagsViewGetters
-      const renderFn = itemSlot || renderDefaultStyleTag
+      const { $createElement: h, $router, activeKey } = this;
+      const { itemSlot, visitedViews } = tagsViewGetters;
+      const renderFn = itemSlot || renderDefaultStyleTag;
 
-      return visitedViews.map(view => {
-        const active = activeKey === view.key
-        const showClose = !isAffix(view) && visitedViews.length > 1
+      return visitedViews.map((view) => {
+        const active = activeKey === view.key;
+        const showClose = !isAffix(view) && visitedViews.length > 1;
         const on = {
-          contextmenu: e => this.openContextMenu(view, e)
-        }
-        const onClose = e => {
+          contextmenu: (e) => this.openContextMenu(view, e),
+        };
+        const onClose = (e) => {
           // 需要阻止事件冒泡，不然会触发tag的click事件
-          e.stopPropagation()
-          this.closeSelectedTag(view)
-        }
+          e.stopPropagation();
+          this.closeSelectedTag(view);
+        };
 
         // 非激活页签时，绑定点击事件，点击跳转到页签对应的路由
         if (!active) {
-          on.click = () => $router.push(view, () => undefined)
+          on.click = () => $router.push(view, () => undefined);
         }
 
         return renderFn(h, {
@@ -233,23 +243,23 @@ export default {
           active,
           on,
           title: view.meta.title,
-          close: showClose && onClose
-        })
-      })
-    }
+          close: showClose && onClose,
+        });
+      });
+    },
   },
 
   mounted() {
-    this.setActiveKey(this.$route)
-    this.initTags()
+    this.setActiveKey(this.$route);
+    this.initTags();
   },
 
   render() {
     return (
       <nav class="tags-view">
-        <HorizontalScroller ref="scroller" scopedSlots={this.tagsSlot}/>
+        <HorizontalScroller ref="scroller" scopedSlots={this.tagsSlot} />
       </nav>
-    )
-  }
-}
+    );
+  },
+};
 </script>

package/src/store/tagsView.js

@@ -11,7 +11,7 @@ const state = {
   // 是否启用
   enabled: true,
   // 是否启用缓存功能
-  enableCache: true,
+  enableCache: false,
   // 是否启用根据页签顺序来确定过渡动画的功能
   enableChangeTransition: true,