自助点餐小程序_vuejs数据超出单行显示更多,点

日期:2021-01-07 类型:行业动态 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

vuejs数据超出单行显示更多,点击展开剩余数据实例       这篇文章主要介绍了vuejs数据超出单行显示更多,点击展开剩余数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

看下效果图

这是展开的效果图

 

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

 div :class="bussinessType 'show':'hidde'" 
 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)" 全部 /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 @click="bussinessType = !bussinessType" 
 v-show="bussinessHeight 40" 
 {{ bussinessType '收起' : '更多'}}
 Icon :type="bussinessType 'chevron-down':'chevron-up'" /Icon 
 /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'" 
 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)" 全部 /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 @click="bussinessType = !bussinessType" 
 v-show="bussinessHeight 40" 
 {{ bussinessType '收起' : '更多'}}
 Icon :type="bussinessType 'chevron-down':'chevron-up'" /Icon 
 /dl 
 /div 

以上所述是小编给大家介绍的vuejs数据超出单行显示更多,点击展开剩余数据详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!