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


Posted in Javascript onDecember 28, 2017

直接上代码:

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;
 }
 },
}

效果如图:

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

实现思路与注意的点:

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

2、当内容的高度高于自己设定的要展示的高度的时候,则只限定在自己要展示的高度中,加一个class解决,注意要overflow:hidden;

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

Javascript 相关文章推荐
jQuery的end()方法使用详解
Jul 15 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
webpack搭建vue 项目的步骤
Dec 27 #Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 #Javascript
js判断节假日实例代码
Dec 27 #Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 #Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 #Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 #Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 #Javascript
You might like
php数据库密码的找回的步骤
2011/01/12 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
PyCharm设置SSH远程调试的方法
2018/07/17 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
python跳出双层for循环的解决方法
2019/06/24 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
千手观音观后感
2015/06/03 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python