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 ...
随机推荐
- jQuery实现radio第一次点击选中第二次点击取消功能(转)
转载自:http://www.jb51.net/article/113730.htm 由于项目的需求,要求radio点击两次后为取消状态,不方便修改为checkbox,可以用正面的方法实现. // j ...
- 【转】 Java中的变量赋值和参数传递
原文地址:http://blog.csdn.net/whmii/article/details/3363667 变量赋值和参数传递是java中两个容易让人迷惑的问题.对于原始类型(primitives ...
- <黑天鹅>读书笔记
书在这里 不要关注可能性,而要关注结果 不要迷信那些估值和行业发展研究文字,因为所有大家看得到的模型和研究报告都是有关白天鹅的,而你的命运或许实际掌握在黑天鹅那里 你不知道的事比你知道的事有意义 你可 ...
- [root]既然sudo 可以暂时获取root权限,那么为何还需要root这个用户呢
既然sudo 可以暂时获取root权限,那么为何还需要root这个用户呢 sudo 非root用户可以临时行使root权限,也就是非root用户可以操作该系统下的任何文件,仍然存在安全风险,怎么解释? ...
- valgrind--CPP程序内存泄露检查工具
内存泄漏是c++程序常见的问题了,特别是服务类程序,当系统模块过多或者逻辑复杂后,很难通过代码看出内存泄漏. valgrind是一个开源的,检测c++程序内存泄漏有效工具,编译时加上-g选项可以定位到 ...
- VC中使用ADO操作数据库的方法 SQL2000
(1).引入ADO类 #import "c:\program files\common files\system\ado\msado15.dll" \ no_namespace \ ...
- elasticsearch6.4 memory locking requested for elasticsearch process but memory is not locked 终极解决
echo "es hard memlock unlimited">>/etc/security/limits.confecho "es soft memloc ...
- IDEA初始化配置
1.配置git 2.配置JDK[Configure-->Oroject Defaults-->Project Structure] 3.配置maven
- 安卓程序代写 网上程序代写[原]Android开发技巧--Application
1. Application用途 创建Application时机 : Application在启动的时候会调用Application无参的构造方法创建实例; Application构造方法 : App ...
- 苹果Mac OS系统修改Hosts文件的方法
使用苹果Mac OS X系统的用户有很多,近期也有不少童鞋问我Mac怎么修改hosts,修改hosts的方式有很多,下面我就整理两种比较方便的方法吧,希望能够帮到大家. 在某些时候可能遇到了需要修改系 ...