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