使用Vue开发的过程中，我们会在很多地方用到一些同样的功能，比如说提示弹窗，这种时候我们可以自定义一个插件，方便在多个地方使用。
项目目录结构：
image.png
-modules：放置模块的文件夹，里面有一个 alert 文件夹，用于存放 alert 插件 ；
-Alert.vue：就是我们要在多处用到提示弹窗组件；
-index.js：对于该自定义插件的一些配置；
代码编写：
Alert.vue
index.js
/**
* Created by ZD on 2020/11/3.
*/
import AlertComponent from './Alert.vue';
const Alert = {}
// Vue暴露了一个install方法，用于自定义插件
Alert.install = function (Vue) {
// 创建一个子类
const AlertConstructor = Vue.extend(AlertComponent);
// 实例化这个子类
const instance = new AlertConstructor();
// 创建一个div元素，并把实例挂载到div元素上
instance.$mount(document.createElement('div'));
// 将el插入到body元素中
document.body.appendChild(instance.$el);
// 添加实例方法
// msg插件的实例方法：只接收提示信息msg
Vue.prototype.$msg = msg => {
instance.type = 'msg';
instance.msg = msg;
instance.isShow = true;
};
// alert插件的实例方法：只接收提示信息msg
Vue.prototype.$alert = msg => {
instance.type = 'alert';
instance.msg = msg;
instance.isShow = true;
};
// confirm插件的实例方法，可以接收三个参数
// msg：提示信息
// success：点击确定执行的函数
// cancel：点击取消执行的函数
Vue.prototype.$confirm = (msg, success, cancel) => {
instance.type = 'confirm';
instance.msg = msg;
instance.isShow = true;
if(typeof success !== 'undefined') {
instance.success = success;
}
if(typeof cancel !== 'undefined') {
instance.cancel = cancel;
}
}
}
export default Alert;
至此，我们的自定义插件就差最后点睛一笔了，只需要使用 Vue.use 方法将插件安装进去即可。
main.js
import Vue from 'vue'
import App from './App.vue'
import alert from './modules/alert'
Vue.config.productionTip = false
Vue.use(alert) // 注意，Vue.use方法必须在new Vue之前被调用
new Vue({
render: h => h(App),
}).$mount('#app')
使用方法：
App.vue
页面效果
1.alert
image.png
2.confirm
image.png
3.msg
image.png
此文章在原作者插件基础上增加了msg,显示时间可自行设定
原文https://blog.csdn.net/sinat_40697723/article/details/106036056
