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

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

直接上代码：

html:

css:

.bodyFont{

.hkTqVfont-dpr(16px);

color: #333;

text-align: left;

line-height:58px;

word-break:break-all;

word-wrap:break-word;

padding-bottom: 30px;

height:auto;

overflow: hidden;

max-height: 100%;

p{margin:16px 0 0 0;}

}

.bodyHeight{

height:5000px;

}

.contentToggle{

height:60px;

line-height:60px;

text-align:hkTqV center;

color:@red;

border:1px solid @red;

border-radius: 5px;

.font-dpr(14px);

margin-bottom:30px;

}

js:

data(){

return {

contentStatus:false,

curHeight:0,

bodyHeight:5000

}

},

mountehkTqVd(){

setTimeout(()=>{

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；

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。