Element如何實現(xiàn)loading的方法示例
更新時間：2022年06月15日 08:52:20 作者：三只萌新
本文主要介紹了Element如何實現(xiàn)loading的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
互聯(lián)網(wǎng)時代，網(wǎng)絡(luò)“提速”日益頻繁，人們打開Web或軟件的速度越來越快。然而在某些情況下，難免會出現(xiàn)需要用戶等待的時候。那么，在這種情況下，美觀，有趣，又實用的加載動畫，不僅能夠有效地減緩用戶負(fù)面情緒，讓用戶挺留更長的時間。
使用 loading 的幾種方式
使用 loading 的方式:
組件式
<van-loading />
指令式
<div v-loading="loading" ></div>
編程式
loading({
text: '加載中'
})loading 指令實現(xiàn)
指令
注冊 loading 指令
app.directive('focus', {
mounted(el, binding) {},
// ... other hooks
})使用指令
<div v-loading="isShow" >/** content **/ </div>
指令的作用:
自定義指令就是一個定義了一些 Hooks 的對象，這些 Hooks 接受綁定 DOM(這里指的是div)、binding參數(shù)等參數(shù)。在這些 Hooks 可以進行一些 DOM 層的操作，來復(fù)用一些公共邏輯。
directive 具體使用參考
通過指令來創(chuàng)建 loading
思路：
- loading 提示時創(chuàng)建一個
loading組件,將它的 DOM 插入到文檔中。 - 關(guān)閉 loading 時，將
loading對應(yīng)的 DOM 從文檔中移除。
來看下流程
代碼實現(xiàn)
查看 Element 源碼 packages/loading/src/directive
directive
const vLoading = {
mounted(el, binding) {
if(!!binding.value){
createInstance(el, binding) // 創(chuàng)建 loading 組件并插入到文檔中
}
},
updated(el, binding) {
const instance = el.instance // 以創(chuàng)建的組件實例
if (binding.oldValue !== binding.value) {
if(binding.value) { // value 從 false -> true 時觸發(fā)
createInstance(el, binding)
} else {
instance.close() // 移除 loading 組件掛載的 DOM
}
}
},
unmounted(el) {
el?.instance?.close() // 移除 loading 組件掛載的 DOM
},
}創(chuàng)建 loading 實例
createInstance 創(chuàng)建 loading 實例
const createInstance = (el, binding) => {
// 通過綁定 DOM 的自定義屬性來設(shè)置 loading 的相關(guān)參數(shù)
const textExr = el.getAttribute('element-loading-text')
const spinnerExr = el.getAttribute('element-loading-spinner')
const backgroundExr = el.getAttribute('element-loading-background')
const customClassExr = el.getAttribute('element-loading-custom-class')
const vm = binding.instance
el.instance = Loading({
text: vm && vm[textExr] || textExr,
spinner: vm && vm[spinnerExr] || spinnerExr,
background: vm && vm[backgroundExr] || backgroundExr,
customClass: vm && vm[customClassExr] || customClassExr,
fullscreen: !!binding.modifiers.fullscreen,
target: !!binding.modifiers.fullscreen ? null : el,
body: !!binding.modifiers.body,
visible: true,
lock: !!binding.modifiers.lock,
})
}Loading
const Loading = function (options: ILoadingOptions = {}): ILoadingInstance {
// 覆蓋默認(rèn)配置
options = {
...defaults,
...options,
}
// 支持選擇器
if (typeof options.target === 'string') {
options.target = document.querySelector(options.target) as HTMLElement
}
// 或者直接傳遞一個 DOM
options.target = options.target || document.body
// loading 插入的父元素
const parent = options.body ? document.body : options.target
options.parent = parent
// loading 組件
const instance = createLoadingComponent({
options,
globalLoadingOption,
})
// loading 插入到父元素中
parent.appendChild(instance.$el)
// 返回 loading 實例
return instance
}createLoadingComponent
export function createLoadingComponent({
options,
globalLoadingOption,
}: ILoadingCreateComponentParams): ILoadingInstance {
let vm: VNode = null
const data = reactive({
...options,
visible: false, // 控制 loading 是否展示
})
function setText(text: string) {
data.text = text
}
function close(){
data.visible = false
}
const componentSetupConfig = {
...toRefs(data),
setText,
close,
handleAfterLeave,
}
// loading 組件
const elLoadingComponent = {
name: 'ElLoading',
setup() {
return componentSetupConfig
},
render() {
return h(Transition, {
name: 'el-loading-fade',
}, {
// withDirectives 使用指令
default: withCtx(() => [withDirectives(createVNode('div', {
// ... loading 動畫
// v-show 指令，使用 visible 作為控制變量
}),[[vShow, this.visible]])]),
})
}
}
vm = createVNode(elLoadingComponent)
// 將 vnode patch 掛載到指定容器上， vnode 轉(zhuǎn)換為真正的 DOM
render(vm, document.createElement('div'))
return {
...componentSetupConfig,
vm,
get $el() {
return vm.el as HTMLElement
},
}
}loading 動畫
elLoadingComponent 的 loading 組件是通過 svg + css animation 實現(xiàn)的。
<svg class="loading" version="1.1" xmlns="http://www.w3.org/2000/svg" width='50' height='50'> <circle class="circle" cx="25" cy="25" r="20" fill="none" stroke-width="2" stroke="#000"/> </svg>
涉及 stroke-dasharray 設(shè)置點劃線實虛線的間距，以及 stroke-dashoffset設(shè)置起始位置,具體代碼查看下面的demo代碼。
其他 loading 使用方式
編程式使用
編程式調(diào)用和指令，他們的核心邏輯是相同的，
- 指令需要通過綁定 DOM 上自定義屬性或者指令參數(shù)拿到 loading 的參數(shù)，并在對應(yīng)的 Hooks 中調(diào)用創(chuàng)建 loading 動畫
- 編程式調(diào)用時候，這些參數(shù)就可以直接傳遞給創(chuàng)建 loading 組件的函數(shù)。
組件式使用
定義的 elLoadingComponent 通過 props 來控制 loading 的展示。
總結(jié)
主要分析了如何通過 vue directive 實現(xiàn) loading 的復(fù)用。包括了如何使用 loading 的三種方式,其中核心的邏輯是相同的渲染loading 組件，我們可以通過組件、編程式、指令將 loading 組件的DOM 插入到我們指定的掛載元素上。
到此這篇關(guān)于Element如何實現(xiàn)loading的方法示例的文章就介紹到這了,更多相關(guān)Element loading內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中 v-for循環(huán)的用法詳解,本文通過實例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
Animate.css這個動畫庫,很多的動畫在這個庫里面都定義好了,我們用的時候可以直接使用里面的類名就可以,下面我們就來看看如何在vue項目中使用Animate.css吧2023-08-08
vue結(jié)合el-upload實現(xiàn)騰訊云視頻上傳功能
這篇文章主要介紹了vue結(jié)合el-upload實現(xiàn)騰訊云視頻上傳功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
本文主要介紹了Vue3中key的作用和工作原理，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue中的全局指令防止按鈕重復(fù)點擊，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue組件tabbar使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了Vue.js實現(xiàn)的計算器功能,結(jié)合完整實例形式分析了vue.js響應(yīng)鼠標(biāo)事件實現(xiàn)基本的數(shù)值運算相關(guān)操作技巧,可實現(xiàn)四則運算及乘方、開方等功能,需要的朋友可以參考下2018-07-07
本篇文章主要介紹了詳解vue組件通信的三種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue中rem的配置的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹?vue3?中?computed?的新用法，對比?vue2?中的寫法，讓您快速掌握?vue3?中?computed?的新用法，對函數(shù)式寫法，options?寫法相關(guān)知識感興趣的朋友一起看看吧2021-11-11