快捷導(dǎo)航

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 可以進(jìn)行一些 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 codepen

其他 loading 使用方式

編程式使用

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

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