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 相关文章推荐
javascript 动态生成私有变量访问器
Dec 06 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
javascript截取字符串小结
Apr 28 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
Angular实现表单验证功能
Nov 13 Javascript
微信小程序实现刷脸登录
May 25 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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
PHP无敌近乎加密方式!
2010/07/17 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php连接mysql数据库
2017/03/21 PHP
php实现文章评论系统
2019/02/18 PHP
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
python 变量初始化空列表的例子
2019/11/28 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
智能钱包:Ekster
2019/11/21 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
初中学生操行评语
2014/12/26 职场文书
认真学习保证书
2015/02/26 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers