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 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
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
php 在文件指定行插入数据的代码
2010/05/08 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
Python同时迭代多个序列的方法
2020/07/28 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
公司委托书范本5篇
2014/09/20 职场文书
购房个人委托书范本
2014/10/11 职场文书
公司车队管理制度
2015/08/04 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
js实现模拟购物商城案例
2021/05/18 Javascript