菜单切换

README.md

@@ -1,6 +1,3 @@
-<p align="center">
-	<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png">
-</p>
 <h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">IBMS楼宇集成管理平台 v1.0</h1>
 <h4 align="center">基于SpringBoot+Vue3前后端分离的Java快速开发框架</h4>
 ## 前端运行

src/layout/components/Sidebar/index.vue

@@ -1,33 +1,39 @@
 <template>
   <div :class="{ 'has-logo': showLogo }">
     <div class="sidebar_box_bottom">
-      <div>1</div>
-      <div class="menu_bottom_box">
-        <div class="item_box_sidebar" v-for="(item, index) in filteredArray" :key="item.path + index">
-          <div @click="goBack(item.path)">
-            <div class="img_box_item" :class="activeMenu == item.path ? 'activate_img_sidebar' : ''">
-              <svg class="energy_box_icon" aria-hidden="true">
-                <defs>
-                  <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
-                    <stop offset="0%" stop-color="rgb(20, 188, 244)" />
-                    <stop offset="4%" stop-color="rgba(184, 225, 239, 1)" />
-                    <stop offset="100%" stop-color="#ffffff" />
-                  </linearGradient>
-                  <linearGradient id="activate_Gradient" x1="0%" y1="100%" x2="0%" y2="0%">
-                    <stop offset="0%" stop-color="#b68231" />
-                    <stop offset="1%" stop-color="rgb(182, 130, 49)" />
-                    <stop offset="100%" stop-color="#ffffff" />
-                  </linearGradient>
-                </defs>
-                <use :xlink:href="iconName(item.meta.icon)"
-                  :fill="activeMenu == item.path ? `url('#activate_Gradient')` : `url('#myGradient')`" />
-              </svg>
+      <div class="arrow-icon_left" @click="arrowBack">
+        <el-icon size="60" color="#0077fa"><ArrowLeft /></el-icon>
+      </div>
+      <div class="tag-style" ref="tagBox">
+        <div class="menu_bottom_box" ref="scrollWrapper">
+          <div class="item_box_sidebar" v-for="(item, index) in filteredArray" :key="item.path + index">
+            <div @click="goBack(item.path)">
+              <div class="img_box_item" :class="activeMenu == item.path ? 'activate_img_sidebar' : ''">
+                <svg class="energy_box_icon" aria-hidden="true">
+                  <defs>
+                    <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                      <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                      <stop offset="4%" stop-color="rgba(184, 225, 239, 1)" />
+                      <stop offset="100%" stop-color="#ffffff" />
+                    </linearGradient>
+                    <linearGradient id="activate_Gradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                      <stop offset="0%" stop-color="#b68231" />
+                      <stop offset="1%" stop-color="rgb(182, 130, 49)" />
+                      <stop offset="100%" stop-color="#ffffff" />
+                    </linearGradient>
+                  </defs>
+                  <use :xlink:href="iconName(item.meta.icon)"
+                    :fill="activeMenu == item.path ? `url('#activate_Gradient')` : `url('#myGradient')`" />
+                </svg>
+              </div>
+              <span class="title_sidebar">{{ item.meta.title }}</span>
             </div>
-            <span class="title_sidebar">{{ item.meta.title }}</span>
           </div>
         </div>
       </div>
-      <div>1</div>
+      <div class="arrow-icon_right" @click="arrowForward">
+        <el-icon size="60" color="#0077fa"><ArrowRight /></el-icon>
+      </div>
     </div>
   </div>
 </template>
@@ -38,7 +44,10 @@ import variables from '@/assets/styles/variables.module.scss'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
-
+const tabScroll = ref(0); // 移动的距离
+const showButton = ref(false); // 标签左右两侧箭头是否显示
+const tagBox = ref(null)
+const scrollWrapper = ref(null)
 const route = useRoute();
 const router = useRouter();
 const appStore = useAppStore()
@@ -82,9 +91,48 @@ function iconName(iconClass) {
 }
 
 function goBack(event) {
-  console.log(event, 3434);
   router.push({ path: event || "/" });
 }
+// 向右
+function arrowBack() {
+  if (tabScroll.value > 0) {
+    let diffWidth = tabScroll.value - 100;
+    if (diffWidth > 100) {
+      tabScroll.value = diffWidth;
+    } else {
+      tabScroll.value = 0;// 否则移动到开始位置
+    }
+    scrollWrapper.value.scrollLeft = tabScroll.value
+  }
+}
+// 向左
+function arrowForward() {
+  let scrollWidth = scrollWrapper.value.scrollWidth; //内容宽度
+  let boxWidth = tagBox.value.scrollWidth
+  if (tabScroll.value < (scrollWidth - boxWidth)) {
+    let diffWidth = tabScroll.value + 100;
+    if (diffWidth < scrollWidth) {
+      tabScroll.value = diffWidth
+    } else {
+      tabScroll.value = scrollWidth
+    }
+    scrollWrapper.value.scrollLeft = tabScroll.value
+  }
+}
+
+function checkButtonStatus() {
+  if (!scrollWrapper.value) return;
+  // 盒子的宽度
+  let containerSize = tagBox.value.clientWidth;
+  // 内容的宽度
+  let navSize = scrollWrapper.value.scrollWidth;
+  if (containerSize > navSize || containerSize == navSize) {
+    showButton.value = false;
+  } else {
+    showButton.value = true;
+  }
+}
+checkButtonStatus()
 </script>
 
 <style lang="scss" scoped>
@@ -106,7 +154,16 @@ function goBack(event) {
   display: flex;
   align-items: center;
 }
-
+.arrow-icon_left{
+  position: absolute;
+  bottom: 0;
+  left: -10px;
+}
+.arrow-icon_right{
+  position: absolute;
+  bottom: 0;
+  right: -10px;
+}
 .sidebar_box_bottom::after {
   content: '';
   position: absolute;
@@ -119,6 +176,15 @@ function goBack(event) {
   clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%);
 }
 
+.tag-style {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  pointer-events: all;
+  cursor: pointer;
+  position: relative;
+}
+
 .menu_bottom_box {
   height: 75px;
   display: flex;
@@ -127,6 +193,7 @@ function goBack(event) {
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  transition: scroll-left 0.5s ease;
 }
 
 .item_box_sidebar {