vue实现文章内容过长点击阅读全文功能的实例

  

直接上代码:

  

<强> html:

        & lt; div class=" bodyFont clearfloat " id=" bodyFont " ref=癰odyFont”: class=" {bodyHeight: contentStatus}”在   & lt; div v-html=澳谌荨弊4? lt;/div>   & lt;/div>   & lt; div类=" contentToggle " v=癱ontentStatus @click”=癱ontentStatus=! contentStatus”在阅读全文& lt;/div>      css:

<强>

        .bodyFont {   .font-dpr (16 px);   颜色:# 333;   text-align:左;   行高:58 px;   单词分割:打破所有;   自动换行:break-word;   padding-bottom: 30 px;   高度:汽车;   溢出:隐藏;   max-height: 100%;   p{保证金:16 px 0 0 0;}   }   .bodyHeight {   身高:5000 px;   }   .contentToggle {   高度:60 px;   行高:60 px;   text-align:中心;   颜色:@red;   边界:1 px固体@red;   border - radius: 5 px;   .font-dpr (14 px);   margin-bottom: 30 px;   }      

<强> js:

        数据(){   返回{   contentStatus:假的,   curHeight: 0,   bodyHeight: 5000   }   },   安装(){   setTimeout(()=祝辞{   this.contentToggle ();   }, 500)   },   方法:{   contentToggle () {   this.curHeight=efs.bodyFont.offsetHeight美元;   如果(this.curHeight> this.bodyHeight) {   this.contentStatus=true;   其他}{   this.contentStatus=false;   }   },   }      

<>强效果如图:

  

 vue实现文章内容过长点击阅读全文功能的实例

  

  

1,获取内容的高度要等到dom加载完成之后,在安装里加一个setTimeout函数,保证能真正获取到

  

2,当内容的高度高于自己设定的要展示的高度的时候,则只限定在自己要展示的高度中,加一个类解决,注意要溢出:隐藏。

  

以上这篇vue实现文章内容过长点击阅读全文功能的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

vue实现文章内容过长点击阅读全文功能的实例