Vue3-H5页面结合Vant实现搜索历史记录超过两行的Tag的展开与折叠

原创

已于 2022-03-18 22:21:23 修改 · 2.5k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-03-18 22:19:18 首次发布

本文介绍了一个在搜索记录中实现标签列表折叠和展开功能的场景。当搜索记录超过两行时，剩余部分将自动折叠，并提供一个展开按钮。通过JavaScript计算每个标签的offsetLeft值来判断行数，实现动态折叠效果。示例代码包括HTML和CSS，展示了一个简单的折叠展开功能的实现。

文章目录

问题描述

一个场景,在搜索记录的时候,搜索记录作为一个tag列表,超过两行的时候要折叠,然后支持展开

效果

先看一下效果图,因为只是demo,没有做展开收起的图标切换
请添加图片描述

解决思路

1.可以使用容器宽度跟每一个tag的长度去比较,加起来超过一行的时候,行数+1的方法,但是这里是用了容器用了padding 拿不到容器的width值,计算会不准确

在这里插入图片描述
2.使用offsetLeft,每行的第一个的offetLeft值都是一样的,所以用着这个来判断行数

代码

1.html代码

<template>
  <div class="history">
    <div
      ref="contentRef"
      class="contentHistory"
    >
      <van-tag
        plain
        :closeable="!isDeleteShow"
        type="primary"
        @close="close"
      >999</van-tag>
      <van-tag
        plain
        :closeable="!isDeleteShow"
        type="primary"
      >感冒灵颗粒</van-tag>
      <van-tag
        plain
        :closeable="!isDeleteShow"
        type="primary"
      >感冒灵颗粒</van-tag>
      <van-tag
        plain
        :closeable="!isDeleteShow"
        type="primary"
      >感冒灵颗粒</van-tag>
      <van-tag
        plain
        :closeable="!isDeleteShow"
        type