vue實現(xiàn)骨架屏的示例
更新時間：2021年04月25日 09:06:09 作者：我在曾經(jīng)眺望彼岸
這篇文章主要介紹了vue實現(xiàn)骨架屏的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
骨架屏用途
- 作為spa中路由切換的 loading, 結(jié)合組件的生命周期和ajax請求返回的時機來使用.（ 作為loading 使用）。作為與用戶聯(lián)系最為密切的前端開發(fā)者，用戶體驗是最值得關(guān)注的問題。關(guān)于頁面loading狀態(tài)的展示，主流的主要有l(wèi)oading圖和進度條兩種。除此之外，越來越多的APP采用了“骨架屏”的方式去展示未加載內(nèi)容，給予了用戶煥然一新的體驗。
- 作為首屏渲染的優(yōu)化
Vue架構(gòu)骨架屏
思路大綱
- 定義一個抽象組件，在抽象組件的render函數(shù)里獲取插槽
- 深度循環(huán)遍歷插槽，將每個元素都添加上gm-skeleton的類名
- 將vnode textContent預(yù)暫后清空保證骨架屏出現(xiàn)時不會出現(xiàn)默認文字
- 返回slots
定義一個抽象組件
什么是抽象組件? 在渲染時會被跳過，只做運行時的操作的組件
export default {
name: 'GmSkeleton',
abstract: true // 抽象組件的屬性
}
獲取插槽并初始化操作骨架屏
render(h) {
const slots = this.$slots.default || [h('')]
this.$nextTick().then(() => {
this.handlerPrefix(slots, this.showSpin ? this.addSkeletPrefix : this.removeSkeletPrefix)
})
return slots.length > 1 ? h('div', {
staticClass: this.showSpin ? 'g-spinner' : ''
}, slots) : slots
}
這里我們將處理slots的方法放置在nextTick里面, 因為handlerPrefix里需要獲取真實的DOM，nextTick是用來執(zhí)行排序后的更新隊列里的所有方法, 在執(zhí)行render前, GMSkeleton組件的renderWatcher已被收集到更新隊列里，所以此時定義nextTick CallBack函數(shù)里能獲取到渲染后對應(yīng)插槽里所有真實DOM，若是不了解nextTick原理，請移步你不知道的nextTick
循環(huán)slots操作類名
handlerComponent(slot, handler/* addSkeletPrefix | removeSkeletPrefix */, init) {
const originchildren = (((slot.componentInstance || {})._vnode || {}).componentOptions || {}).children
const compchildren = ((slot.componentInstance || {})._vnode || {}).children
!init && handler(slot)
if (compchildren) this.handlerPrefix(compchildren, handler, false)
if (originchildren) this.handlerPrefix(originchildren, handler, false)
},
handlerPrefix(slots, handler, init = true) {
slots.forEach(slot => {
var children = slot.children || (slot.componentOptions || {}).children || ((slot.componentInstance || {})._vnode || {}).children
if (slot.data) {
if (!slot.componentOptions) {
!init && handler(slot)
} else if (!this.$hoc_utils.getAbstractComponent(slot)) {
;(function(slot) {
const handlerComponent = this.handlerComponent.bind(this, slot, handler, init)
const insert = (slot.data.hook || {}).insert
;(slot.data.hook || {}).insert = () => { // 函數(shù)重構(gòu), 修改原有的組件hook, 并且保證insert只執(zhí)行一次
insert(slot)
handlerComponent()
}
;(slot.data.hook || {}).postpatch = handlerComponent
}).call(this, slot)
}
}
if (slot && slot.elm && slot.elm.nodeType === 3) {
if (this.showSpin) {
slot.memorizedtextContent = slot.elm.textContent
slot.elm.textContent = ''
} else {
slot.elm.textContent = slot.memorizedtextContent || slot.elm.textContent || slot.text
}
}
children && this.handlerPrefix(children, handler, false)
})
},
逐步分析:
- 我們遍歷slots插槽
- 獲取當前vnode下的children集合以備做下一次循環(huán)
- 判斷是否是原生HTML元素，只有組件vnode才會具備componentOptions屬性
- 判斷是否抽象組件，我們知道抽象組件是不會渲染到真實DOMTree上的，例如keep-alive、transition，每個組件的vnode擁有獨有的hooks生命周期: init(初始化)、insert(插入)、prepatch(更新)、destroy(銷毀)，每個生命周期會在不同階段觸發(fā), 劫持insert，保留原有的insert方法，隨后重構(gòu)vnode的insert方法在里面調(diào)用handlerComponent方法進行添加類名，這里與上面的mounted的nextTick用法理念類似，由于handlerComponent需要知道子組件的實例，所以必須在實例化后去調(diào)用，而組件的init方法會實例組件并且直接調(diào)用watcher.update(watcher.render()), 也就是我們在調(diào)用insert方法的時候其實是在update(render())后，所以這里能夠獲取到實例化后子組件
- 判斷nodeType是否是文本節(jié)點，若是的話需要先將textContent保存后進行刪除，保證在骨架屏出現(xiàn)時不會顯示默認文字，在骨架屏消失時，將原先保留的默認文字返回給vnode，這樣就能自由在骨架屏的顯示隱藏期間自由切換
操作vnode的靜態(tài)類名
addSkeletPrefix(slot) {
const rootVnode = slot.componentOptions ? (slot.componentInstance || {})._vnode || {} : slot;
if (rootVnode.elm) {
rootVnode.elm.classList.add(this.skeletPrefix)
} else {
;(rootVnode.data || {}).staticClass += ` ${this.skeletPrefix}`
}
},
removeSkeletPrefix(slot) {
const rootVnode = slot.componentOptions ? (slot.componentInstance || {})._vnode || {} : slot;
if (rootVnode.elm) {
rootVnode.elm.classList && rootVnode.elm.classList.remove(this.skeletPrefix)
} else if (rootVnode.data.staticClass) {
rootVnode.data.staticClass = rootVnode.data.staticClass.replace(` ${this.skeletPrefix}`, '')
}
}
addSkeletePrefix用于添加gm-skeleton類名，而removeSkeletonPrefix則是用于刪除gm-skeleton類名
使用方法
import Vue from 'vue' import GMSkeleton from 'path/to/GMSkeleton' Vue.use(GMSkeleton)
<gm-skeleton>
<Component />
<div></div>
<div><span>前端馬丁</span></div>
</gm-skeleton>
傳值
| 屬性名 | 值 | 描述 |
|---|---|---|
| showSpin | Boolean | 是否開啟骨架屏，默認為true |
| skeletPrefix | String | 骨架屏類名, 默認是gm-skeleton |
效果如下
具體樣式是根據(jù)開發(fā)者自己寫的樣式來生成的，通過gm-skeleton包裹，如上的使用方法，以下是一個簡單的例子
完整地址
以上就是vue實現(xiàn)骨架屏的示例的詳細內(nèi)容，更多關(guān)于vue實現(xiàn)骨架屏的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
今天小編就為大家分享一篇在vue項目中正確使用iconfont的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
前端開發(fā)經(jīng)常遇到異步的問題,請求函數(shù)、鏈接庫等,下面這篇文章主要給大家介紹了關(guān)于vue3中實現(xiàn)異步組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
基于vue 添加axios組件,解決post傳參數(shù)為null的問題
下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為null的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文通過實例代碼給大家介紹了vue 2.x 中axios 封裝的get 和post方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-02-02
vue2的時候使用的是字體圖標,缺點就是比較單一,到了vue3,相信瀏覽器的性能起來,所以這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue3+vite2中使用svg的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue 全局loading組件,需要的朋友可以參考下2018-05-05
element-plus中el-table點擊單行修改背景色方法
這篇文章主要給大家介紹了關(guān)于element-plus中el-table點擊單行修改背景色的相關(guān)資料,這是產(chǎn)品新加了的一個需求,分享給同樣遇到這個需求的朋友,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了淺談vue.watch的觸發(fā)條件是什么？具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vuex之module使用方法及場景說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue+vux?vux安裝出現(xiàn)錯誤問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08