vue H5页面实现搜索历史记录超过两行的Tag的展开与折叠

9 篇文章 0 订阅

最近项目中遇到一个场景,搜索页面搜索历史记录超过两行要折叠,同时可以展开显示所有的历史记录。
实现方法:判断每个标签的offsetLeft,每行的offsetLeft相同,依据这个判断当前有多少行。

代码

html代码
      <div class="search-new-history-content">
        <div class="search-new-history-content-top" :class="[textToggle ? '' : 'active']" ref="historyRef">
          <span v-for="(item,index) in historyTag" :key="index" ref="tagRef" @click="clickTag(item)"
                :class="[item.title === '展开' || item.title === '收起'? 'chu' : '']">
            {{ item.title }}
            <img v-if="item.title === '展开'" src="/static/bytx/subject/more_down.svg" alt="">
            <img v-if="item.title === '收起'" src="/static/bytx/subject/more_up.svg" alt="">
          </span>
        </div>
      </div>
css
    &-content{
      position: relative;
      padding-left: 20px;
      padding-right: 20px;
      &-top{
         margin-top: 16px;
        span{
          display: inline-block;
          padding: 8px 12px 10px 8px;
          border-radius: 6px;
          margin-right: 12px;
          word-break: keep-all;
          background: #F5F6F7;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #282828;
          line-height: 20px;
        }
        .chu{
          display: inline-block;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9D9D9D;
          background: transparent;
          padding: 0;
          vertical-align: middle;
          img{
            transform: translateY(2px);
          }
        }
      }
      .active{
        height: auto;
        overflow: visible;
      }
    }
js
    this.historyTag = [{id: 0, title: '血液病'},{id: 7, title: '血液病有哪几种'},
            {id: 3, title: '儿童淋巴瘤'}, {id: 4, title: '喉咙痛声音嘶哑'}, {id: 5, title: '咽喉癌的早期症状'},
            {id: 6, title: '成人淋巴癌'},{id: 1, title: '肺癌'},{id: 2, title: '白血病'}
          ]
  // 首先调用默认收起的方法        
 this.defaultClose()
 // 历史搜索默认收起
    defaultClose() {
      this.$nextTick(() => {
        if (!this.historyTag || !this.historyTag.length) {
          return
        }
        let offsetLeft = 0;
        this.line = 0
        let tags = this.$refs.tagRef
        tags.forEach((item,index) => {
          if (index === 0) {
            this.line = 1
            offsetLeft = item.offsetLeft
          } else if (item.offsetLeft === offsetLeft) {
          // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
            this.line++
          }
          if (this.line > 1) {
          // 从第2行开始  设置marginTop
            item.style.marginTop = 12 + 'px'
          }
          if (this.line > 2) {
          	//从第3行开始 隐藏标签 
            item.style.display = 'none'
            // 显示展开按钮  class名chu是在前面动态添加的
            if (item.className === 'chu') {
              item.style.display = 'inline-block'
              item.style.marginTop = 0 + 'px'
            }
          }
        })
        if (this.line > 2) {
        	// 超过2行  手动添加“展开”按钮
          this.historyTag.push({id:0, title: '展开'})
        }
        let index = this.historyTag.findIndex((item) => {
          return item.title === '收起'
        })
        // 折叠状态  删除“收起”按钮
        if (index > -1) {
          this.historyTag.splice(index, 1)
        }

      })

    },
    // 历史搜索展开
    openAll() {
      let tags = this.$refs.tagRef
      let index = this.historyTag.findIndex((item) => {
        return item.title === '展开'
      })
      // 展开状态  删除“展开”按钮
      this.historyTag.splice(index, 1, )
      // 添加“收起”按钮
      this.historyTag.splice(tags.length - 1, 0, {id:0, title: '收起'})
      // 将所有的标签都显示
      tags.forEach((item,index) => {
        item.style.display = 'inline-block'
      })
    }

    // 点击某个历史搜索
    clickTag(item) {
      if (item.title === '展开') {
        this.openAll()
      } else if (item.title === '收起') {
        this.defaultClose()
      } else {
       	
      }

    }

实现效果

在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值