vue3中横向菜单项过多时添加左右箭头实现菜单滚动翻页

需求背景

本来是使用的element-plus的UI框架，横向菜单模式，但菜单项比较多，希望能点击菜单能向后面滑动，看到网上有类似案例，所以我借鉴一些案例实现了这个功能，也是做个记录了

效果图

具体实现

html部分

      <!-- 水平一级菜单 -->
      <div class="menu" ref="menuRef" >    
        <!-- 实际宽度大于可视宽度时才显示左右箭头 -->
        <el-icon v-if="menuRealWidth>menuViewWidth" class="left-arrow" @click="navPrev"><ArrowLeft /></el-icon>         
        <el-menu 
          :style="{transform:'translateX(-'+move+'px)'}"
          class="el-menu"
          mode="horizontal"
          text-color="#000000"
          active-text-color="#3989fa"
          :default-active="toIndex" 
          @select="handleSelect">
         
          <el-menu-item v-for="(item, index) in menuList" :index="item.path" :key="index">
            <span slot="title">{{ item.meta.title }}</span>
          </el-menu-item>
        </el-menu>  
        <el-icon v-if="menuRealWidth>menuViewWidth" class="right-arrow" @click="navNext" ><ArrowRight /></el-icon>
      </div>

css部分

.header .menu {
  position: relative;
  flex: 1;
  overflow-x: hidden; 
  white-space: nowrap; /* 设置为一行显示，超出部分自动隐藏 */
  display: flex;
  align-items: center;
}
.menu .left-arrow,.menu .right-arrow {
  position: absolute;
  top: 0;
  z-index: 9;
  height: 60px;
  line-height: 60px;
  width: 30px;
  background-color: #fff;
}
.menu .left-arrow {
  left: 0;
}
.menu .right-arrow {
  right: 0;
}
.el-menu.el-menu--horizontal {
  border-bottom: none !important;
  background: transparent;
  transition:all .2s;
}

js部分

import {ref,reactive, computed, onMounted,watch} from 'vue'
const menuRealWidth=ref(0) // 菜单实际宽度
const menuViewWidth=ref(0) // 菜单可视宽度
const move=ref(0) // 可移动的范围
onMounted(()=>{
  menuRealWidth.value=menuRef.value.scrollWidth
  menuViewWidth.value=menuRef.value.offsetWidth
  window.onresize = () => {
        return (() => {
          menuViewWidth.value = menuRef.value.offsetWidth;
            if(move.value>menuRealWidth.value-menuViewWidth.value-88){
                move.value=menuRealWidth.value-menuViewWidth.value;
            }
        })()}
})
const navPrev=()=>{
  // 当菜单项向右的可移动距离大于单个菜单项的宽度时，move减去一个菜单项的宽度（即右移移动一个菜单项的宽度），
	// 当菜单项向右的可移动距离小于单个菜单项的宽度时，move等于0（即回到最开始没有移动的状态）
  if(move.value>88){
        move.value=move.value-88;
    }else{
        move.value=0
    }
}
const navNext=()=>{
  // 当菜单项向左的可移动距离大于单个菜单项的宽度时，move减去一个菜单项的宽度（即左移移动一个菜单项的宽度），
	// 当菜单项向左的可移动距离小于单个菜单项的宽度时，move等于可以向左移动的最大值（即到最末尾）
  if(move.value<menuRealWidth.value-menuViewWidth.value-88){
        move.value=move.value+88
    }
    else{
        move.value=menuRealWidth.value-menuViewWidth.value
    }
}

我在网上看的一些案例基本上都是手写的结构，没有使用UI组件，照着套用的时候，样式那块一直出问题，反正就改来改去，勉强能用

借鉴的案例链接：https://blog.csdn.net/Watanaki/article/details/111060410