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


Posted in Javascript onMay 05, 2019

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

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

看下效果图

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

这是展开的效果图

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

下面先看下我的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;
    }

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

这是我展示的菜单的部分,主要的思路是看这部分的高度是不是超出一行的高度,如果是超出一行的高度,则让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数据超出单行显示更多,点击展开剩余数据详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
JS定义类的六种方式详解
May 12 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
JS实现简易日历效果
Jan 25 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 #Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 #Javascript
浅谈Node 异步IO和事件循环
May 05 #Javascript
vue的列表交错过渡实现代码示例
May 05 #Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 #Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 #Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 #Javascript
You might like
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
在php中取得image按钮传递的name值
2006/10/09 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
动态表格Table类的实现
2009/08/26 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python实现随机选择元素功能
2017/09/14 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
自动化系在校本科生求职信
2013/10/23 职场文书
应届生求职推荐信
2013/10/28 职场文书
什么是岗位职责
2013/11/12 职场文书
学生安全教育材料
2014/02/14 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
经典祝酒词大全
2015/08/12 职场文书
创业计划书之书店
2019/09/10 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
Python制作表白爱心合集
2022/01/22 Python