vue 3 如何实现一个组件，能放进模板，或者不放进模板直接当API使用？

Question

我想实现一个 loading 组件，直接在模板里面用就是

<!-- 一些html -->
...
  <Loading v-if="isLoading" />
...

同时如果不在模板里面使用，比如请求数据的时候，想要直接用api的方式调用,比如

Loading(); // 开始加载
await axios.get(...)
Loading.clear(); // 加载完毕

请问应该如何实现？

Answer 1

先正常写个组件，然后

import Vue from 'vue'
import components from './components.vue'

const xxx = {
  install: function (Vue) {
    const aaa = Vue.extend(components)
    const instance = new aaa()
      instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)
    Vue.prototype.loading = (data) => {
      // todo some things
    }
  },
}

export default xxx

把dom怼到body或者什么上面，方法挂载到vue或者什么上面，然后use下就可以全局用了，可以参考一些ui组件库的modal组件 以上vue2写法，vue3 取消了Vue实例，createApp挂载全局

import { createApp } from 'vue'

const app = createApp(App) 
app.config.globalProperties.loading= xxx;

思路大概这样，可以自己组织代码写法，怎么优雅怎么来，loading就很简单了，控制下显隐就完了