vue3自定义全局弹窗 demo

message.vue

<template>
    <div id="Message" :style="isok?'top:0':''">
        弹窗
    </div>
</template>
<script>
// 全局弹窗
export default {
    setup() {
        
    },
    data(){
        return{
            isok:false
        }
    },
    methods:{
      click(){
        this.isok = true
      }
    }
}
</script>
<style scoped>
  #Message{
    position: fixed;
    top: -200px;
    width: 2rem;
    height: 0.3rem;
    text-align: center;
    line-height: 0.3rem;
    border-radius: 5px;
    background: rgb(255, 255, 255);
    padding: 0px 0.1rem;
    left: 0px;
    right: 0px;
    margin: 10px auto;
    transition: top 1s ease 0s;
    box-shadow: rgb(238 238 238) 0px 0px 5px;
    z-index: 8;
  }
</style>

index.js

import Message from "./message.vue"
import {createApp} from "vue"
export default {
    install: function (app) {
        let message = createApp(Message)
        let div = document.createElement("div")
        div.id = "message"
        document.body.appendChild(div)
       let messageInstance  =  message.mount("#message")
     
    	// instance.click 中的click 指向message.vue 中的事件
        app.config.globalProperties.$Mrssage = messageInstance.click ;
    }
}

main.js

import { createApp } from 'vue'
import Root from './App.vue'
import './index.css'
import router from "./router/index.js"
import Message from "./util/message/index.js"
const app = createApp(Root);
app.use(Message);
app.use(router);
Mydirective(app).mount("#app");

在组件中直接 **this.$Mrssage();**调用