Vue3-H5页面结合Vant实现搜索历史记录超过两行的Tag的展开与折叠
文章目录问题描述效果解决思路代码1.html代码Js代码问题描述一个场景,在搜索记录的时候,搜索记录作为一个tag列表,超过两行的时候要折叠,然后支持展开效果先看一下效果图,因为只是demo,没有做展开收起的图标切换解决思路1.可以使用容器宽度跟每一个tag的长度去比较,加起来超过一行的时候,行数+1的方法,但是这里是用了容器用了padding 拿不到容器的width值,计算会不准确2.使用offsetLeft,每行的第一个的offetLeft值都是一样的,所以用着这个来判断行数代码1
原创
2022-03-18 22:19:18 ·
2233 阅读 ·
1 评论