导航栏优化

src/views/HeadBar/HeadBar.vue

@@ -16,9 +16,21 @@
         <el-menu :default-active="activeIndex" class="el-menu-demo"
           style="overflow-x: hidden;border: none;" :background-color="themeColor" text-color="#fff"
           active-text-color="#ffd04b" mode="horizontal" @select="selectNavBar">
-        <el-menu-item :index="item.id" v-for="item in navTree" :key="item.id">{{ item.name }}</el-menu-item>
+        <el-menu-item :index="item.id" v-for="item in leftNavItems" :key="item.id">{{ item.name }}</el-menu-item>
         </el-menu>
       </span>
+      <!-- 收缩栏 -->
+      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="selectNavBar" :background-color="themeColor" active-text-color="#ffd04b" text-color="#fff">
+         <el-submenu style="float:right;" class="right-item" v-if="Object.keys(rightNavItems).length === 0 ? false : true"
+        index="10">
+        <template slot="title">
+          <i class="el-icon-s-fold" style="font-size:28px;color:#fff;"></i>
+        </template>
+        <el-menu-item :key="key" v-for="(item, key) in rightNavItems" :index="item.id"
+          style="margin: 4px 0;" >{{ item.name }}</el-menu-item>
+      </el-submenu>
+    </el-menu>
+     
     </div>
     <!-- 工具栏 -->
     <span class="toolbar">
@@ -28,14 +40,7 @@
           <!-- 主题切换 -->
           <theme-picker class="theme-picker" :default="themeColor" @onThemeChange="onThemeChange"></theme-picker>
         </el-menu-item>
-        <el-menu-item index="2" v-popover:popover-lang>
-          <!-- 语言切换 -->
-          <li style="color:#fff;" class="fa fa-language fa-lg"></li>
-          <el-popover ref="popover-lang" placement="bottom-start" trigger="click" v-model="langVisible">
-            <div class="lang-item" @click="changeLanguage('zh_cn')">简体中文</div>
-            <div class="lang-item" @click="changeLanguage('en_us')">English</div>
-          </el-popover>
-        </el-menu-item>
+     
         <el-menu-item index="3" v-popover:popover-message>
           <!-- 我的私信 -->
           <el-badge :value="5" :max="99" class="badge" type="success">
@@ -94,9 +99,27 @@ export default {
       collapse: state => state.app.collapse,
       navTree: state => state.menu.navTree
     }),
+    leftNavItems: function () {
+      if(this.sum>0){
+        return this.navTree.slice(0,'-'+this.sum);
+      }else{
+        return this.navTree;
+      }
+    },
+    rightNavItems: function () {
+      if(this.sum>0){
+        return  this.navTree.slice('-'+this.sum);
+      }else{
+        return {}
+      }
+      
+    }
   },
   data() {
     return {
+      sum:null,
+      datawidth:1903,
+      screenWidth: document.body.clientWidth,
       user: {
         id: "",
         name: "Yasepix",
@@ -112,6 +135,20 @@ export default {
       langVisible: false
     }
   },
+  watch: {
+    screenWidth(newValue) {
+        this.sum=Math.ceil((this.datawidth-newValue)/70)
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      if (!this.timer) {
+        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
+        // this.screenWidth = newValue;
+        this.timer = true;
+        setTimeout(() => {
+          this.timer = false;
+        }, 400);
+      }
+    }
+  },
   methods: {
     openWindow(url) {
       window.open(url)
@@ -136,6 +173,9 @@ export default {
     },
   },
   mounted() {
+    window.onresize = () => {
+      this.screenWidth = document.body.clientWidth
+    }
     this.sysName = "Zgdd Platform";
     // var user = sessionStorage.getItem("user")
     var user = Cookies.get("user")
@@ -239,4 +279,9 @@ export default {
 .position-collapse-left {
   left: 65px;
 }
+/deep/{
+  .el-submenu__icon-arrow {
+    color: #fff;
+  }
+}
 </style>