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>

data () {return {isactive: 0, //点击分组标签chatMore: false,maskShow: false, //遮罩是否hasMoreBtn: false, // 是否超出两行showMore: false, // 是否groupList: [], //话术分组标签列表groupListBack: [], //备份groupIdList: [], //备份};},

获取父容器所有的子节点,然后进行遍历操作，根据子节点的offsetLeft属性进行判断，因为最左边的那个节点的offsetLeft永远是0，所以可以判断出现了几行，超过2行截断数据。

// 计算有几行标签 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);}});},

文本自适应宽度，给内容padding，和固定高度；这里的分组标签是后台传来的，有最大字数限制，所以就没有写只显示一行。

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

当显示全部数据时显示遮罩层，点击标签置于首位，所以上面多了些判断，若不需要去掉即可。
参考：类似京东淘宝历史搜索自适应长度搜索项超两行折叠功能实现

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

类似京东淘宝历史搜索自适应长度搜索项超两行折叠功能实现
搜索的时候记录用户搜索历史,开始为了开发方便固定了每个搜索项的宽度,每行固定展示几项,类似下图: 但这样虽然开发简单但用户体验肯定不好,如果搜索项比较短的话显示尚且完整,若搜索内容略长,就完全看不出自 ...
仿闲鱼的搜索历史遇到的一些问题
在模仿闲鱼的搜索历史中,需要将结果保存在本地,并且有如下要求: ①搜索结果倒序展示,即最新的搜索结果展示在最上边 ②搜索结果不能重复 ③最多存储10条本地存储需要用到FMDB,先说下其它的 1.使用 ...
vue仿PC端163music图片滚动组件
介绍这是一款模仿PC端网易云音乐的vue图片滚动插件 http://blog.shanamaid.top/2017/03/03/vue%E4%BB%BFPC%E7%AB%AF163music%E5% ...
vue仿移动端音乐播放器
工作之余查了很多资料一步步摸索出来的,先感谢各位大佬. 仿QQ音乐做的,不是100%还原,不过基本原理都在这了,结合之前的歌词滚动组件一起使用页面布局拆分总体分为 1顶部歌名+歌手的top-bar ...
Vue仿移动端喵喵电影项目解析
项目预览地址:https://huyiling1111.gitee.io/myproject github源码地址:https://github.com/huyiling1111/myproject. ...
vue仿淘宝京东商品多条件筛选（vue实现）
<template><div id="warp">你选择的是:<mark v-for="(item,index) in arr"& ...
vue封装echarts并实现大小动态自适应变化---超有用哇
一.先看效果: 大家好呀,⭐⭐⭐⭐⭐,秉着分享快乐的原则,我又来啦~ echarts不就是去官网复制然后粘贴吗,为什么要封装? 1.减少代码量,每次只要传宽度,高度与option配置项便能快速生成图表 ...
vue用户行为收集_vue 实现移动端键盘搜索事件监听
1.首先注意,input的type="serch" 2.监听keypress事件 (1)KeyDown.KeyUp 事件这些事件是当一个对象具有焦点时按下 ( KeyDown ) ...
移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址
效果图: 在public文件夹下的index.html文件中head标签下加上script标签如下: <script type="text/javascript">wi ...

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

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

最新文章

热门文章