Vue3 は createVNode と render 関数を使用して Antd のような動的読み込み効果を実現します

プロジェクトはVue3+Element plusのフレームワークをベースに設計されており、当初はプロジェクトのニーズに合わせてElement plusのローディングアニメーションエフェクトを使用していましたが、AntDesignのローディングアニメーションアイコンの方がもう少し見栄えが良いと感じたので実装してみました。 Vue3ベースでAntDesign風のアニメーションを自作したアニメーションの読み込み例。

主にVue3のcreateVNodeとrender関数を使用します。

/src/utils/antdLodingUtil/antdLoding.vue

<template>
  <transition name="animation">
    <div class="diy-loading-wrap" v-if="isOpen">
     <div class="diy-loading-wrap-content">

      <div class="diy-loading-wrap-content-spin">
        <div class="ant-spin ant-spin-spinning">
          <span class="ant-spin-dot ant-spin-dot-spin">
            <i class="ant-spin-dot-item"></i>
            <i class="ant-spin-dot-item"></i>
            <i class="ant-spin-dot-item"></i>
            <i class="ant-spin-dot-item"></i>
          </span>
        </div>
      </div>

      <p class="diy-loading-wrap-content-p">{
   
   { text }}</p>
     </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      text: '数据正在加载中...',
    }
  },
}
</script>

<style lang="less" scoped>
  :root {
    --el-mask-color: rgba(255, 255, 255, 0.9);
    --el-transition-duration: 0.3s;
    --el-transition-duration-fast: 0.2s;
    --el-loading-spinner-size: 42px;
    --el-loading-fullscreen-spinner-size: 50px;
  }

  /* animation 动画 */
  .animation-enter-active{
    animation: animationAction 0.3s;
  }
  
  .animation-leave-active{
    animation: animationAction 0.5s reverse;
  }
  
  @keyframes animationAction {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
  /* / animation 动画 */

  .diy-loading-wrap {
    position: absolute;
    z-index: 2000;
    background-color: var(--el-mask-color);
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity var(--el-transition-duration);
  }

  .diy-loading-wrap .diy-loading-wrap-content {
    top: 50%;
    margin-top: calc((0px - var(--el-loading-spinner-size)) / 2);
    width: 100%;
    text-align: center;
    position: absolute;
  }

  .diy-loading-wrap .diy-loading-wrap-content .diy-loading-wrap-content-spin {

    .ant-spin {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: #000000d9;
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5715;
      list-style: none;
      font-feature-settings: tnum;
      position: absolute;
      display: none;
      color: #1890ff;
      text-align: center;
      vertical-align: middle;
      opacity: 0;
      transition: transform .3s cubic-bezier(.78,.14,.15,.86)
    }

    .ant-spin-spinning {
      position: static;
      display: inline-block;
      opacity: 1
    }

    .ant-spin-dot {
      position: relative;
      display: inline-block;
      font-size: 20px;
      width: 1em;
      height: 1em
    }

    .ant-spin-dot-spin {
      transform: rotate(45deg);
      animation: antRotate 1.2s infinite linear
    }

    .ant-spin-dot-item {
      position: absolute;
      display: block;
      width: 9px;
      height: 9px;
      background-color: #1890ff;
      border-radius: 100%;
      transform: scale(.75);
      transform-origin: 50% 50%;
      opacity: .3;
      animation: antSpinMove 1s infinite linear alternate
    }

    .ant-spin-dot-item:nth-child(1) {
      top: 0;
      left: 0;
    }
    .ant-spin-dot-item:nth-child(2) {
      top: 0;
      right: 0;
      animation-delay: .4s;
    }
    .ant-spin-dot-item:nth-child(3) {
      right: 0;
      bottom: 0;
      animation-delay: .8s;
    }

    .ant-spin-dot-item:nth-child(4) {
      bottom: 0;
      left: 0;
      animation-delay: 1.2s;
    }

    @keyframes antRotate {
      to {
        transform:rotate(405deg);
      }
    }

    @keyframes antSpinMove {
      to {
        opacity: 1;
      }
    }
  }

  .diy-loading-wrap .diy-loading-wrap-content .diy-loading-wrap-content-p {
    margin: 5px auto 0 auto;
    color: #1890ff;
    font-size: 14px;
  }  
</style>

/src/utils/antdLodingUtil/antdLoding.js
 

import { createVNode, render } from 'vue'
import loading from './antdLoding.vue'

let instance

/**
 * 打开仿 Antd 加载的方法
 * @param {*} option 
 */
function showLoading(option) {
  instance = createVNode(loading, option)
  render(instance, document.querySelector('body'))
  instance.component.data.isOpen = true
}

/**
 * 关闭仿 Antd 加载的方法
 */
function hideLoading() {
  if (instance) {
    instance.component.data.isOpen = false
  }
}

export {
  showLoading,
  hideLoading
}

/src/views/Example/AntdLoding/index.vue

<template>
    <div style="position: fixed; z-index: 9999; padding: 100px">
      <el-button @click="handleOpenAntdLoding($event)" type="primary" size="small">open</el-button>
      <el-button @click="handleCloseAntdLoding($event)" type="danger" size="small">close</el-button>
    </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    /**
     * 打开仿 Antd 加载的句柄方法
     */
    handleOpenAntdLoding(evt) {
      this.$elementUtil.handleElButtonBlur(evt)
      this.$antdLodingUtil.showLoading({ author: '帅龍之龍' })
    },

    /**
     * 关闭仿 Antd 加载的句柄方法
     */
    handleCloseAntdLoding(evt) {
      this.$elementUtil.handleElButtonBlur(evt)
      this.$antdLodingUtil.hideLoading()
    }
  }
}
</script>

/src/main.js

// 引入仿Antd加载器工具并配置为全局方法
import * as antdLodingUtil from '@/utils/antdLodingUtil/antdLoding'
app.config.globalProperties.$antdLodingUtil = antdLodingUtil

効果はこんな感じです～