vuejs数据超出单行显示更多，点击展开剩余数据实例
更新时间：2019年05月05日 10:56:58 作者：ygy211715
这篇文章主要介绍了vuejs数据超出单行显示更多，点击展开剩余数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
说下我在工作中遇到的这个需求
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数据超出单行显示更多，点击展开剩余数据详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本篇文章主要介绍了详解vue2.0脚手架的webpack 配置文件分析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Echarts 、 Remodal和Pikaday是我们在开发后台管理类网站时常用的三个第三方组件，下面这篇文章主要给大家介绍了关于vue.js如何将echarts封装为组件一键使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-10-10
Vue3中有一对新增的api，provide和inject,熟悉Vue2的朋友应该明,这篇文章主要给大家介绍了关于vue3如何使用provide实现状态管理的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要为大家介绍了简易vuex4核心原理及实现源码分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了Vue3 props的使用详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue安装less-loader依赖失败问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
WebStorm是一款优秀的前端开发IDE,之前一直可以调试Vue项目,下面这篇文章主要给大家介绍了关于使用Webstorm调试Vue代码的详细图文教程,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了Vue axios获取token临时令牌封装案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
vue是一款具有响应式更新机制的框架，既可以实现单向数据流也可以实现数据的双向绑定。这篇文章主要介绍了vue响应式更新机制及不使用框架实现简单的数据双向绑定问题,需要的朋友可以参考下2019-06-06
今天小编就为大家分享一篇vue获取data数据改变前后的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论