Element如何实现loading的方法示例

Tia ·

更新时间:2024-09-20

· 1539 次阅读

前言

使用 loading 的几种方式

loading 指令实现

指令

通过指令来创建 loading

代码实现

directive

创建 loading 实例

loading 动画

其他 loading 使用方式

编程式使用

组件式使用

总结

前言

互联网时代，网络“提速”日益频繁，人们打开Web或软件的速度越来越快。然而在某些情况下，难免会出现需要用户等待的时候。那么，在这种情况下，美观，有趣，又实用的加载动画，不仅能够有效地减缓用户负面情绪，让用户挺留更长的时间。

使用 loading 的几种方式

使用 loading 的方式:

组件式

<van-loading />

指令式

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

编程式

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

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

其他 loading 使用方式 编程式使用

编程式调用和指令，他们的核心逻辑是相同的，

指令需要通过绑定 DOM 上自定义属性或者指令参数拿到 loading 的参数，并在对应的 Hooks 中调用创建 loading 动画

编程式调用时候，这些参数就可以直接传递给创建 loading 组件的函数。