vue 循环遍历的tag过长截断

<template>
  <div class="container-wrapper">
    <h1>测试</h1>
    <div class="tabs">
      <div class="tab-wrapper" ref="domRef">
        <div class="item" v-for="(item, index) in list" :key="index">
          {{ item.label }}
        </div>
      </div>
    </div>
  </div>
  <div class="test" ref="testdomRef"></div>
</template>

<script setup lang="ts">
import { ref, computed, watch, watchEffect, nextTick, onMounted } from 'vue'
const list = ref([
  {
    id: 1,
    label: 'zhangchenyuan',
  },
  {
    id: 2,
    label: 'ccc',
  },
  {
    id: 3,
    label: 'haha',
  },
  {
    id: 4,
    label: 'server/platform',
  },
  {
    id: 5,
    label: 'Liknked to (search your want)',
  },
])
const domRef = ref()
watchEffect(() => {
  nextTick(() => {
    if (domRef.value.offsetWidth) {
      // console.log(domRef.value.offsetWidth, 'domRef')
      var childElements = domRef.value.children
      var totalWidth = 0
      for (var i = 0; i < childElements.length; i++) {
        totalWidth += childElements[i].offsetWidth
        if (totalWidth > 500) {
          console.log(i)
          list.value = list.value.slice(0, i)
          console.log(childElements[i], 'childElements[i]')
        }
      }
      var threshold = 100 // 定义阈值

      if (totalWidth > 500 + threshold) {
        // 父元素超过一定宽度
        // 执行相应的操作，例如显示弹窗
      }
    }
  })
})
// 多个按钮 父元素超过一定宽度 把超出的部分放在弹窗里
const testdomRef = ref()

onMounted(() => {})
</script>

<style scoped lang="less">
.container-wrapper {
  .tabs {
    height: 48px;
    background-color: pink;
    gap: 8px;
    .tab-wrapper {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      height: 42px;
      .item {
        padding: 0 24px;
        background-color: skyblue;
      }
    }
  }
}
</style>