vue實(shí)現(xiàn)文章內(nèi)容過(guò)長(zhǎng)點(diǎn)擊閱讀全文功能的實(shí)例
更新時(shí)間：2017年12月28日 08:37:42 作者：蓓蕾心晴
下面小編就為大家分享一篇vue實(shí)現(xiàn)文章內(nèi)容過(guò)長(zhǎng)點(diǎn)擊閱讀全文功能的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lá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;
}
},
}
效果如圖：
實(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)容過(guò)長(zhǎng)點(diǎn)擊閱讀全文功能的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù)的方法
本文主要介紹了vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了vue?px轉(zhuǎn)rem配置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
這篇文章主要介紹了Vue中實(shí)現(xiàn)權(quán)限管理詳解,權(quán)限是對(duì)特定資源的訪問(wèn)許可，所謂權(quán)限控制，也就是確保用戶只能訪問(wèn)到被分配的資源,而前端權(quán)限歸根結(jié)底是請(qǐng)求的發(fā)起權(quán)，請(qǐng)求的發(fā)起可能有下面兩種形式觸發(fā),需要的朋友可以參考下2023-08-08
vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)過(guò)程詳解
前端的業(yè)務(wù)開(kāi)發(fā)中會(huì)遇到不使用分頁(yè)方式來(lái)加載長(zhǎng)列表的需求,下面這篇文章主要給大家介紹了關(guān)于vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue-cli4項(xiàng)目開(kāi)啟eslint保存時(shí)自動(dòng)格式問(wèn)題
這篇文章主要介紹了vue-cli4項(xiàng)目開(kāi)啟eslint保存時(shí)自動(dòng)格式的問(wèn)題小結(jié)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
vue-cli創(chuàng)建vue項(xiàng)目的詳細(xì)步驟記錄
vue.cli是vue中的項(xiàng)目構(gòu)造工具,是一個(gè)npm包,需要安裝node.js和 git才能用,下面這篇文章主要給大家介紹了關(guān)于利用vue-cli創(chuàng)建vue項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下2022-06-06
最近的項(xiàng)目有一個(gè)加載遠(yuǎn)程組件的需求，基于此我對(duì) Vue 加載遠(yuǎn)程組件的方案進(jìn)行了研究，并且整理了兩個(gè)可行的解決方案，有感興趣的小伙伴跟著小編一起來(lái)看看吧2023-07-07
這篇文章主要介紹了詳解vue.js全局組件和局部組件，實(shí)例分析了全局組件和局部的技巧，有興趣的可以了解一下。2017-04-04
vue實(shí)踐---根據(jù)不同環(huán)境,自動(dòng)轉(zhuǎn)換請(qǐng)求的url地址操作
這篇文章主要介紹了vue實(shí)踐---根據(jù)不同環(huán)境,自動(dòng)轉(zhuǎn)換請(qǐng)求的url地址操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
在vue中使用回調(diào)函數(shù),this調(diào)用無(wú)效的解決
這篇文章主要介紹了在vue中使用回調(diào)函數(shù),this調(diào)用無(wú)效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08