vue实现文章内容过长点击阅读全文功能的实例
2019/6/27 20:29:34
本文主要是介绍vue实现文章内容过长点击阅读全文功能的实例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
直接上代码:
html:
<div class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :class="{bodyHeight:contentStatus}"> <div v-html="content"></div> </div> <div class="contentToggle" v-if="contentStatus" @click="contentStatus=!contentStatus">阅读全文</div>
css:
.bodyFont{ .font-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: 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 } }, mounted(){ 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;
以上这篇vue实现文章内容过长点击阅读全文功能的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持找一找教程网。
这篇关于vue实现文章内容过长点击阅读全文功能的实例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01Vue.js 是什么-icode9专业技术文章分享
- 2024-11-01Vue3入门教程:从零开始搭建第一个Vue3项目
- 2024-11-01详解vueRouter4基础教程
- 2024-11-01Vuex4课程:初学者的完整入门指南
- 2024-10-31Vue3课程:新手入门到初级掌握
- 2024-10-31Vue3课程:新手入门到初级应用详解
- 2024-10-31VueRouter4课程:新手入门与实战指南
- 2024-10-31Vuex4学习:从入门到初级实战教程
- 2024-10-31Vue3教程:新手入门与基础实战
- 2024-10-31Vue教程:新手快速入门指南