vue3 自定义loading

使用antdv 后发现只有button支持loaidng属性，而其他元素不能使用loading来显示是否加载中，需要套一层 a-spin 才能支持，非常不方便。

所以写了个自定义的指令来进行处理

新建loading.vue文件用来页面显示

<template>
  <div class="loading-container">
    <LoadingOutlined />
    <p>{{ state.loading.text }}p>
  div>
template>
<script lang="ts" setup>
import { LoadingOutlined } from '@ant-design/icons-vue';
import { reactive } from 'vue';
const FONT_SIZE = {
  samll: {
    icon: '16px',
    p: '12px'
  },
  default: {
    icon: '20px',
    p: '16px'
  },
  large: {
    icon: '24px',
    p: '20px'
  }
}
const state = reactive({
  loading: {
    text: '正在加载中',
    fontSize: {
      icon: '20px',
      p: '16px'
    }
  } as { text?: string; fontSize?: { icon: string; p: string } }
})



function updateInfo(params: { text: string; size: 'samll' | 'default' | 'large' }) {
  state.loading = {
    text: params.text,
    fontSize: FONT_SIZE[params.size]
  }
}

defineExpose({ updateInfo })

script>
<style lang="scss" scoped>
.loading-container {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: rgba($color: #ffffff, $alpha: 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #335dfd;
  z-index: 999999;

  :deep(.anticon-loading) {
    font-size: 20px;
  }

  p {
    margin-top: 10px;
    font-size: 16px;
  }
}
style>

在新建个loading.ts 用来注册v-loading 相关操作

import { createApp, Directive } from 'vue';
import Loading from './index.vue';
/**
 * @description 判断是否为空对象
 * **/
export const isEmptyObj = (obj: object): boolean => {
  return JSON.stringify(obj) === "{}";
};


/** v-eLoading:[loadingConfig]="state.l||state.a */
const loading: Directive = {
  mounted(el, binding) {
    const app = createApp(Loading);
    const instance = app.mount(document.createElement('div')) as any;
    el.instance = instance;
    el.style.position = 'relative';
    const arg:any = binding.arg
    if (!isEmptyObj(arg as any)){
      const params = {
        text:arg?.text||'正在加载中',
        size:'default'
      }
      instance.updateInfo(params)
    }
      if (binding.value) {
        appendEl(el);
      }
  },
  updated(el, binding) {
    console.log(binding.value !== binding.oldValue)
    if (binding.value !== binding.oldValue) {
      binding.value ? appendEl(el) : removeEl(el);
    }
  },
};

const appendEl = (el: { appendChild: (arg0: any) => void; instance: { $el: any; }; }) => {
  el.appendChild(el.instance.$el);
};

const removeEl = (el: { removeChild: (arg0: any) => void; instance: { $el: any; }; }) => {
  el.removeChild(el.instance.$el);
};

export default loading;

最后在main.ts 进行注册

import loadingDirective from 'packages\Loading\index.ts'
createApp(App).directive('loading', loadingDirective).mount('#app')

在页面中就可以直接进行v-loading 进行使用了

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