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中的常用事件总结
Dec 27 Javascript
Javascript 读书笔记索引贴
Jan 11 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
javascript插入样式实现代码
Feb 22 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
关于jQuery object and DOM element
2013/04/15 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
JS实现密码框效果
2020/09/10 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
Python yield使用方法示例
2013/12/04 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
公司股权转让协议书
2014/04/12 职场文书
迎新晚会策划方案
2014/06/13 职场文书
安全承诺书
2015/01/19 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
雷锋的故事观后感
2015/06/10 职场文书
机器人瓦力观后感
2015/06/12 职场文书
心得体会格式及范文
2016/01/25 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis