vuejs数据超出单行显示更多,点击展开剩余数据实例
2019-05-25 18:02
2819 查看
说下我在工作中遇到的这个需求
1:页面上的菜单选项,选项内容是后台接口返回的数据,现在的需求是当选项的内容超出一行,在这行的右面显示更多,点击更多,显示剩下的选项的内容
看下效果图
这是展开的效果图
下面先看下我的html部分代码
<div :class="bussinessType?'show':'hidde'"> <dl> <dt>业务类型:</dt> <dd ref="bussinessTypeRef"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="" @click="getchildMenu($event)" class="active">全部</a> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" :name="item.code" v-for="item in projectType" @click="getchildMenu($event)">{{item.name}}</a> </dd> <i class="unfold" @click="bussinessType = !bussinessType" v-show="bussinessHeight>40"> {{ bussinessType ? '收起' : '更多'}} <Icon :type="bussinessType?'chevron-down':'chevron-up'" ></Icon> </i> </dl> </div>
说下原理show就是展开的时候使用的样式名称,hide是显示一行是使用的样式(主要就是控制容器高度)
.show{ height: auto; border-bottom: 1px solid #ebebeb; } .hidde{ height: 40px; overflow: hidden; border-bottom: 1px solid #ebebeb; }
这是我展示的菜单的部分,主要的思路是看这部分的高度是不是超出一行的高度,如果是超出一行的高度,则让dl外的div默认使用hide的样式
那么问题来了,怎么知道展示菜单的dd部分的高度超出一行了呢?
这就需要使用vuejs的watch来实现了
首先,watch监听ref是bussinessTypeRef的组件的高度(内容多的话自然dd容易会被撑高),这时候与一行的高度(我这里设置的是40)作比较,如果超出,就让更多的文字按钮显示出来。下面是监听dd内容高度的watch方法
projectType: function () { this.$nextTick(function(){ let cur = this.$refs['bussinessTypeRef']; if(cur){ this.bussinessHeight = cur.clientHeight; } }); },
这时候更多文字按钮显示,我们就控制dl外层的div容器,让该容器使用hide的样式,点击更多的时候,让控制显示更多的变量变为相反的值,这样让收起显示出来,更多消失,同时让外层的div容器使用show的样式。这样一来就实现了文字超出一行显示更多,点击收起的交互效果。
下面附上完整的代码供参考
<div :class="bussinessType?'show':'hidde'"> <dl> <dt>业务类型:</dt> <dd ref="bussinessTypeRef"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="" @click="getchildMenu($event)" class="active">全部</a> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" :name="item.code" v-for="item in projectType" @click="getchildMenu($event)">{{item.name}}</a> </dd> <i class="unfold" @click="bussinessType = !bussinessType" v-show="bussinessHeight>40"> {{ bussinessType ? '收起' : '更多'}} <Icon :type="bussinessType?'chevron-down':'chevron-up'" ></Icon> </i> </dl> </div> // 行业 businessType: function () { this.$nextTick(function(){ let cur = this.$refs['industryRef']; if(cur){ this.industryHeight = cur.clientHeight; } }); }, .show{ height: auto; border-bottom: 1px solid #ebebeb; } .hidde{ height: 40px; overflow: hidden; border-bottom: 1px solid #ebebeb; } .list-filter { position: relative; margin-bottom: 20px; font-size: 14px; } .list-filter dl { overflow: hidden; } .list-filter dt { float: left; font-weight: 400; height: 40px; line-height: 40px; } .list-filter dd { margin-left: 30px; float: left; width: 85%; line-height: 40px; } .unfold{ font-size: 14px; color: #00A971; cursor: pointer; font-style: normal; vertical-align: middle; display: inline-block; height: 40px; line-height: 40px; } .list-filter a { color: #333; display: inline-block; margin-right: 20px; padding: 0 5px; text-decoration: none; line-height: 2em; z-index: 0; }
以上所述是小编给大家介绍的vuejs数据超出单行显示更多,点击展开剩余数据详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- Vue.js 点击按钮显示/隐藏内容 实例
- Vue.js 点击按钮显示/隐藏内容的实例代码
- vue 点击展开显示更多(点击收起部分隐藏)
- thinkphp使用js实现点击加载更多后, 底部无刷新加载出新的数据并显示在该页
- 如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮
- 点击加载更多(适用于listview在scrollview单行显示修正后多数据加载慢的情况)
- vue 点击展开显示更多 点击收起部分隐藏
- vue内容很多时保证只有一定的高度,点击查看更多再展开所有的
- vue点击展开更多,点击收起
- 【js实例】js实现点击标题标签切换显示对应内容
- node.js+mysql把数据显示到前端简单实例
- JS点击事件删除单行数据
- 解决使用Vue.js显示数据的时,页面闪现原始代码
- 动态计算TextView宽度,点击展开更过,类似滴滴打车标题点击弹窗显示更多
- js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
- vue.js遇到的问题-数组数据改变,页面不能实时显示
- JS实现点击复选框变更DIV显示状态实例
- vue.js 列表数据加载更多
- 转:详解iPhone Tableview分批显示数据 点击加载更多
- vue.js获取数据库数据实例代码