vue實現(xiàn)文章內(nèi)容過長點擊閱讀全文功能的實例
更新時間：2017年12月28日 08:37:42 作者：蓓蕾心晴
下面小編就為大家分享一篇vue實現(xiàn)文章內(nèi)容過長點擊閱讀全文功能的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
直接上代碼：
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;
}
},
}
效果如圖：
實現(xiàn)思路與注意的點：
1、獲取內(nèi)容的高度要等到dom加載完成之后，在mounted里加一個setTimeout函數(shù)，保證能真正獲取到
2、當(dāng)內(nèi)容的高度高于自己設(shè)定的要展示的高度的時候，則只限定在自己要展示的高度中，加一個class解決，注意要overflow：hidden；
以上這篇vue實現(xiàn)文章內(nèi)容過長點擊閱讀全文功能的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?中的?Composition?API?是一種新的編寫組件邏輯的方式,它提供了更好的代碼組織、類型推導(dǎo)、測試支持和復(fù)用性,本文為大家介紹了vue3利用組合式api創(chuàng)建單文件組件的方法,感興趣的可以了解下2023-08-08
這篇文章主要介紹了vue生命周期四個階段created和mount,本文給大家介紹的非常詳細,補充介紹了什么是實例,什么是實例被掛載到DOM,什么是dom,dao操作又是什么,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了vue中el-upload上傳圖片到七牛的示例代碼,實現(xiàn)思路其實也很簡單，需要從后臺獲取七牛token上傳圖片到七牛，具體示例代碼大家跟隨小編一起學(xué)習(xí)吧2018-10-10
TypeScript 是一種由微軟開發(fā)的自由和開源的編程語言，它是 JavaScript 的一個超集，擴展了 JavaScript 的語法。這篇文章主要介紹了Vue新搭檔TypeScript快速入門實踐,需要的朋友可以參考下2021-06-06
在Vue3中,ref提供了訪問組件內(nèi)DOM元素和子組件實例的方法,防抖是一種限制函數(shù)調(diào)用頻率的方法,即在一定時間內(nèi)多次觸發(fā)同一個函數(shù),只執(zhí)行最后一次觸發(fā)的函數(shù),本文將給大家介紹了Vue3如何利用自定義ref實現(xiàn)防抖,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細介紹了如何使用Vue封裝一個前端通用右鍵菜單組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
其實采用vueUse中的useVirtualList方法同樣可以實現(xiàn)虛擬列表,這篇文章小編就來和大家詳細介紹一下如何使用vueUse實現(xiàn)簡單的虛擬列表效果吧2024-04-04
這篇文章主要介紹了vue項目中常見問題及解決方案,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
vue項目中使用particles實現(xiàn)粒子背景效果及遇到的坑(按鈕沒有點擊響應(yīng))
為了提高頁面展示效果，登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡單的實現(xiàn)頁面的粒子背景效果，本文給大家分享在實現(xiàn)過程中遇到問題，需要的朋友一起看看吧2020-02-02
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于vuex模塊獲取數(shù)據(jù)及方法的相關(guān)資料,需要的朋友可以參考下2023-03-03