vue实现文章内容过长点击阅读全文功能的实例
发布时间：2020-12-17 02:39:17 所属栏目：百科 来源：网络整理
导读：直接上代码： html: css: js: { this.contentToggle(); },500) },methods:{ contentToggle(){ this.curHeight=this.$refs.bodyFont.offsetHeight; if(this.curHeight>this.bodyHeight){ this.contentStatus=true; }else{ this.contentStatus=false; } },} 效
|
直接上代码： html:css:js:{
this.contentToggle();
},500)
},methods:{
contentToggle(){
this.curHeight=this.$refs.bodyFont.offsetHeight;
if(this.curHeight>this.bodyHeight){
this.contentStatus=true;
}else{
this.contentStatus=false;
}
},}
效果如图：
实现思路与注意的点：1、获取内容的高度要等到dom加载完成之后，在mounted里加一个setTimeout函数，保证能真正获取到 2、当内容的高度高于自己设定的要展示的高度的时候，则只限定在自己要展示的高度中，加一个class解决，注意要overflow：hidden； 以上这篇vue实现文章内容过长点击阅读全文功能的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
