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

使用 loading 的幾種方式

使用 loading 的方式:

組件式

<van-loading />

指令式

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

編程式

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

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

指令

注冊 loading 指令

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

使用指令

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

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

通過指令來創(chuàng)建 loading

思路：

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

來看下流程

代碼實(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) => {
  // 通過綁定 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
  }
  // 或者直接傳遞一個(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)畫
                    // 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)畫

elLoadingComponent 的 loading 組件是通過 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)用和指令，他們的核心邏輯是相同的，

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