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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
如何理解Vue简单状态管理之store模式
May 15 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
党校培训思想汇报
2013/12/30 职场文书
公司管理建议书范文
2014/03/12 职场文书
环保倡议书
2014/04/14 职场文书
室内趣味活动方案
2014/08/24 职场文书
授权委托书
2015/01/28 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
Docker安装MySql8并远程访问的实现
2022/07/07 Servers