vue3 loading组件主动调用

vue3 loading组件主动调用

1、Loading组件

<template>
  <div class=" w-screen h-screen">
    <div class="kkc-page-loading rem-ignore is-dark">
      <!-- <img class="w-[40px] h-[40px]" src="~/assets/images/loading.png" alt=""> -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="1em"
        height="1em"
        viewBox="0 0 24 24"
        class="kkc-page-loading__icon rem-ignore"
      >
        <path
          fill="#eb2303"
          d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
          opacity=".25"
        />
        <path
          fill="#eb2303"
          d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"
        >
          <animateTransform
            attributeName="transform"
            dur="0.75s"
            repeatCount="indefinite"
            type="rotate"
            values="0 12 12;360 12 12"
          />
        </path>
      </svg>
      <span class="kkc-page-loading__content rem-ignore">{{ message }}...</span>
    </div>
  </div>
</template>
​
<script setup lang="ts">
withDefaults(defineProps<{
  message?: string;
}>(), {
  message: '加载中'
})
</script>
<style lang="scss">
.kkc-page-loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 96PX;
  height: 96PX;
  background: rgba(255, 255, 255, 0.8);
  // border-radius: 10px;
  border-radius: 16PX;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3001;
​
  &__icon {
    font-size: 40PX;
    width: 40PX;
    height: 40PX;
  }
​
  &__content {
    margin-top: 10PX;
    height: 16PX;
    font-size: 16PX;
    font-weight: 400;
    color: #999999;
    line-height: 16PX;
  }
​
  &.is-dark {
    // border-radius: 16PX;
    background: rgba(0, 0, 0, 0.8);
  }
}
</style>

2、loading全局方法

方法1：

import { h, createApp } from 'vue'
import LoadingComponent from '../Loading/index.vue'
const loadingFun = () => {
  let el:Element
  let aa:any
  function showDialog (isShow = true, message:string) {
      if (isShow) {
        aa = createApp(LoadingComponent, {
          message
        })
        el = document.createElement('div')
        const _body = document.body
        _body.appendChild(el)
        aa.mount(el)
      } else {
        aa.unmount(el)
        el.parentElement.removeChild(el)
      }
  }
  return showDialog
}
export const Loading = loadingFun()
​

方法2：

import { render, h } from 'vue'
import LoadingComponent from '../Loading/index.vue'
export const Loading = (isShow = true, message?:string) => {
  const handleDestroy = () => {
    // 从 body 上移除组件
    render(null, document.body)
  }
  // 使用 h 函数创建 vnode
  const vnode = h(LoadingComponent, {
    message,
  })
  if (isShow) {
    if (process.client) {
      render(vnode, document.body)
    }
  } else {
    handleDestroy()
  }
  // 使用 render 函数将 vnode 渲染为真实DOM并挂载到 body 上
}
​

3、使用

引入Loading方法
​
Loading()  //展示loading
Loading(false)//隐藏

vue2 主动调用loading

import Loading from '../Loading/index.vue'
import Vue from 'vue'
const loadingFun = () => {
  let instance = null
  function showDialog(isShow = true) {
    if (isShow) {
      const LoadingComponent = Vue.extend(Loading)
      instance = new LoadingComponent().$mount()
      console.log(instance, 'ddd')

      const _body = document.body
      _body.appendChild(instance.$el)
      instance.$mount(_body)
    } else {
      instance.$destroy()
      document.body.removeChild(instance.$el)
      instance = null
    }
  }
  return showDialog
}
const loading = loadingFun()
export default loading

使用方法同vue3的使用方法