vue實(shí)現(xiàn)文章內(nèi)容過(guò)長(zhǎng)點(diǎn)擊閱讀全文功能

fredshare 發(fā)布于2019-08-21 18:26 / 3508人閱讀

摘要：直接上代碼閱讀全文效果如圖實(shí)現(xiàn)思路與注意的點(diǎn)獲取內(nèi)容的高度要等到加載完成之后，在里加一個(gè)函數(shù)，保證能真正獲取到當(dāng)內(nèi)容的高度高于自己設(shè)定的要展示的高度的時(shí)候，則只限定在自己要展示的高度中，加一個(gè)解決，注意要

直接上代碼：

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;
        }
      },
}

效果如圖：

實(shí)現(xiàn)思路與注意的點(diǎn)：

1、獲取內(nèi)容的高度要等到dom加載完成之后，在mounted里加一個(gè)setTimeout函數(shù)，保證能真正獲取到

2、當(dāng)內(nèi)容的高度高于自己設(shè)定的要展示的高度的時(shí)候，則只限定在自己要展示的高度中，加一個(gè)class解決，注意要overflow：hidden；

GPU云服務(wù)器云服務(wù)器閱讀全文文章閱讀敘事文章閱讀這篇文章手把手帶你閱讀Netty源碼【附

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/90472.html

相關(guān)文章

微信小程序過(guò)長(zhǎng)文本折疊效果的探索

摘要：之前做小程序開(kāi)發(fā)時(shí)，遇到要實(shí)現(xiàn)過(guò)長(zhǎng)文本進(jìn)行的折疊的效果類型微信朋友圈那種。而最直接的文本過(guò)長(zhǎng)判斷標(biāo)準(zhǔn)，是文本行數(shù)超過(guò)某個(gè)值。總結(jié)以上，總結(jié)下小程序下文本過(guò)長(zhǎng)折疊的思路文本過(guò)長(zhǎng)由邏輯層判斷字符數(shù)確定，控制全文按鈕的展示與切換。之前做小程序開(kāi)發(fā)時(shí)，遇到要實(shí)現(xiàn)過(guò)長(zhǎng)文本進(jìn)行的折疊的效果（類型微信朋友圈那種）。主要交互有三點(diǎn)：讓文本過(guò)長(zhǎng)時(shí)折疊、并顯示一個(gè)全文的點(diǎn)擊文本當(dāng)用戶點(diǎn)擊全文則會(huì)展...

cocopeak 2019-08-29 13:53 評(píng)論0 收藏0
php開(kāi)發(fā)微信公眾號(hào)文章付費(fèi)閱讀功能！

摘要：如上圖，一看就懂，就是一片公眾號(hào)文章，點(diǎn)進(jìn)去顯示標(biāo)題，作者，時(shí)間，公眾號(hào)名稱和部分內(nèi)容，要想閱讀所有內(nèi)容，那就支付元就可以閱讀所有的內(nèi)容，這就是付費(fèi)閱讀當(dāng)然金額可以自定義其實(shí)這個(gè)開(kāi)發(fā)原理很簡(jiǎn)單，無(wú)非就是在文章頁(yè)面加一個(gè)微信支付的按鈕，點(diǎn)擊支 showImg(https://segmentfault.com/img/bV2ZIZ?w=1502&h=1334); 如上圖，一看就懂，就是一片...

lieeps 2019-08-26 11:33 評(píng)論0 收藏0
php開(kāi)發(fā)微信公眾號(hào)文章付費(fèi)閱讀功能！

摘要：如上圖，一看就懂，就是一片公眾號(hào)文章，點(diǎn)進(jìn)去顯示標(biāo)題，作者，時(shí)間，公眾號(hào)名稱和部分內(nèi)容，要想閱讀所有內(nèi)容，那就支付元就可以閱讀所有的內(nèi)容，這就是付費(fèi)閱讀當(dāng)然金額可以自定義其實(shí)這個(gè)開(kāi)發(fā)原理很簡(jiǎn)單，無(wú)非就是在文章頁(yè)面加一個(gè)微信支付的按鈕，點(diǎn)擊支 showImg(https://segmentfault.com/img/bV2ZIZ?w=1502&h=1334); 如上圖，一看就懂，就是一片...

NotFound 2019-06-28 18:22 評(píng)論0 收藏0
手把手教你用vue搭建個(gè)人站

摘要：在我轉(zhuǎn)前端以來(lái)，一直想要實(shí)現(xiàn)一個(gè)愿望自己搭建一個(gè)可以自動(dòng)解析文檔的個(gè)人站今天終于實(shí)現(xiàn)啦，先貼上我的地址確認(rèn)需求其實(shí)一個(gè)最簡(jiǎn)單的個(gè)人站，就是許多的頁(yè)面，你只要可以用寫(xiě)出來(lái)就可以，然后掛到上。在我轉(zhuǎn)前端以來(lái)，一直想要實(shí)現(xiàn)一個(gè)愿望：自己搭建一個(gè)可以自動(dòng)解析Markdown文檔的個(gè)人站今天終于實(shí)現(xiàn)啦，先貼上我的blog地址確認(rèn)需求其實(shí)一個(gè)最簡(jiǎn)單的個(gè)人站，就是許多的HTML頁(yè)面，你只要...

xietao3 2019-08-02 10:58 評(píng)論0 收藏0
node技術(shù)棧 - 收藏集 - 掘金

摘要：異步最佳實(shí)踐避免回調(diào)地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術(shù)和異步函數(shù)。 Nodejs 連接各種數(shù)據(jù)庫(kù)集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫(xiě) Node.js Rest API 的 10 個(gè)最佳實(shí)踐 - 前端 - 掘金全文共 6953 字，讀完需 8 分鐘，速讀需 2 分鐘。翻譯自...

王偉廷 2019-06-26 17:15 評(píng)論0 收藏0