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

1:菜单选项在页面上，选项的内容是后台界面返回的数据。目前的需求是，当选项的内容超过一行时，会在这一行的右侧显示更多，点击“更多”即可显示剩余选项的内容

看效果图

这是一个扩展的渲染

让我们先来看看我的一些html代码

div :class=' bussinessType '？Show':'hidde''dldt业务类型：/dtddref=' bussinestyperef ' a href=' JavaScript 3360 void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' name=' ' @ click=' getchildMenu($ event)Class=' active ' all/aa href=' JavaScript 3360 void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow 'bussinestype ' v-show=' bussineshway 40 ' { bussinestype？折叠' : ' more ' } } icon : type=' busy type '？chevron-down ' : ' chevron-up ' '/icon/I/dl/div表示show是展开时使用的样式的名称，hide是用于显示线条的样式(主要是控制容器的高度)。显示{ height: autoborder-bottom: 1px实心# ebebeb} .hidde { height: 40px飞越：隐藏；border-bottom: 1px实心# ebebeb}

这是我展示的菜单的一部分。主要是看这部分的高度是否超过一条线的高度。如果超过一行的高度，默认情况下让dl外部的div使用隐藏样式

那么问题来了，怎么知道显示菜单的dd部分高度超过一行？

这需要通过使用vuejs的手表来实现

首先，watch monitor ref是bussinessTypeRef的组件高度(如果内容很多，dd很容易被拉高)。这时候和一条线的高度比较一下(我这里设置为40)。如果超过，将显示更多文本按钮。以下是监视dd内容高度的监视方法

projectType:函数(){ this。$ NextTick(function(){ let cur=this。$ refs[' bussinestypeRef ']；if(cur){ this . bussineshStreak=cur . client height；} });}，当显示更多的文本按钮时，我们将控制dl外层的div容器，并让容器使用hide样式。当我们单击更多时，让控件显示更多的变量成为相反的值，这样它就会被折叠显示，更多的变量就会消失。同时，让外部div容器使用show style。这样就实现了一行之外显示更多文字，点击折叠的交互效果。

完整的代码附后供参考

div :class=' bussinessType '？show':'hidde''dldt业务类型：/dtdd ref=' bussinestyperef ' a href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' name=' ' @ click=' getchildMenu($ event)' class=' active '全部/aa href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' : name=' item。代码“v-for=”项目类型中的项@ click=' getchildMenu($ event)' { { item。name } }/a/ddi class=' enfold ' @ click=' bussinestype=！业务类型" v-show="业务类型重量40"{业务类型？"收起' : '更多} } Icon :type=' bussinessType？人字形向下' : '人字形向上'/图标/i/dl/div //行业商务类型：函数(){这个.$ NextTick(function(){ let cur=this .$ refs[' IndustrRef ']；如果这个。工业高度=cur。客户身高；} });},显示{高：自动订购-低： 1件实心# ebebeb}。hidde { height: 40px飞越：隐藏；边框-底部： 1px实心# ebebeb}。列表过滤器{位置：相对；边距-底部： 20pxfont-size : 14px}.列表过滤器dl {overflow:隐藏；}.列表过滤器dt {左侧浮动：字体粗细： 400；高度： 40px线高： 40px}.列表-筛选器DD {左边距： 30px向左浮动：宽度： 85%;线高： 40px}.展开{ font-size : 14pxcolor: # 00A971cursor:指针；字体样式：正常；垂直对齐： 中间；显示器：内联块；高度： 40px线高： 40px}.列表-筛选a { color: # 333display:内联块；右边距： 20pxpadding: 0 5px文本装饰：无；线高： 2emz-index : 0；}以上所述是小编给大家介绍的组件数据超出单行显示更多，点击展开剩余数据详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！