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实现文章内容过长点击阅读全文功能的更多相关文章
- dedecms5.7文章实现阅读全文功能二次开发
阅读全文功能其实在很多的流行站点都有的,比如网易,新浪等,随着文章内容的增加,当一个页面有多个分页的时候,就会显示出这个“在本页阅读全文”的链接,点击这个链接之后,出现的,将是这篇文章以没有分页出现的 ...
- Android TextView内容过长加省略号,点击显示全部内容
在Android TextView中有个内容过长加省略号的属性,即ellipsize,用法如下: 在xml中:android:ellipsize="end" 省略号在结尾an ...
- textarea与标签组合,点击标签填入标签内容,再次点击删除内容(vue)
需求:将textarea与span标签组合,点击标签自动填入标签文本内容,再次点击删除标签文本对应内容 原理:点击标签时,将标签内容作为参数,将内容拼接在textarea的value后面,再次点击标签 ...
- Android面试题(文章内容来自他人博客)
腾讯面试题 1.int a = 1; int result = a+++3<<2; 2.int a = 2; int result = (a++ > 2)?(++a):(a+=3); ...
- td标签内的内容过长导致的问题的解决办法
问题描述:在开发过程中,td标签中的有一个cell格中的内容过长,导致td标签高度增加,从而导致整个页面内容的不协调:
- 前端基础系列——CSS规范(文章内容为转载)
原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...
- 如何用PC标签在列表页中调出文章内容 phpcms
如何用PC标签在列表页中调出文章内容 phpcms v9 moreinfo=”"参数说明 {pc:content action="lists" catid="$ ...
- PHPCMS v9 实现首页,列表页,内容页调用点击量方法
大家好,今天有点闲,看很多朋友经常问PHPCMS v9 首页,列表页,内容页调用点击怎么弄,打算抽时间把代码全部归纳出来,以便大家日后使用,如下: 1,首页调用点击量 {pc:content acti ...
- 用Dedecms5.7的arclist标签调用文章内容
arclist标签调用文章内容 首先大家都知道在Dedecms中,list标签是可以调用文章内容的,调用格式就不再此冗述了.从我个人来说,我非常不喜欢用list标签调用,有可能我会尽量使用arclis ...
随机推荐
- Linxu 学习记录
1.配置Java人环境变量,设置后需要使用命令: source /etc/profile 让配置立即生效. # jdk7 settings JAVA_HOME=/usr/jdk1..0_79 JRE_ ...
- Eclipse 下安装 SVN的方法
http://welcome66.iteye.com/blog/1845176 eclipse里安装SVN插件,一般来说,有两种方式: 直接下载SVN插件,将其解压到eclipse的对应目录里 使用e ...
- PHP也玩并发,巧用curl 并发减少后端访问时间
首先,先了解下 php中的curl多线程函数: # curl_multi_add_handle# curl_multi_close# curl_multi_exec# curl_multi_getco ...
- oracleinsert的时候返回插入的ID
//---------------- 声明部分 ---------------- create or replace package Pro_Test_User is PROCEDURE Ins_Te ...
- n个括号对的所有可能情况
所有可能情况的数量为卡特兰数.故求所有可能的出栈情况与此类似. 思路: 若左括号没全插入,则插入左括号: 若已插入左括号数比已插入右括号数多,则插入右括号: #include<stdio.h&g ...
- React Native常用第三方组件汇总--史上最全[转]
本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...
- ajax传递参数给springmvc总结[转]
通过ajax传递参数给springmvc,经常会因为 参数类型太复杂,或者根本不知道springmvc都支持哪些类型转换,导致后台接收出现各种问题.如果书写格式没有问题仍然接受参数报错,大部分是因为s ...
- 深入浅出LVM on linux
什么是LVM? 什么是LVM?LVM(Logical Volume Manager)逻辑卷管理,是一种将一个或多个硬盘的分区在逻辑上集合,相当于一个大硬盘来使用,当硬盘的空间不够使用的时候,可以继续将 ...
- android 图片处理
一.缩放 指宽.高缩放 (1)按比例缩放 在开发图片浏览器等软件是,很多时候要显示图片的缩略图,而一般情况下,我们要将图片按照固定大小取缩略图,一般取缩略图的方法是使用BitmapFactory的de ...
- ITSM运营实施案例 - 汽车行业
M公司是在汽车行业知名TOP企业,在日常运营过程中有如下问题: ******************************************************************** ...