vue3.0全局挂载自定义组件

效果示例图

代码示例 components/show-toast

initToast.js

import {
	createStore
} from 'vuex'
export default function initToast(v) {
	console.log("[]", v)
	// 挂在store到全局Vue原型上
	v.$toastStore = createStore({
		state: {
			show: false,
			icon: "success", //success:成功；fail:失败
			title: "标题",
			content: '内容',
			duration: 2000,
			success: null,
		},
		mutations: {
			hideToast(state) {
				state.show = false
			},
			showToast(state, data) {
				state = Object.assign(state, data)
				state.show = true
				setTimeout(() => {
					state.show = false
					return state.success(state.icon)
				}, state.duration)
			}
		}
	})
	// 注册$showToast到Vue原型上，以方便全局调用
	v.$showToast = function(option) {
		console.log("[m]", option)
		if (typeof option === 'object') {
			v.$toastStore.commit('showToast', option)
		} else {
			throw "配置项必须为对象传入的值为：" + typeof option;
		}
	}
}

show-toast.vue

main.js

import {
	createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App);

// 引入自定义弹出框组件
//createApp(App).config.globalProperties代替 Vue 2.x 的 Vue.prototype
import initToast from "@/components/show-toast/initToast.js"
import showToast from "@/components/show-toast/show-toast.vue"
initToast(app.config.globalProperties);
app.component('show-toast', showToast);

app.use(store).use(router).mount('#app');

页面使用案例