Element如何實現(xiàn)loading的方法示例
前言
互聯(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結(jié)合el-upload實現(xiàn)騰訊云視頻上傳功能
這篇文章主要介紹了vue結(jié)合el-upload實現(xiàn)騰訊云視頻上傳功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07