vuejs数据超出单行显示更多,点击展开剩余数据

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ygy211715/article/details/84636831

说下我在工作中遇到的这个需求

1:页面上的菜单选项,选项内容是后台接口返回的数据,现在的需求是当选项的内容超出一行,在这行的右面显示更多,点击更多,显示剩下的选项的内容

看下效果图

这是展开的效果图

下面先看下我的html部分代码

<div :class="bussinessType?'show':'hidde'">
					<dl>
						<dt>业务类型:</dt>
						<dd  ref="bussinessTypeRef">
							<a href="javascript:void(0)" name="" 
							@click="getchildMenu($event)" class="active">全部</a>
							<a href="javascript:void(0)" :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)" name="" 
							@click="getchildMenu($event)" class="active">全部</a>
							<a href="javascript:void(0)" :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;
	}

 

展开阅读全文

没有更多推荐了,返回首页