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

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

代码片段如下：

<!-- 分组 -->
<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>

<script>
  export default {
    data() {
      return {
        isactive: 0, //点击分组标签
        chatMore: false,
        maskShow: false, //遮罩是否
        hasMoreBtn: false, // 是否超出两行
        showMore: false, // 是否
        groupList: [], //话术分组标签列表
        groupListBack: [], //备份
        groupIdList: [], //备份
      };
    },
    methods: {
      // 计算有几行标签 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);
          }
        });
      }
    }
  }

</script>

.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;
  }
}

参考链接：blog.csdn.net/crazyxiaoyu…