vue仿移动端京东搜索历史自适应长度超两行折叠功能

朴灿烈づ我的快乐病毒、 2022-11-19 07:45 48阅读 0赞

1.根据文本自适应宽度  
2.标签超出两行显示两行  
3.展开收起箭头按钮永远置于末位，若只有两行则箭头按钮隐藏，若超出两行，将箭头符号置于第二行的末位  
效果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 1]

<div class="header" ref="lableGroup" :class="chatMore ? 'chat-group-mask' : 'chat-group'">
      <div :class="chatMore ? 'chat-group-con-mask' : 'chat-group-con'">
        <div class="lable-group" :class="isactive == item.id ? 'lable-group-active' : 'lable-group'" v-for="(item, index) in groupList" :key="item.id" @click="getLable(item, index)" :ref="item.id">
          <span class="lable">{ {  item.groupName }}</span>
        </div>
        <span class="last-lable" @click="showPopup" v-if="hasMoreBtn && showMore">
          <i class="iconfont iconfangxiangjiantou" :class="chatMore ? 'directionTop' : ''"></i>
        </span>
      </div>
    </div>
    
    <div class="mask" v-if="maskShow" @click="showPopup"></div>

data () { 
        return { 
          isactive: 0, //点击分组标签
          chatMore: false,
          maskShow: false, //遮罩是否
          hasMoreBtn: false, // 是否超出两行
          showMore: false, // 是否
          groupList: [], //话术分组标签列表
          groupListBack: [], //备份
          groupIdList: [], //备份
        };
      },

获取父容器所有的子节点,然后进行遍历操作，根据子节点的offsetLeft属性进行判断，因为最左边的那个节点的offsetLeft永远是0，所以可以判断出现了几行，超过2行截断数据。

// 计算有几行标签 classNa 父容器样式名称
        toggleHistoryData () { 
          let idx = 0;
          let count = 0;
          let iIndex0 = 0;
          this.$nextTick(() => { 
            let ulChid = document.querySelector(".chat-group-con").childNodes; //获取父容器所有子节点
            console.log("ulChid", ulChid);
            ulChid.forEach((i, index) => { 
              if (index === 0) { 
                iIndex0 = i.offsetLeft;
              }
              if (i.offsetLeft === iIndex0) { 
                count++;
                if (count === 3) { 
                  idx = index - 1;
                  this.hasMoreBtn = true;
                  this.showMore = true;
                }
              }
            });
            // 超过2行截断数据
            if (idx > 0) { 
              this.groupList = [...new Set(this.groupListBack)].slice(0, idx);
            }
          });
        },

文本自适应宽度，给内容padding，和固定高度；这里的分组标签是后台传来的，有最大字数限制，所以就没有写只显示一行。

.lable-group {
        height: 28px;
        line-height: 28px;
        border-radius: 4px;
        border: 1px solid #dfdfdf;
        margin-right: 10px;
        margin-bottom: 11px;
        background: #ffffff;
        overflow: hidden;
        .lable {
          padding: 0 8px;
          font-size: 14px;
          color: #131313;
          overflow: hidden;
          cursor: pointer;
        }
    }

当显示全部数据时显示遮罩层，点击标签置于首位，所以上面多了些判断，若不需要去掉即可。  
参考：[类似京东淘宝历史搜索自适应长度搜索项超两行折叠功能实现][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210127114547986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 1]: /images/20221119/d0e918e4ee604ecaa4f3ab1f0abbbc8c.png
[Link 1]: https://blog.csdn.net/crazyxiaoyuge/article/details/108670456