【VUE】el-menu导航菜单过长、过多 超出窗口宽度 添加左右滚动按钮实现左右滚动效果

本文为原创文章，转载需注明出处~~

 

效果图：

项目需求：如果一级菜单过多，需要出现滚动点击按钮。

准备工作：考虑到使用swiper插件，但swiper-slider必须是swiper-wrapper的第一子节点，el-menu没办法套用，放弃！决定自己写：

html：

 

 

 

关键css：

<-- 按钮样式 -->
.swiperMenu {
  position: relative;
  overflow: hidden;
  padding-right: 74px !important;
  .moveBtn {
    position: absolute;
    right: 0;
    top: 0;
    height: $--menu-height;
    z-index: 1;
    .move {
      width: 36px;
      height: 100%;
      background: #0444AE;
      float: left;
      display: grid;
      grid-template-rows: 70% 30%;
      justify-items: center;
      &:hover {
        .moveImg {
          width: 15px;
          height: 24px;
          margin-top: 18px;
          opacity: 1;
          cursor: pointer;
        }
        .moveImgnone {
          opacity: 0.2;
          cursor: auto;
        }
      }
      .moveImg {
        width: 15px;
        height: 24px;
        margin-top: 18px;
        opacity: 0.5;
      }
      .moveImgnone {
        opacity: 0.2;
      }
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: #0957DA;
        border-radius: 1px;
        font-size: 12px;
        font-family: Helvetica;
        color: #FFFFFF;
        text-align: center;
      }
    }
    .lineBox {
      float: left;
      background: #0444AE;
      height: $--menu-height;
      div {
        background: #fff;
        opacity: 0.2;
        width: 1px;
        height: 48px;
        margin-top: 14px;
      }
    }
  }
}

<-- 将el-menu下的ul标签横向被li撑开。重点重点！！！！！！！！！！ -->
.el-menu-demo {
  overflow: hidden;
  white-space: nowrap;
  scroll-behavior: smooth; // 实现缓动动画效果
  .el-submenu {
    display: inline-block;
    float: none;
    width: 114px;
  }
}

JS：

  data () {
    return {
      updateTopMenuActive: 0,
      show: true,
      copy_Menus: [],
      resizeTick: false,
      firstMenuChange: false,
      templateMoreAlias: '_templateMoreMenu', //临时更多目录的别名
      activeMenuIndex: sessionStorage.activeMenuIndex || '/home', //默认选择首页
      allWidth: 0, // 菜单ul总宽度
      leftNum: 0, // 左边菜单隐藏个数
      rightNum: 0, // 右边菜单隐藏个数
      boxLength: 0, // 可视窗口宽度
      moveBtnWidth: 0, // 按钮盒子宽度
      firstMenuWidth: 80, // 第一个菜单的宽度（首页）
      eveyMenuWidth: 114, // 每一个菜单的宽度
    }
  },

 
  watch: {
    boxLength(val) {
      if(this.allWidth > val) {
        // 右边隐藏个数 = 总共菜单的个数 - 左边隐藏的个数 - 右边隐藏宽度/114
        this.rightNum = this.copy_Menus.length - Math.ceil((this.boxLength-this.firstMenuWidth)/this.eveyMenuWidth) - this.leftNum
      } else {
        this.rightNum = 0
      }
    }
  },

 
  methods: {
    // 菜单右侧移动按钮
    toRightMove(num) {
      let menuscrollLeft = document.getElementById('menuUl').scrollLeft
      if(num > 0) {
        if(menuscrollLeft == 0) {
          // document.getElementById('menuUl').scrollLeft = this.firstMenuWidth
          document.getElementById('menuUl').scrollLeft = this.eveyMenuWidth
        } else {
          document.getElementById('menuUl').scrollLeft += this.eveyMenuWidth
        }
        this.rightNum--
        this.leftNum++
      }
    },
    // 菜单左侧移动按钮
    toLeftMove(num) {
      let menuscrollLeft = document.getElementById('menuUl').scrollLeft
      if(num > 0) {
        if(menuscrollLeft > this.firstMenuWidth) {
          document.getElementById('menuUl').scrollLeft -= this.eveyMenuWidth
        } else {
          document.getElementById('menuUl').scrollLeft = 0
        }
        this.rightNum++
        this.leftNum--
      }
    },

    initMenus (newVal, oldVal) {
      // ---------------------此处省略其他代码-----------------------------
      this.$nextTick(() => {
        // 按钮盒子宽度
        this.moveBtnWidth = document.getElementById('moveBtn').offsetWidth
        // 可视窗口宽度 = 大盒子宽度 - 按钮盒子宽度
        this.boxLength = document.getElementById('swiperMenu').offsetWidth - this.moveBtnWidth
        // 菜单总长度
        this.allWidth = (this.copy_Menus.length - 1) * this.eveyMenuWidth + this.firstMenuWidth
       
        if(this.allWidth > this.boxLength) {
          this.rightNum = this.copy_Menus.length - Math.ceil((this.boxLength-this.firstMenuWidth)/this.eveyMenuWidth)
        } else {
          this.rightNum = 0
        }


      })
    },


 }

  created () {

    this.initMenus()

　　// 监听页面窗口变化

    window.addEventListener('resize',function(){

      _this.boxLength = document.getElementById('swiperMenu').offsetWidth;

    })

  }