From cc50224d90b3a71b8cbab892faaa4ff82f0d9399 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期三, 14 四月 2021 11:01:16 +0800
Subject: [PATCH] 固定顶部导航栏&窗口大小改变实时更新栏数
---
ruoyi-ui/src/components/TopNav/index.vue | 17 ++++++++---------
ruoyi-ui/src/layout/components/Navbar.vue | 7 ++++++-
2 files changed, 14 insertions(+), 10 deletions(-)
diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue
index 31d06e2..3eebda4 100644
--- a/ruoyi-ui/src/components/TopNav/index.vue
+++ b/ruoyi-ui/src/components/TopNav/index.vue
@@ -95,21 +95,20 @@
return activePath;
},
},
+ beforeMount() {
+ window.addEventListener('resize', this.setVisibleNumber)
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.setVisibleNumber)
+ },
mounted() {
this.setVisibleNumber();
},
methods: {
// 鏍规嵁瀹藉害璁＄畻璁剧疆鏄剧ず鏍忔暟
setVisibleNumber() {
- const width = document.body.getBoundingClientRect().width - 380;
- const elWidth = this.$el.getBoundingClientRect().width;
- const menuItemNodes = this.$el.children;
- const menuWidth = Array.from(menuItemNodes).map(
- (i) => i.getBoundingClientRect().width
- );
- this.visibleNumber = (
- parseInt(width - elWidth) / parseInt(menuWidth)
- ).toFixed(0);
+ const width = document.body.getBoundingClientRect().width / 3;
+ this.visibleNumber = parseInt(width / 85);
},
// 鑿滃崟閫夋嫨浜嬩欢
handleSelect(key, keyPath) {
diff --git a/ruoyi-ui/src/layout/components/Navbar.vue b/ruoyi-ui/src/layout/components/Navbar.vue
index db69e1d..18c89a0 100644
--- a/ruoyi-ui/src/layout/components/Navbar.vue
+++ b/ruoyi-ui/src/layout/components/Navbar.vue
@@ -3,7 +3,7 @@
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
- <top-nav id="topmenu-container" class="breadcrumb-container" v-if="topNav"/>
+ <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
<div class="right-menu">
<template v-if="device!=='mobile'">
@@ -135,6 +135,11 @@
float: left;
}
+ .topmenu-container {
+ position: absolute;
+ left: 50px;
+ }
+
.errLog-container {
display: inline-block;
vertical-align: top;
--
Gitblit v1.9.3