快捷導(dǎo)航

Element如何實(shí)現(xiàn)loading的方法示例

更新時(shí)間：2022年06月15日 08:52:20 作者：三只萌新

本文主要介紹了Element如何實(shí)現(xiàn)loading的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

互聯(lián)網(wǎng)時(shí)代，網(wǎng)絡(luò)“提速”日益頻繁，人們打開(kāi)Web或軟件的速度越來(lái)越快。然而在某些情況下，難免會(huì)出現(xiàn)需要用戶等待的時(shí)候。那么，在這種情況下，美觀，有趣，又實(shí)用的加載動(dòng)畫(huà)，不僅能夠有效地減緩用戶負(fù)面情緒，讓用戶挺留更長(zhǎng)的時(shí)間。

使用 loading 的幾種方式

使用 loading 的方式:

組件式

<van-loading />

指令式

<div v-loading="loading" ></div>

編程式

loading({
   text: '加載中'
})

loading 指令實(shí)現(xiàn)

指令

注冊(cè) loading 指令

app.directive('focus', {
    mounted(el, binding) {},
    // ... other hooks 
})

使用指令

<div v-loading="isShow" >/** content **/ </div>

指令的作用:
自定義指令就是一個(gè)定義了一些 Hooks 的對(duì)象，這些 Hooks 接受綁定 DOM(這里指的是div)、binding參數(shù)等參數(shù)。在這些 Hooks 可以進(jìn)行一些 DOM 層的操作，來(lái)復(fù)用一些公共邏輯。
directive 具體使用參考

通過(guò)指令來(lái)創(chuàng)建 loading

思路：

loading 提示時(shí)創(chuàng)建一個(gè) loading 組件,將它的 DOM 插入到文檔中。
關(guān)閉 loading 時(shí)，將 loading 對(duì)應(yīng)的 DOM 從文檔中移除。

來(lái)看下流程

代碼實(shí)現(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)建的組件實(shí)例
    if (binding.oldValue !== binding.value) {
      if(binding.value) { // value 從 false -> true 時(shí)觸發(fā)
        createInstance(el, binding)
      } else { 
        instance.close() // 移除 loading 組件掛載的 DOM
      }
    }
  },
  unmounted(el) {
    el?.instance?.close() // 移除 loading 組件掛載的 DOM
  },
}

創(chuàng)建 loading 實(shí)例

createInstance 創(chuàng)建 loading 實(shí)例

const createInstance = (el, binding) => {
  // 通過(guò)綁定 DOM 的自定義屬性來(lái)設(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
  }
  // 或者直接傳遞一個(gè) 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 實(shí)例
  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 動(dòng)畫(huà)
                    // 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 動(dòng)畫(huà)

elLoadingComponent 的 loading 組件是通過(guò) svg + css animation 實(shí)現(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è)置點(diǎn)劃線實(shí)虛線的間距，以及 stroke-dashoffset設(shè)置起始位置,具體代碼查看下面的demo代碼。

loading codepen

其他 loading 使用方式

編程式使用

編程式調(diào)用和指令，他們的核心邏輯是相同的，

指令需要通過(guò)綁定 DOM 上自定義屬性或者指令參數(shù)拿到 loading 的參數(shù)，并在對(duì)應(yīng)的 Hooks 中調(diào)用創(chuàng)建 loading 動(dòng)畫(huà)
編程式調(diào)用時(shí)候，這些參數(shù)就可以直接傳遞給創(chuàng)建 loading 組件的函數(shù)。

組件式使用

定義的 elLoadingComponent 通過(guò) props 來(lái)控制 loading 的展示。

總結(jié)

主要分析了如何通過(guò) vue directive 實(shí)現(xiàn) loading 的復(fù)用。包括了如何使用 loading 的三種方式,其中核心的邏輯是相同的渲染loading 組件，我們可以通過(guò)組件、編程式、指令將 loading 組件的DOM 插入到我們指定的掛載元素上。

到此這篇關(guān)于Element如何實(shí)現(xiàn)loading的方法示例的文章就介紹到這了,更多相關(guān)Element loading內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: