标签超过两行折叠，可展开（淘宝搜索历史记录折叠效果）（vue）

最新推荐文章于 2024-06-12 14:27:12 发布

秃秃秃了

最新推荐文章于 2024-06-12 14:27:12 发布

阅读量2.6k

点赞数 2

分类专栏： js需求文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_61285710/article/details/122414801

版权

js需求专栏收录该内容

12 篇文章 0 订阅

订阅专栏

问题：

有时，碰到很多行标签，需要展示的篇幅比较大，例如淘宝搜索的历史记录标签行，如果一下子全部展示很影响美观，我们就有必要使用折叠效果，达到用户需要展开查看全部时再查看。

解决：

1. 获取父容器所有的子节点,然后进行遍历操作，根据子节点的offsetLeft属性进行判断。

2. 因为最左边的那个节点的offsetLeft永远是0，所以可以判断出现了几行，超过2行截断数据。

3.根据自己需要展示的行数，截断数据数组，展开时恢复所有标签（以下代码根据两行做展示）

代码：

<div id="tagList" class="tagList fss fw">
    <div v-for="(item, index) in qwCorpTagOld" :key="item.id + index" class="fs26">
      {{ item.name }}
    </div>
    <div v-if="showBtnZK && showDivZK" class=" fs26 iconfont iconjiantouxia" @click="restoreTags" />
    <div v-else class=" iconfont iconjiantoushang" @click="cuttingTags" />
</div>

// 恢复所有标签
restoreTags(){
  this.qwCorpTagOld = objDeepCopy(this.qwCorpTag)
  this.showBtnZK = false
},
// 切割标签
// 获取父容器所有的子节点,然后进行遍历操作，根据子节点的offsetLeft属性进行判断，
// 因为最左边的那个节点的offsetLeft永远是0，所以可以判断出现了几行，超过2行截断数据。
cuttingTags(){
  let idx = 0;
  let count = 0;
  let iIndex0 = 0;
  this.$nextTick(() => {
      // 获取所有标签节点
    let childTags = document.querySelector('#tagList').childNodes
    childTags.forEach((item,index) => {
        // 把第一个标签的左偏移保存
        // if(index === 0){
        //   // console.log(3333333333333, item.offsetLeft);
        //   iIndex0 = item.offsetLeft
        // }
        // 把第一个标签的左偏移保存，且如果第一个没有值，取下一个
      iIndex0 = iIndex0 ? iIndex0 : item.offsetLeft
      // 判断有几个标签在最左边，iIndex0判断第一个要不要作为标准来判断
      if(iIndex0 && item.offsetLeft === iIndex0){
        count++
        if(count === 3){
          idx = index - 1
          this.showDivZK = true
          this.showBtnZK = true
        }
      }
    })
    // 如果idx有值了，就对数组进行切割
    if(idx > 0) {
      this.qwCorpTagOld = [...new Set(this.qwCorpTagOld)].slice(0,idx)
    }
  })
},