element-plus中的message弹窗提示消息很好用，挂载在全局上，不需要引入组件，只需$message即可调用使用，但是因为样式固定，故需要一种可以全局使用的自定义组件的调用方式，同样实现只需要一行代码即可调用组件，无需引入。

首先，先写一个需要全局调用的组件，当然要接收一些参数，需要使用到vue3提供的defineProps方法，例如：

<script setup>
import { ElDialog } from "element-plus"
import { ref } from "vue"

const showCustomMessage = ref(true)

const props = defineProps({
    type: {
        type: String,
        default: "success"
    },
    content: {
        type: String,
        default: "提示内容"
    },
    duration: {
        type: Number,
        default: 2000
    }
})

setTimeout(() => {
    showCustomMessage.value = false
}, props.duration)

</script>

<template>
    <div>
        <el-dialog
            v-model="showCustomMessage"
            :show-close="false"
            align-center
            destroy-on-close
            center
        >
            <div>
                {{ props.content }}
            </div>
        </el-dialog>
    </div>
</template>

<style scoped lang="less">
:deep(.el-dialog) {
    width: auto;
    height: auto;
    
    .el-dialog__header {
        padding: 0;
        margin-right: 0;
    }
    
    .el-dialog__body {
        padding: 0.8rem 1.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        
        > div {
            color: #000;
            font-size: 0.24rem;
            font-weight: 500;
        }
    }
}
</style>

以上则是使用了element-plus的el-dialog当然也可以不用，该组件接收参数：type，content，duration

之后再创建一个js文件，用于将组件调用并开放方法，其中index.vue就是上述创建的组件文件，例如：

// 实现使用函数调用组件的逻辑
//   引入 创建虚拟节点 和渲染方法
import { createVNode, render } from "vue"
// 引入信息提示组件
import customMessage from "./index.vue"

// 准备dom容器
const div = document.createElement("div")
// 添加到body上
document.body.appendChild(div)

export default ({ type, content, duration = 2000 }) => {
    // 实现：根据MessageMain.vue渲染消息提示
    // 1. 导入组件
    // 2. 根据组件创建虚拟节点   第一个参数为要创建的虚拟节点  第二个参数为props的参数
    const vnode = createVNode(customMessage, { type, content, duration })
    // 3. 准备一个DOM容器
    // 4. 把虚拟节点渲染DOM容器中
    render(vnode, div)

    // 5. 等待duration时间后，删除DOM容器中的内容
    setTimeout(() => {
        render(null, div)
    }, duration + 500)
}

以上在export default开放的方法中接收type, content, duration，且在创建虚拟节点时传入，也就是createVNode(customMessage, { type, content, duration })，这样type，content，duration就可以传给组件

之后在main.js文件中，import进来，并使用app.provide挂载在全局出去：

import customMessage from "@/components/customMessage/index.js"; // 公共消息弹窗组件，自定义
app.provide("$customMessage", customMessage)

之后想要调用的话即可在需要的vue中，使用

import { inject } from "vue"
const customMessage = inject("$customMessage")
customMessage({
            type: "error",
            content: "失败",
            duration: 4000
})

至此可实现跟element-plus中$message一样的功能