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>

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值