RuoYi
2021-04-14 cc50224d90b3a71b8cbab892faaa4ff82f0d9399
固定顶部导航栏&窗口大小改变实时更新栏数
已修改2个文件
24 ■■■■■ 文件已修改
ruoyi-ui/src/components/TopNav/index.vue 17 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
ruoyi-ui/src/layout/components/Navbar.vue 7 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
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) {
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;