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

fredshare 发布于2019-08-21 18:26 / 3407人阅读

摘要：直接上代码阅读全文效果如图实现思路与注意的点获取内容的高度要等到加载完成之后，在里加一个函数，保证能真正获取到当内容的高度高于自己设定的要展示的高度的时候，则只限定在自己要展示的高度中，加一个解决，注意要

直接上代码：

html:


        

阅读全文
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；

混合云云服务器阅读全文文章阅读叙事文章阅读这篇文章手把手带你阅读Netty源码【附

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90472.html

微信小程序过长文本折叠效果的探索

摘要：之前做小程序开发时，遇到要实现过长文本进行的折叠的效果类型微信朋友圈那种。而最直接的文本过长判断标准，是文本行数超过某个值。总结以上，总结下小程序下文本过长折叠的思路文本过长由逻辑层判断字符数确定，控制全文按钮的展示与切换。之前做小程序开发时，遇到要实现过长文本进行的折叠的效果（类型微信朋友圈那种）。主要交互有三点：让文本过长时折叠、并显示一个全文的点击文本当用户点击全文则会展...

cocopeak 2019-08-29 13:53 评论0 收藏0
php开发微信公众号文章付费阅读功能！

摘要：如上图，一看就懂，就是一片公众号文章，点进去显示标题，作者，时间，公众号名称和部分内容，要想阅读所有内容，那就支付元就可以阅读所有的内容，这就是付费阅读当然金额可以自定义其实这个开发原理很简单，无非就是在文章页面加一个微信支付的按钮，点击支 showImg(https://segmentfault.com/img/bV2ZIZ?w=1502&h=1334); 如上图，一看就懂，就是一片...

lieeps 2019-08-26 11:33 评论0 收藏0
php开发微信公众号文章付费阅读功能！

摘要：如上图，一看就懂，就是一片公众号文章，点进去显示标题，作者，时间，公众号名称和部分内容，要想阅读所有内容，那就支付元就可以阅读所有的内容，这就是付费阅读当然金额可以自定义其实这个开发原理很简单，无非就是在文章页面加一个微信支付的按钮，点击支 showImg(https://segmentfault.com/img/bV2ZIZ?w=1502&h=1334); 如上图，一看就懂，就是一片...

NotFound 2019-06-28 18:22 评论0 收藏0
手把手教你用vue搭建个人站

摘要：在我转前端以来，一直想要实现一个愿望自己搭建一个可以自动解析文档的个人站今天终于实现啦，先贴上我的地址确认需求其实一个最简单的个人站，就是许多的页面，你只要可以用写出来就可以，然后挂到上。在我转前端以来，一直想要实现一个愿望：自己搭建一个可以自动解析Markdown文档的个人站今天终于实现啦，先贴上我的blog地址确认需求其实一个最简单的个人站，就是许多的HTML页面，你只要...

xietao3 2019-08-02 10:58 评论0 收藏0
node技术栈 - 收藏集 - 掘金

摘要：异步最佳实践避免回调地狱前端掘金本文涵盖了处理异步操作的一些工具和技术和异步函数。 Nodejs 连接各种数据库集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 编写 Node.js Rest API 的 10 个最佳实践 - 前端 - 掘金全文共 6953 字，读完需 8 分钟，速读需 2 分钟。翻译自...

王伟廷 2019-06-26 17:15 评论0 收藏0