超过指定行数后在Vue中展开和收缩文本内容的实现方法

时间：2021-08-25 来源：互联网编辑：宝哥软件园浏览：次

文字很难解释，直接看图就知道该怎么做了。

需求

在工作中，如果超过四行，要求有一个展开按钮，点击展开显示所有内容。如果不超过四行，则不需要该按钮，并且显示所有内容。

这个想法是判断文本是否超过四行，因为这些通常是来自前端的异步请求，然后从后端发送。在团队负责人的指导下，使用Vue中的nextTick来监控DOM中的数据变化。接下来，主要是关于css的想法。其实上图可以分为两部分，如下图，标有1的部分显示前三行，标有2的部分会根据1的行数判断压痕大小，然后显示第四行。最后，通过对背景颜色的控制，它们看起来像一段文字。

密码

核心代码是中间部分，所以不要关注其余部分

模板div div style=' text-align : center ' { title } }/div div class=' top-proof '证明楼下的货不会影响我div div 3360 class=' show total？total-introduction ' : ' detailed-introduction ' ' div class=' introduction-content ' : title=' introduction ' ref=' desc ' span class=' merchant-desc ' v-if=' introduction ' { introduction } }/span div class=' und ' @ click=' showtotalentro ' v-if=' showExchangeButton ' p { { exchangeButton？展开“:”并折叠“}”}/p/Div/Div/Div class=' bottom-proof '以证明楼上的货物不会影响我/Div class=' change-buttom ' Div class=' long ' @ click=' try long '单击此处尝试较长的文本/Div class=' short ' @ click=' try short '单击此处尝试较短的文本/Div/Div/Div/Templatescriptexportdefault { name : ' spread '，data () {return {title: '}，mounted(){ this . init()；}，methods : { showtotalntro(){ console . log(this . showtotal)；this.showTotal=！this . show total；this.exchangeButton=！this.exchangeButton}，Getrem(){ console . log(' Getrem ')；const defaultRem=16让winWidth=window.innerWidthconsole . log(' WinWidth : ' WinWidth)；让rem=winWidth/375 * defaultRem；返回rem}，init(){ this . introduction='世界上有财富、有名望、有权力的人哥尔D罗杰，在被处死前说过一句话，这句话让全世界的人都涌向了大海。“想要我的财宝吗？如果你想要，就去海边找吧。我都放在那里了。”，世界开始迎接“一个海盗时代”的到来。哥尔D罗杰，一个在世界上拥有财富、名望和权力的人，“海贼王”，在被处死前说了一句话，这让全世界的人都涌向了大海。“想要我的财宝吗？如果你想要，就去海边找吧。我都放在那里了。”，世界开始迎接“一个海盗时代”的到来。}，try long(){让long介绍一下=' vue是一个用于构建用户界面的渐进式框架。Vue设计为从下到上逐层应用。Vue的核心库只关注视图层，不仅易用，而且容易与第三方库或现有项目集成。另一方面，当与现代工具链和各种支持类库相结合时，Vue还可以为复杂的单页应用程序提供驱动程序。Vue(发音为/vju/，类似于view)是一个用于构建用户界面的渐进式框架。与其他大框架不同，Vue的设计是从下到上一层一层的应用。Vue的核心库只关注视图层，不仅易用，而且容易与第三方库或现有项目集成。另一方面，当与现代工具链和各种支持类库相结合时，Vue还可以为复杂的单页应用程序提供驱动程序。”；如果(这个.介绍一下！==longintroducce){ this . showexchangebutton=false；this.showTotal=truethis . introduction=long introduction；}}，try short(){让我们简单介绍一下=' vue(发音为/vju/，类似于view)是一个用于构建用户界面的渐进式框架。

；如果（这个。介绍一下！==简短介绍){这个。showexchangebutton=falsethis.showTotal=truethis。简介=简短的介绍；} } }，手表： { ' introduction ' : function(){ this .$ NextTick(function(){ console。日志(' NextTick ')；//判断介绍是否超过四行让rem=parseFloat(这个。getrem())；console.log('watch中的‘rem’，rem)；if(！这个参考文献。desc){控制台。日志(“desc空”)；返回；}让下降高度=窗口。getcomputed style(这个.参考文献。desc。)高度。替换(' px '，' ')；控制台。原木('下降高度： '下降高度)；console.log('如果描述高度超过(5.25 *雷姆)就要显示展开按钮');if(下降高度5.25 * rem){控制台。日志('超过了四行');//显示展开收起按钮this . showExchangebutton=true this . Exchangebutton=true//不是显示所有this.showTotal=false} else { //不显示展开收起按钮this . showexchangebutton=false//没有超过四行就显示所有this.showTotal=trueconsole。日志(' showexchange按钮'，这。showexchange按钮)；console.log('showTotal '，这。显示总数)；} }.绑定（这个));} }};/script style lang="less "作用域rel="样式表/减.top-prove { height : 100 px；宽度： 100%;背景： # dddddd文本对齐：中心；线高： 100像素；} .总计-引入{ height: auto飞越：隐藏；font-size : 14pxcolor : # 434343 margin : 10px .简介内容{ .商户desc横向： 100%;线高： 21px} } .展开{显示：块；z指数： 11；向右浮动：宽度： 40pxheight : 21 XP { margin : 0；线高： 21pxcolor: # 7fbe87} } }。详细-介绍{ font-size : 14px颜色： # 434343相对位置：飞越：隐藏；margin: 10px .简介-内容{ //最大高度设为四倍的行间距最大高度： 84px线高： 21px单词包装：断字；/*强制打散字符*/word-break : break-all；背景： # ffffff/*同背景色*/color : # ffffff；飞越：隐藏；商户desc横向： 100%;线高： 21px} :after，//这是展开前实际显示的内容{内容： attr(标题)前的：绝对位置：左： 0；top : 0；宽度： 100%;颜色： # 434343//溢出：隐藏；} //把最后最后一行自身的上面三行遮住：before { display:块；飞越：隐藏；z-index : 1；最大高度： 63px背景： # ffffff} :后{ display :-web kit-box；-网络套件-面向盒子的：垂直；飞越：隐藏；高度： 81px/*截取行数*/-网套件-线夹： 4；文本-飞越：省略号；-webkit-box-sizing:边框-盒子；盒子尺寸：边框盒子；/*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/text-缩进：-12em；/*尾部留空字符数*/padding-right : 4em；} .展开{ z-index : 11宽度： 40pxheight : 21 pxoutline : 0；绝对位置：右： 0；底部： 0；p { margin : 0；线高： 21pxcolor: # 7fbe87} } } }。底部-证明{高： 100像素宽度： 100%;背景： # dddddd文本对齐：中心；线高： 100像素；} .change-buttom { font-size : 14px；颜色： # 2371be .long { text-align : 21px文本对齐：中心；高度： 21px}。short { text-align : 21px文本对齐：中心；height: 20px} }/样式演示动画