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

二、运行效果

目录
相关文章
|
10天前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
96 59
|
10天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
10天前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
101 57
|
2天前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
1天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
9 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
1天前
|
JavaScript
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
8 2
|
1天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
8 1
|
1天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
9 1
|
1天前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
8 1
|
1天前
|
JavaScript
vue尚品汇商城项目-day04【26.排序操作(难点)】
vue尚品汇商城项目-day04【26.排序操作(难点)】
10 0
vue尚品汇商城项目-day04【26.排序操作(难点)】