vue3 全局弹窗组件编写

弹窗示例	弹窗示例
alert1	alert2
alert3	alert4

1. 用命令行npm init vue@latest新建的项目，并运行起来

2. components文件夹下新建一个文件夹hl-alert,该文件夹下新增hl-alert.vue和index.js文件，目录结构如下图

   
   
   目录结构
   
   

   2.1 hl-alet.vue文件中定义传入组件的属性和方法，内容如下：

2.2 vue2移除了vue.extend，我们使用createVNode和render来渲染弹窗
然后挂载到 config.globalProperties 上
index.js内容如下：

import {createVNode, render} from 'vue'
import HlAlert from './hl-alert.vue'

const myAlert = function(options) {
    const container = document.createElement('div')
    const vm = createVNode(
      HlAlert,
      options
    )
    render(vm, container)
    document.body.appendChild(container)
}  
const MyHlAlert = {
  install(app) {
    // 配置此应用
    app.config.globalProperties.$hlAlert = myAlert
  }
}
export default MyHlAlert

3. main.js中引入弹窗组件

import { createApp } from 'vue'
import App from './App.vue'
import HlAlert from './components/hl-alert/index'

import './assets/main.css'
const app = createApp(App)
app.use(HlAlert)
app.mount('#app')

4. 页面中使用

5. 如果想把该组件发布到npm上，请参考文章 npm 发布自己写的vue3的组件