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；