xs-common-plugins 1.2.4 → 1.2.5

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

@@ -1,114 +1,114 @@
-<template>
-  <div :class="{ 'has-logo': showLogo }">
-    <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="variables.menuBg"
-        :text-color="variables.menuText"
-        :unique-opened="true"
-        :active-text-color="variables.menuActiveText"
-        :collapse-transition="false"
-        mode="vertical"
-      >
-        <sidebar-item
-          v-for="route in getMenuList"
-          :key="route.id"
-          :item="route"
-          :base-path="route.url"
-        />
-      </el-menu>
-    </el-scrollbar>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import Logo from "./Logo";
-import SidebarItem from "./SidebarItem";
-import variables from "@/styles/variables.scss";
-
-import { createMenuId } from "@/common/createMenuId";
-//TODO
-export default {
-  data() {
-    return {
-      devMenuList: [],
-    };
-  },
-  props: {
-    fromItem: {
-      type: Number,
-      default: 0
-    }
-  },
-  components: { SidebarItem, Logo },
-  computed: {
-    ...mapGetters(["sidebar", "menuList"]),
-    activeMenu() {
-      const route = this.$route;
-      const { path } = route;
-      if (route.path) {
-        return createMenuId(route.path);
-      }
-      const realUrl = decodeURIComponent(path).replace(`/child-frame/`, "");
-      return realUrl;
-    },
-    showLogo() {
-      // return this.$store.state.settings.sidebarLogo;
-    },
-    variables() {
-      return variables;
-    },
-    isCollapse() {
-      return !this.sidebar.opened;
-    },
-    getMenuList () {
-      if(process.env.NODE_ENV === 'development') {
-        return this.devMenuList
-      } 
-      return this.menuList
-    }
-  },
-  created() {
-    if (process.env.NODE_ENV == "development") {
-      let router = this.$root.$router.options.routes.find(
-        item => item.path === "/"
-      );
-      let { subItems } =  this.formatRouter(router, {url:'/'})
-      this.devMenuList = subItems || []
-    }
-  },
-  methods: {
-    formatRouter (obj, parent) {
-      let item = {
-        title: obj.meta && obj.meta.title || '',
-        icon: obj.meta && obj.meta.icon || '',
-        hide: obj.meta && obj.meta.hidden || false,
-        url: '',
-        host: window.location.host,
-        subItems:  [],
-        id: ''
-      }
-      if(parent.url == '/') {
-        obj.url =  obj.path
-      } else {
-        obj.url = parent.url + '/'+ obj.path 
-      }
-      item.url = obj.url
-      item.id = createMenuId(item.url)
-      if(obj.children && obj.children.length > 0) {
-        let list = []
-        obj.children.forEach((it)=>{
-          list.push(this.formatRouter(it, obj))
-        })
-        if(!list.every(i => i['hide'] === true)) {
-          item.subItems = list.filter(item => item['hide'] !== true)
-        }
-      }
-      return item
-    }
-  }
-};
-</script>
+<template>
+  <div :class="{ 'has-logo': showLogo }">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :unique-opened="true"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item
+          v-for="route in getMenuList"
+          :key="route.id"
+          :item="route"
+          :base-path="route.url"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import Logo from "./Logo";
+import SidebarItem from "./SidebarItem";
+import variables from "@/styles/variables.scss";
+
+import { createMenuId } from "@/common/createMenuId";
+//TODO
+export default {
+  data() {
+    return {
+      devMenuList: [],
+    };
+  },
+  props: {
+    fromItem: {
+      type: Number,
+      default: 0
+    }
+  },
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapGetters(["sidebar", "menuList"]),
+    activeMenu() {
+      const route = this.$route;
+      const { path } = route;
+      if (route.path) {
+        return createMenuId(route.path);
+      }
+      const realUrl = decodeURIComponent(path).replace(`/child-frame/`, "");
+      return realUrl;
+    },
+    showLogo() {
+      // return this.$store.state.settings.sidebarLogo;
+    },
+    variables() {
+      return variables;
+    },
+    isCollapse() {
+      return !this.sidebar.opened;
+    },
+    getMenuList () {
+      if(process.env.NODE_ENV === 'development') {
+        return this.devMenuList
+      } 
+      return this.menuList
+    }
+  },
+  created() {
+    if (process.env.NODE_ENV == "development") {
+      let router = this.$root.$router.options.routes.find(
+        item => item.path === "/"
+      );
+      let { subItems } =  this.formatRouter(router, {url:'/'})
+      this.devMenuList = subItems || []
+    }
+  },
+  methods: {
+    formatRouter (obj, parent) {
+      let item = {
+        title: obj.meta && obj.meta.title || '',
+        icon: obj.meta && obj.meta.icon || '',
+        hide: obj.meta && obj.meta.hidden || false,
+        url: '',
+        host: window.location.host,
+        subItems:  [],
+        id: ''
+      }
+      if(parent.url == '/') {
+        obj.url =  obj.path
+      } else {
+        obj.url = parent.url + '/'+ obj.path 
+      }
+      item.url = obj.url
+      item.id = createMenuId(item.url)
+      if(obj.children && obj.children.length > 0) {
+        let list = []
+        obj.children.forEach((it)=>{
+          list.push(this.formatRouter(it, obj))
+        })
+        if(!list.every(i => i['hide'] === true)) {
+          item.subItems = list.filter(item => item['hide'] !== true)
+        }
+      }
+      return item
+    }
+  }
+};
+</script>

package/src/views/layout/components/TagsView/ScrollPane.vue

@@ -1,94 +1,94 @@
-<template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
-    <slot />
-  </el-scrollbar>
-</template>
-
-<script>
-const tagAndTagSpacing = 4 // tagAndTagSpacing
-
-export default {
-  name: 'ScrollPane',
-  data() {
-    return {
-      left: 0
-    }
-  },
-  computed: {
-    scrollWrapper() {
-      return this.$refs.scrollContainer.$refs.wrap
-    }
-  },
-  mounted() {
-    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
-  },
-  beforeDestroy() {
-    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
-  },
-  methods: {
-    handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 40
-      const $scrollWrapper = this.scrollWrapper
-      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-    },
-    emitScroll() {
-      this.$emit('scroll')
-    },
-    moveToTarget(currentTag) {
-      const $container = this.$refs.scrollContainer.$el
-      const $containerWidth = $container.offsetWidth
-      const $scrollWrapper = this.scrollWrapper
-      const tagList = this.$parent.$refs.tag
-
-      let firstTag = null
-      let lastTag = null
-
-      // find first tag and last tag
-      if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
-      }
-
-      if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
-      } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
-      } else {
-        // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
-
-        // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
-
-        // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
-
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
-        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  ::v-deep {
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    .el-scrollbar__wrap {
-      height: 49px;
-    }
-  }
-}
-</style>
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  mounted() {
+    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
+  },
+  beforeDestroy() {
+    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    emitScroll() {
+      this.$emit('scroll')
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  ::v-deep {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>