固定顶部导航栏&窗口大小改变实时更新栏数
This commit is contained in:
parent
ff09e1cf55
commit
cc50224d90
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue