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;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python学习之旅

Python+Selenium笔记(七):WebDriver和WebElement

(一)  WebDriver WebDriver提供许多用来与浏览器交互的功能和设置,通过WebDriver的功能和一些方法,来实现与浏览器窗口、警告、框架和弹...

35550
来自专栏前端vue

4.添加导航、分栏布局,配置路由及对应页面、登陆、404

侧边栏的导航与页面相对应,根据导航栏新建对应页面(含登陆、404) src目录下新建views文件夹用来放视图文件

18440
来自专栏十月梦想

响应式媒体查询media的用法

        media媒体查询响应式可以实现什么效果?对于不同尺寸的设备相应不同的样式,但是不能兼容移动和pc端的全响应兼容.

13320
来自专栏cnblogs

关于HTML面试题汇总之H5

一、H5有哪些新特性,移除了哪些元素?如何处理h5新标签的浏览器兼容性问题,如何区分html和html5 1. html5不在是SGL(通用标记语言)的一个子集...

36750
来自专栏WD学习记录

HTML.Label

如果用户单击 label,浏览器会把焦点传送给相关的输入控件 ,这一点对于复选框和单选按钮特别有用,

8310
来自专栏Android干货

小程序实践(八):验证码倒计时功能

18530
来自专栏微信小程序开发

微信小程序开发-常见问题

知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS 非HT...

55990
来自专栏前端侠2.0

draggable 属性 原

昨天是在document上绑定mousedown ,mousemove ,mouseup事件,来实时计算,并设置相应元素的宽度,这是最直接想到的办法,就不再多说...

19910
来自专栏编程微刊

混合开发

17630
来自专栏守望轩

Visual Studio 2008 每日提示(四)

#031、 把编辑器的背景变成黑色 原文地址:http://blogs.msdn.com/saraford/archive/2007/09/06/did-yo...

33350

扫码关注云+社区

领取腾讯云代金券