vue实现文章内容过长点击阅读全文功能的实例
2017-12-28 08:37
1036 查看
直接上代码:
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实现文章内容过长点击阅读全文功能
- dedecms5.7文章二次开发实现阅读全文功能的方法
- dedecms5.7文章实现阅读全文功能二次开发
- JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- iframe异步加载实现点击左边菜单加载右边内容实例讲解
- react native开发:实现点击左侧选择项,右侧显示内容的功能
- laravel5.3 vue 实现收藏夹功能实例详解
- 使用vue实现grid-layout功能实例代码
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- 在datagrid里实现文章内容在点击标题的时候收起或者展开的效果
- vue 实现边输入边搜索功能的实例讲解
- Android点击Button实现功能的几种… 分类: Android开发 2014-05-30 10:55 77人阅读 评论(0) 收藏
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- TextView属性android:ellipsize实现跑马灯效果,TextView内容过长加省略号,点击显示全部内容
- Vue.js点击切换按钮改变内容实例
- Jquery实现多层元素点击结果叠加效果_获取标签内容_叠加实例
- React---点击按钮实现内容复制功能
- 基于jquery实现表格内容筛选功能实例解析
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现