Vue 3中创建一个挂载在this上的loading

今天翻遍全网也没有找到Vue3中一个类似Vue2中挂载在原型链上的$massage这样的文章, 然后我突然想到Ant Design of Vue组件库支持vue3.0, 这样就开始了漫长且痛苦的翻源码之路

在github中找到了如下几个文件

• ant-design-vue/components/index.js antd组件库的入口文件
• ant-design-vue/components/modal/index.js 对话框组件入口文件
• ant-design-vue/components/modal/confirm.js 渲染对话框dom

---

从头来说我希望的是一个调用方式为this.$loading()的loading组件
我第一想到的是一个类似message的写法
使用vue2的方式没有成功运行起来, 我想到了去找组件库, 也就是antd of vue 2.0.0 beta版本
首先找到入口函数, 看挂载方式

这一块是我们想要的

然后去上面找引用关系,也就是message和Modal.info的引用
奈何水平有限, 真看不懂message的代码, 于是挑了Modal.info的实现方式来实现

---

直接跳转到这里
这个文件不长,慢慢从上面往下看, 定义了close,update,destroy和render方法
render中的代码怎么这么熟悉, 这不就是cli创建出来的main.js中的代码或者文档中起步的实例代码吗

好的, 我们接下来捋一下思路
在2.x中的实现方式为:

1. 使用vue.extend实例化对象
2. 将实例化的对象插入到body中

在3.x中无非就是将extend换为creatApp

直接上代码

// loading.vue
<template>
	<teleport v-if="show" to="body">
		<div class="loading">
			loding...
		</div>
	</teleport>

</template>

<script>
    export default {
        name: "d-loading",
		    props:["parentdom"],
        data() {
            return {
                show: false
            }
        },
        methods: {
            init() {
                this.show = true;
                return this
            },
            hidden() {
                this.show = false;
                // 删除父元素
                this.parentdom.parentElement.removeChild(this.parentdom);
            }
        }
    }
</script>

<style scoped lang="scss">
	.loading {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		background: #fff;
		text-align: center;
		z-index: 9999;
	}
</style>

//loading.js loading组件的注册文件
import loading from "./d-loading"
import {createApp} from "vue"
function loading() {
  // 创建一个div包裹loading元素
  let div = document.createElement("div")
  // 将创建好的div插入到body中
  document.querySelector("body").appendChild(div);
  // 在创建好的div中重新实例化一个vue实例
  let loadingEl = createApp(loading, {parentdom: div})
  // 保存loading对象
  let loadingVm = loadingEl.mount(div)
  // 显示loading
  loadingVm.init();
  return () => {
  	  // 销毁实例
      loadingEl.unmount(div)
      // 销毁loading
      loadingVm.hidden();
  };
}

export default {
  install: (app) => {
    // 挂载到this.$loading中
    app.config.globalProperties.$loading = loading
  }
}

// main.js
import loading from "./components/loading";

createApp(App)
	.use(store)
	.use(router)
	.use(loading)
	.mount('#app')

//调用方式
showLoading(){
  console.log(this.$loading)
  let l = this.$loading()

  setTimeout(()=>{
      l()
  },5000)
}