Vue3使用createVNode和render函数实现仿 Antd 加载动效

简介: 本文展示了如何在Vue3项目中使用`createVNode`和`render`函数实现一个仿Ant Design加载动效的自定义组件,并提供了详细的实现代码和使用示例。

前言

项目是基于Vue3+Element plus框架设计的,本来使用Element plus的Loading加载动效已经是满足项目需求的,但是感觉AntDesign的加载动效图标好看一点点,于是自行实现一个基于Vue3,以及仿AntDesign的加载动效的示例。其主要用到Vue3的createVNode和render函数。

一、示例代码

(1)/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>

(2)/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
}

(3)/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>

(4)/src/main.ts

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

二、运行效果

目录
相关文章
|
15天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
162 11
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
278 1
|
2月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
151 0
|
3月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
100 0
|
18天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
150 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
583 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
556 77
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
119 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
251 1