专栏首页前端小叙vue实现文章内容过长点击阅读全文功能

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 条评论
登录 后参与评论

相关文章

  • jquery方法.serializeArray()获取name和value并转为json数组

    蓓蕾心晴
  • input框取消光标颜色手机端不生效

    <style> input{ color:transparent; } </style> <input value="我要隐藏光标"> //文字颜色可以...

    蓓蕾心晴
  • react中实现搜索结果中关键词高亮显示

    网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换。

    蓓蕾心晴
  • css常用居中

    windseek
  • CSS3 黑科技 - 内凹圆角 - 径向渐变实现

    可以拿个白色圆盒子盖住方形盒子的大半边实现,但是这样,是不透明的,背景发生改变时,就要改遮盖盒子的颜色,或者背景是渐变,改起来更麻烦,或背景是图片等等,就直接不...

    用户2458785
  • padding-left 属性

    padding-left 该属性用于设置标签的左部填充区域的高度,负值无效。

    Html5知典
  • vue input输入框联想

    以下是示例,样式可以自己修改。最后是效果图,其实也挺简单的,主要是用了watch监控input输入值的变化,如果数据是请后端请求可以,先请求数据。 <templ...

    庞小明
  • VUE开发一个组件——Vue H5城市选择控件

    昨天用《VUE开发一个组件——Vue PC城市选择控件》 , 有朋友说需要用字母筛选,其实已经用字母筛选了,不过是每4个,没有对单个,所以H5我们就用单个字母快...

    Javanx
  • 云存储管理的9个免费工具

    云计算的概念还不算太旧,却已很好地适应于世界各地。现在许多基于云的可用服务,已经开始大规模地流行起来。不少商人和企业家正在使用这些基于云的服务,因为即便他们不在...

    静一
  • 组合模式

    组合模式Composite Pattern又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象,通常依据树形结构来组合对象,用来表示部分以及整体层次,这种...

    WindrunnerMax

扫码关注云+社区

领取腾讯云代金券