自定义组件 v-loading

通过指令方式

<template>
  <div class="loading-container">
    <icon-sync class="icon" spin />
  </div>
</template>

<script lang="ts" setup>
  import { IconSync } from '@arco-design/web-vue/es/icon'
</script>

<style lang="less" scoped>
  .loading-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);

    .icon {
      color: #409eff;
      font-size: 32px;
    }
  }
</style>

import { DirectiveBinding, createApp } from 'vue'
import Loading from './index.vue'

const toggle = (value: boolean, el: any) => {
  if (value) {
    el.appendChild(el.instance.$el)
  } else {
    const container = el.querySelector('.loading-container')
    if (container) {
      el.removeChild(container)
    }
  }
}

export default {
  mounted(el: any, binding: DirectiveBinding) {
    const app = createApp(Loading)
    const instance = app.mount(document.createElement('div'))
    el.instance = instance
    el.style.position = 'relative'
    toggle(binding.value, el)

  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    console.log(binding.value)
    toggle(binding.value, el)
  }
}

组件包裹的方式

<template>
  <a-spin :loading="loading" style="display: inherit">
    <slot></slot>
  </a-spin>
</template>

<script lang="tsx" setup>
  import { computed } from 'vue'
  import { loadingStore } from '@/store/modules/loading'

  const storeLoading = loadingStore() as any
  const props = defineProps({
    loadingName: {
      type: String
    }
  })

  const loading = computed(() => {
    const name = props.loadingName || 'loading'
    return storeLoading.$state[name]
  })
</script>