Element如何实现loading的方法示例

<van-loading />

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

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

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

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

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
  },
}

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
 }

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
    },
  }
}

<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>