底部快捷菜单路由跳转、快捷菜单抽屉文字显示限制

src/assets/less/drawer.css

@@ -32,6 +32,12 @@
   align-items: center;
   border-radius: 0;
 }
+.selectTag .selected .selectedItem span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+}
 .selectTag .selected /deep/ .ant-tag {
   background-color: white;
   border: none;
@@ -67,7 +73,6 @@
 .searchLine a.active {
   background-color: rgba(19, 116, 206, 0.5);
   border-radius: 10px;
-  color: white !important;
 }
 .searchLine .LevelTwoMenu {
   display: flex;
@@ -86,11 +91,7 @@
 }
 .searchLine .LevelTwoMenu .twoMenuItem a {
   color: #333 !important;
-  text-decoration: none;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.searchLine .LevelTwoMenu .bg {
-  background-color: blue;
-}

src/assets/less/drawer.less

@@ -33,6 +33,12 @@
       justify-content: center;
       align-items: center;
       border-radius: 0;
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+      }
     }
     /deep/ .ant-tag {
       background-color: white;
@@ -68,14 +74,13 @@
 .searchLine {
   margin-top: 100px; //不遮挡 二级菜单
   /deep/ .ant-row {
-    margin: 10px 0; //每个菜单的间距
+    margin: 10px 0; //二级菜单的间距
   }
 
   //选中的样式
   a.active {
     background-color: rgba(19, 116, 206, 0.5);
     border-radius: 10px;
-    color: white !important;
   }
   // 二级菜单
   .LevelTwoMenu {
@@ -91,16 +96,13 @@
       justify-content: center;
       align-items: center;
       margin: 6px;
+      //二级菜单名称
       a {
         color: #333 !important;
-        text-decoration: none;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
     }
-    .bg {
-      background-color: blue;
-    }
   }
 }

src/components/page/GlobalNavFooter.vue

@@ -16,19 +16,17 @@
       <a-col :span="23">
         <transition-group name="animation">
           <div class="shortcut" v-if="isShow" :key="1">
-            <a-row style="textAlign:center;background:rgba(24, 144, 255,.9);">
-              <!-- 设置快捷抽屉 -->
-              <a-col :span="1">
-                <a href="#" @click="showDrawer" class="setBtn">设置快捷</a>
-              </a-col>
-              <!-- 菜单 -->
-              <a-col :span="20">
+            <a-row style="textAlign:;background:rgba(24, 144, 255,.9); ">
+              <!-- 设置快捷 -->
+              <a-col :span="16">
+                <a href="#" @click="showDrawer" class="setBtn" style="float:left;marginRight:6px;">设置快捷</a>
+                <!-- 菜单 -->
                 <div class="nav" v-for="item in selectList" :key="item.id">
-                  <a href="#">{{ item.name }}</a>
+                  <a href="#" @click="menuPuth(item)">{{ item.name }}</a>
                 </div>
               </a-col>
               <!-- 公司名称 -->
-              <a-col :span="3">
+              <a-col :span="8" style="textAlign:right;">
                 <span style="color:#ccc;">上海萃颠信息科技有限公司出品</span>
               </a-col>
             </a-row>
@@ -68,9 +66,10 @@
                   v-for="item in selectList"
                   :closable="true"
                   @close="() => handleClose(item)"
-                  class="selectedItem"
-                >
-                  {{ item.name }}
+                  class="selectedItem">
+                  <span style="width: 8em">
+                    {{ item.name }}
+                  </span>
                 </a-tag>
               </div>
               <!-- 无快捷 -->
@@ -105,7 +104,7 @@
               </a-col>
               <!-- 二级菜单 -->
               <a-col :span="20" class="LevelTwoMenu">
-                <span v-for="item in menu.childList" :key="item.id" class="twoMenuItem">
+                <div v-for="item in menu.childList" :key="item.id" class="twoMenuItem">
                   <a
                     href="#"
                     style="width: 8em"
@@ -114,7 +113,7 @@
                   >
                     {{ item.name }}
                   </a>
-                </span>
+                </div>
               </a-col>
               <a-divider :dashed="true" />
             </a-row>
@@ -168,12 +167,18 @@ export default {
         this.getMenuList() // 所有菜单
     },
     methods: {
-    // 判断是否勾选(参数是菜单 ID)
+    // 底部菜单跳转
+        menuPuth (item) {
+            console.log('点击快捷菜单', item)
+            this.visible = false
+            this.$router.push(item.path)
+        },
+        // 判断是否勾选(参数是菜单 ID)
         getActive (sysPermissionId) {
             let isActive = false // 默认未点击
             this.selectList.forEach(element => {
                 if (sysPermissionId === element.sysPermissionId) {
-                    isActive = true // 点击
+                    isActive = true // 点击变色
                 }
             })
             // console.log(isActive)
@@ -184,7 +189,7 @@ export default {
             // console.log('【点击的菜单】', item.name)
             let isSelect = false // 默认未勾选
             this.selectList.forEach((element, index) => {
-                // 判断是否重复
+                // 判断是否重复点击
                 if (item.sysPermissionId === element.sysPermissionId) {
                     isSelect = true // 勾选
                     this.selectList.splice(index, 1)
@@ -278,9 +283,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
-// 单独抽屉样式  如下
-@import '~@assets/less/drawer.less';
 @import '~@assets/less/common.less';
+// 抽屉样式（独立文件）
+@import '~@assets/less/drawer.less';
+
 // 整个底部导航
 #navFooter {
   width: 100%;
@@ -295,37 +301,35 @@ export default {
   .arrowBtn {
     background: transparent;
     font-size: 26px;
-    padding-left: 32px;
     color: white;
   }
 
   // 可消失行
   .shortcut {
-    // background-color: transparent;
     //设置快捷(文字)
     .setBtn {
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 700;
       color: white;
     }
-    .setBtn:active {
-      color: orange;
-      font-weight: 400;
-    }
+
     // 快捷菜单
     .nav {
       float: left;
-      letter-spacing: 1px;
       a {
-        margin: 10px;
-        font-size: 14px;
+        margin: 0 6px;
+        font-size: 12px;
         color: white;
         font-weight: 700;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
-      a:hover {
-        color: orange;
-        font-weight: 400;
-      }
+    }
+    a.setBtn:hover,
+    a:hover {
+      color: orange;
+      font-weight: 400;
     }
   }