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
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
实现Vue表单的历史记录搜索,你可以使用localStorage来存储历史搜索记录,然后在表单中展示这些记录。以下是一个简单的实现示例: 1. 在Vue组件的data中添加一个history数组,用于存储历史搜索记录。 ``` data() { return { history: [] }; } ``` 2. 在表单中添加一个输入框和一个按钮,用于进行搜索。在输入框中添加一个v-model指令,将输入框的值绑定到组件的searchText属性上。按钮的点击事件调用search方法,将搜索内容存储到history数组中。 ``` <template> <div> <input type="text" v-model="searchText" /> <button @click="search">Search</button> </div> </template> <script> export default { data() { return { history: [], searchText: '' }; }, methods: { search() { if (this.searchText) { this.history.push(this.searchText); localStorage.setItem('history', JSON.stringify(this.history)); // perform search } } } }; </script> ``` 3. 在组件的created钩子中,读取localStorage中的历史记录,并将其赋值给history数组。 ``` created() { const history = localStorage.getItem('history'); if (history) { this.history = JSON.parse(history); } } ``` 4. 在表单下方添加一个历史记录列表,展示历史搜索记录。使用v-for指令遍历history数组,将每个搜索记录展示为一个列表项。为了方便用户点击历史记录进行搜索,给每个列表项添加一个@click事件,将点击的记录赋值给searchText属性,并调用search方法进行搜索。 ``` <template> <div> <input type="text" v-model="searchText" /> <button @click="search">Search</button> <ul> <li v-for="record in history" @click="searchText = record; search">{{ record }}</li> </ul> </div> </template> ``` 这样,就可以实现Vue表单的历史记录搜索了。每次进行搜索时,都会将搜索内容存储到localStorage中,下次打开页面时,历史记录会自动加载。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值