扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
说下我在工作中遇到的这个需求
成都创新互联公司服务项目包括云浮网站建设、云浮网站制作、云浮网页制作以及云浮网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，云浮网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到云浮省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
1：页面上的菜单选项，选项内容是后台接口返回的数据，现在的需求是当选项的内容超出一行，在这行的右面显示更多，点击更多，显示剩下的选项的内容
看下效果图
这是展开的效果图
下面先看下我的html部分代码
- 业务类型:
- 全部 {{item.name}}
{{ bussinessType ? '收起' : '更多'}}
说下原理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的样式。这样一来就实现了文字超出一行显示更多，点击收起的交互效果。
下面附上完整的代码供参考
// 行业 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; }
- 业务类型:
- 全部 {{item.name}}
{{ bussinessType ? '收起' : '更多'}}
以上所述是小编给大家介绍的vuejs数据超出单行显示更多，点击展开剩余数据详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网