ERP 定制图标 layout调整

src/layout/components/Navbar.vue

@@ -53,9 +53,9 @@
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-          <router-link to="/user/profile">
-            <el-dropdown-item>个人中心</el-dropdown-item>
-          </router-link>
+          <!--<router-link to="/user/profile">-->
+            <!--<el-dropdown-item>个人中心</el-dropdown-item>-->
+          <!--</router-link>-->
           <span  @click="showItem">
             <el-dropdown-item>修改密码</el-dropdown-item>
           </span>

src/layout/components/TagsView/index.vue

 <template>
-  <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link
-        v-for="tag in visitedViews"
-        ref="tag"
-        :key="tag.path"
-        :class="isActive(tag)?'active':''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
-        class="tags-view-item"
-        :style="activeStyle(tag)"
-        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
-      >
+  <div id="tags-view-container" class="tags-view-container" style="position: relative;">
+    <!-- 过长切换-->
+    <div v-show="moveShow" class="moveLeft">
+      <i @click="moveLeft" class="fa fa-chevron-circle-left" aria-hidden="true" /></i>
+    </div>
+    <div v-show="moveShow"  class="moveRight">
+      <i @click="moveRight" class="fa fa-chevron-circle-right" aria-hidden="true" /></i>
+    </div>
+    <scroll-pane id='scrollPane'  ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
+      <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
+        :style="activeStyle(tag)" @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
+        @contextmenu.prevent.native="openMenu(tag,$event)">
         {{ tag.title }}
         <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
       </router-link>
@@ -29,13 +28,16 @@
 </template>
 
 <script>
-import ScrollPane from './ScrollPane'
-import path from 'path'
+  import ScrollPane from './ScrollPane'
+  import path from 'path'
 
-export default {
-  components: { ScrollPane },
+  export default {
+    components: {
+      ScrollPane
+    },
     data() {
       return {
+        moveShow:false,
         visible: false,
         top: 0,
         left: 0,
@@ -44,6 +46,7 @@ export default {
       }
     },
     computed: {
+      /* 宽度*/
       visitedViews() {
         return this.$store.state.tagsView.visitedViews
       },
@@ -70,8 +73,41 @@ export default {
     mounted() {
       this.initTags()
       this.addTags()
+      /* 监听*/
+    },
+    updated() {
+      let spans=$('#scrollPane').find('.el-scrollbar__view>span')
+      let allWidth=$('.navbar').width()
+      let width=0
+      spans.each((inex,item)=>{
+        width=width+$(item).width()+5+16
+      })
+      if(width>allWidth){
+        this.moveShow=true
+      }else{
+        this.moveShow=false
+      }
     },
     methods: {
+      moveLeft(){
+        const element =this.$refs.scrollPane.$el
+        const event = new WheelEvent('wheel', {
+                deltaY: -200, // 设置滚动值
+                bubbles: true,
+                cancelable: true
+              });
+              element.dispatchEvent(event);
+      },
+      moveRight(){
+        const element =this.$refs.scrollPane.$el
+        const event = new WheelEvent('wheel', {
+                deltaY: 200, // 设置滚动值
+                bubbles: true,
+                cancelable: true
+              });
+              element.dispatchEvent(event);
+
+      },
       isActive(route) {
         return route.path === this.$route.path
       },
@@ -108,7 +144,9 @@ export default {
               fullPath: tagPath,
               path: tagPath,
               name: route.name,
-            meta: { ...route.meta }
+              meta: {
+                ...route.meta
+              }
             })
           }
           if (route.children) {
@@ -130,7 +168,9 @@ export default {
         }
       },
       addTags() {
-      const { name } = this.$route
+        const {
+          name
+        } = this.$route
         if (name) {
           this.$store.dispatch('tagsView/addView', this.$route)
         }
@@ -155,7 +195,9 @@ export default {
         this.$tab.refreshPage(view);
       },
       closeSelectedTag(view) {
-      this.$tab.closePage(view).then(({ visitedViews }) => {
+        this.$tab.closePage(view).then(({
+          visitedViews
+        }) => {
           if (this.isActive(view)) {
             this.toLastView(visitedViews, view)
           }
@@ -176,13 +218,15 @@ export default {
         })
       },
       closeOthersTags() {
-      this.$router.push(this.selectedTag).catch(()=>{});
+        this.$router.push(this.selectedTag).catch(() => {});
         this.$tab.closeOtherPage(this.selectedTag).then(() => {
           this.moveToCurrentTag()
         })
       },
       closeAllTags(view) {
-      this.$tab.closeAllPage().then(({ visitedViews }) => {
+        this.$tab.closeAllPage().then(({
+          visitedViews
+        }) => {
           if (this.affixTags.some(tag => tag.path === this.$route.path)) {
             return
           }
@@ -198,7 +242,9 @@ export default {
           // you can adjust it according to your needs.
           if (view.name === 'Dashboard') {
             // to reload home page
-          this.$router.replace({ path: '/redirect' + view.fullPath })
+            this.$router.replace({
+              path: '/redirect' + view.fullPath
+            })
           } else {
             this.$router.push('/')
           }
@@ -228,16 +274,44 @@ export default {
         this.closeMenu()
       }
     }
-}
+  }
 </script>
 
 <style lang="scss" scoped>
-.tags-view-container {
+  .moveLeft{
+    display: none;
+  }
+  .moveRight{
+    display: none;
+  }
+  .tags-view-container:hover{
+    .moveLeft {
+      display: block;
+      line-height: 34px;
+       color: #666;
+      position: absolute;
+      left: 0;
+      cursor: pointer;
+      z-index: 9999;
+    }
+    .moveRight {
+       display: block;
+      line-height: 34px;
+      color: #666;
+      position: absolute;
+      right: 0;
+      cursor: pointer;
+      z-index: 9999;
+    }
+  }
+
+  .tags-view-container {
     height: 34px;
     width: 100%;
     background: #fff;
     border-bottom: 1px solid #d8dce5;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+
     .tags-view-wrapper {
       .tags-view-item {
         display: inline-block;
@@ -252,16 +326,20 @@ export default {
         font-size: 12px;
         margin-left: 5px;
         margin-top: 4px;
+
         &:first-of-type {
           margin-left: 15px;
         }
+
         &:last-of-type {
           margin-right: 15px;
         }
+
         &.active {
           background-color: #42b983;
           color: #fff;
           border-color: #42b983;
+
           &::before {
             content: '';
             background: #fff;
@@ -275,6 +353,7 @@ export default {
         }
       }
     }
+
     .contextmenu {
       margin: 0;
       background: #fff;
@@ -287,21 +366,23 @@ export default {
       font-weight: 400;
       color: #333;
       box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+
       li {
         margin: 0;
         padding: 7px 16px;
         cursor: pointer;
+
         &:hover {
           background: #eee;
         }
       }
     }
-}
+  }
 </style>
 
 <style lang="scss">
-//reset element css of el-icon-close
-.tags-view-wrapper {
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
     .tags-view-item {
       .el-icon-close {
         width: 16px;
@@ -311,16 +392,18 @@ export default {
         text-align: center;
         transition: all .3s cubic-bezier(.645, .045, .355, 1);
         transform-origin: 100% 50%;
+
         &:before {
           transform: scale(.6);
           display: inline-block;
           vertical-align: -3px;
         }
+
         &:hover {
           background-color: #b4bccc;
           color: #fff;
         }
       }
     }
-}
+  }
 </style>