Element如何實現loading的方法範例

2022-06-15 10:00:02

前言

網際網路時代，網路“提速”日益頻繁，人們開啟Web或軟體的速度越來越快。然而在某些情況下，難免會出現需要使用者等待的時候。那麼，在這種情況下，美觀，有趣，又實用的載入動畫，不僅能夠有效地減緩使用者負面情緒，讓使用者挺留更長的時間。

使用 loading 的幾種方式

使用 loading 的方式:

元件式

<van-loading />

指令式

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

程式設計式

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

loading 指令實現

指令

註冊 loading 指令

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

使用指令

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

指令的作用:
自定義指令就是一個定義了一些 Hooks 的物件，這些 Hooks 接受繫結 DOM(這裡指的是div)、binding引數等引數。在這些 Hooks 可以進行一些 DOM 層的操作，來複用一些公共邏輯。
directive 具體使用參考

通過指令來建立 loading

思路：

loading 提示時建立一個 loading 元件,將它的 DOM 插入到檔案中。
關閉 loading 時，將 loading 對應的 DOM 從檔案中移除。

來看下流程

程式碼實現

檢視 Element 原始碼 packages/loading/src/directive

directive

const vLoading = {
  mounted(el, binding) {
    if(!!binding.value){
      createInstance(el, binding) // 建立 loading 元件並插入到檔案中
    }
  },
  updated(el, binding) {
    const instance = el.instance // 以建立的元件範例
    if (binding.oldValue !== binding.value) {
      if(binding.value) { // value 從 false -> true 時觸發
        createInstance(el, binding)
      } else { 
        instance.close() // 移除 loading 元件掛載的 DOM
      }
    }
  },
  unmounted(el) {
    el?.instance?.close() // 移除 loading 元件掛載的 DOM
  },
}

建立 loading 範例

createInstance 建立 loading 範例

const createInstance = (el, binding) => {
  // 通過繫結 DOM 的自定義屬性來設定 loading 的相關引數
  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,
  })
}

const Loading = function (options: ILoadingOptions = {}): ILoadingInstance {
  // 覆蓋預設設定
  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 轉換為真正的 DOM
  render(vm, document.createElement('div'))
  return {
    ...componentSetupConfig,
    vm,
    get $el() {
      return vm.el as HTMLElement
    },
  }
}

loading 動畫

elLoadingComponent 的 loading 元件是通過 svg + css animation 實現的。

<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 設定點劃線實虛線的間距，以及 stroke-dashoffset設定起始位置,具體程式碼檢視下面的demo程式碼。

loading codepen