dianliang/dl-sale-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

固定顶部导航栏&窗口大小改变实时更新栏数

Browse Source
This commit is contained in:
RuoYi 2021-04-14 11:01:16 +08:00
parent ff09e1cf55
commit cc50224d90
2 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ruoyi-ui/src/components/TopNav/index.vue
View File

@ -95,21 +95,20 @@ export default {
return activePath; return activePath;
}, },
}, },
beforeMount() {
window.addEventListener('resize', this.setVisibleNumber)
},
beforeDestroy() {
window.removeEventListener('resize', this.setVisibleNumber)
},
mounted() { mounted() {
this.setVisibleNumber(); this.setVisibleNumber();
}, },
methods: { methods: {
// 根据宽度计算设置显示栏数 // 根据宽度计算设置显示栏数
setVisibleNumber() { setVisibleNumber() {
const width = document.body.getBoundingClientRect().width - 380; const width = document.body.getBoundingClientRect().width / 3;
const elWidth = this.$el.getBoundingClientRect().width; this.visibleNumber = parseInt(width / 85);
const menuItemNodes = this.$el.children;
const menuWidth = Array.from(menuItemNodes).map(
(i) => i.getBoundingClientRect().width
);
this.visibleNumber = (
parseInt(width - elWidth) / parseInt(menuWidth)
).toFixed(0);
}, },
// 菜单选择事件 // 菜单选择事件
handleSelect(key, keyPath) { handleSelect(key, keyPath) {

7
ruoyi-ui/src/layout/components/Navbar.vue
View File

@ -3,7 +3,7 @@
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> <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"> <div class="right-menu">
<template v-if="device!=='mobile'"> <template v-if="device!=='mobile'">
@ -135,6 +135,11 @@ export default {
float: left; float: left;
} }
.topmenu-container {
position: absolute;
left: 50px;
}
.errLog-container { .errLog-container {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;