实现菜单过多滑动显示效果

<template>
  <div class="tab-menu-wrapper">
    <div class="btn" @click="handlePre($event)">&lt;</div>
    <div class="tab-menu-block" ref="tabmeunwrap">
      <div class="tab-menu-inner" ref="tabmeun">
        <div @click="currInd=index" :class="['item',{'active':currInd==index}]" v-for="(item, index) in testList" :key="index">
          {
   
   { item + '' + index }}
        </div>
      </div>
    </div>
    <div class="btn" @click="handleNext">&gt;</div>
  </div>
</template>

<script  lang="ts" setup>
import {
  ref,
  toRefs,
  watch,
  reactive,
  computed,
  onMounted,
  getCurrentInstance
} from 'vue';
const testList: any = ref();
const currInd = ref(0);
testList.value = Array(30).fill('测试测试测认识');
const changeMenuTab = (arg: any) => {
  currInd.value = arg;
};
const handlePre = (e: any) => {
  console.log(e);
  if (currInd.value > 0) {
    currInd.value--;
    getLocInfo();
  }
};
const handleNext = () => {
  if (currInd.value < testList.value.length - 1) {
    currInd.value++;
    getLocInfo();
  }
};
let currentInstance: any = getCurrentInstance();
const getLocInfo = () => {
  const left = currentInstance.ctx.$refs.tabmeun.querySelectorAll(
    "div[class='item active']"
  )[0].offsetLeft;
  const width = currentInstance.ctx.$refs.tabmeun.querySelectorAll(
    "div[class='item active']"
  )[0].offsetWidth;
  const all = left + width;
  const wrapWidth = currentInstance.ctx.$refs.tabmeunwrap.offsetWidth;
  if (all - wrapWidth > 0) {
    const px = wrapWidth - all - 130 + 'px';
    console.log(px);
    currentInstance.ctx.$refs.tabmeun.style.left = px;
  } else if (left < wrapWidth) {
    currentInstance.ctx.$refs.tabmeun.style.left = '0px';
  }
};
</script>
<style lang="less" scoped>
.tab-menu-wrapper {
  display: flex;
  .btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #666;
    font-size: 20px;
    flex-shrink: 0;
    text-align: center;
    &:hover{
        cursor: pointer;
    }
  }
  .tab-menu-block{
    flex: auto;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    height: 40px;
    line-height: 40px;
     .tab-menu-inner{
        display: flex;
        position: absolute;
        left: 0;
        .item{
            display: inline-block;
            margin-left: 20px;
            flex-shrink: 0;
            &:hover{
                cursor: pointer;
            }
        }
        .active{
            color: dodgerblue;
        }
     }
  }
}
</style>