使用Vue开发的过程中，我们会在很多地方用到一些同样的功能，比如说提示弹窗，这种时候我们可以自定义一个插件，方便在多个地方使用。

项目目录结构：

image.png

-modules：放置模块的文件夹，里面有一个 alert 文件夹，用于存放 alert 插件 ；

-Alert.vue：就是我们要在多处用到提示弹窗组件；

-index.js：对于该自定义插件的一些配置；

代码编写：

Alert.vue

export default {

name: 'Alert',

props: {

// 提示信息

msg: {

type: String,

default: ''

},

// 是否显示提示框

isShow: {

type: Boolean,

default: false

},

// 插件类型：alert/confirm

type: {

type: String,

default: 'alert'

},

// confirm插件接收的确认事件

success: {

type: Function,

default: () => {

console.log('点击了success');

}

},

// confirm插件接收的取消事件

cancel: {

type: Function,

default: () => {

console.log('点击了cancel');

}

}

},

methods: {

// 关闭弹窗

close() {

this.isShow = false

},

// alert 插件点击阴影区域关闭弹窗

closeMask() {

if(this.type === 'alert') {

this.close();

}

},

// confirm 插件点击取消触发的事件

cancelEvent() {

this.cancel();

this.close();

},

// confirm 插件点击确定触发的事件

successEvent() {

this.success();

this.close();

}

},

updated(){

var _this = this;

if(_this.type == 'msg'){

setTimeout(function(){_this.close()},1500);

}

}

}

// 调用实例

// this.$alert('测试')

// this.$confirm('测试Confirm', () => {

// console.log('这是确定事件');

// }, () => {

// console.log('这是取消事件');

// })

// this.$msg('测试')

.alert {

width: 500px;

height: auto;

position: fixed;

left: 50%;

margin-left: -250px;

top: 50%;

margin-top: -75px;

background-color: #fff;

border-radius: 15px;

box-shadow: 0 5px 8px rgba(0, 0, 0, .05);

z-index: 3000;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.msg{

background-color: rgba(0, 0, 0, 0);

box-shadow:none;

}

.msg .flex{

padding: 20px 40px!important;

background-color: #fff;

border-radius :10px;

box-shadow: 10px 10px 18px rgba(0, 0, 0, .2);

}

.flex {

flex: 1;

display: flex;

align-items: center;

justify-content: center;

padding: 40px 30px;

word-break: break-all;

line-height:40px;

}

.space-around {

display: flex;

justify-content: space-around;

align-items: center;

width: 100%;

border-top:1px solid #cfcfcf;

}

.btnCommon {

width: 250px;

height: 92px;

line-height: 92px;

text-align: center;

border-radius: 6px;

&.success {

background-color: $btnMain;

color: #EC736F;

cursor: pointer;

&:hover {

background-color: $btnDark;

}

}

&.cancel {

width: 249px;

color: #333;

cursor: pointer;

border-right: 1px solid #cfcfcf;

}

}

.mask {

position: fixed;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, .4);

left: 0;

top: 0;

overflow: hidden;

z-index: 2000;

}

.msg .mask{

display: none;

}

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

export default {

name: 'App',

methods: {

handleAlert() {

this.$alert('测试')

},

handleConfirm() {

this.$confirm('测试Confirm', () => {

console.log('这是确定事件');

}, () => {

console.log('这是取消事件');

})

},

handleMsg() {

this.$msg('测试')

}

}

}

页面效果

1.alert

image.png

2.confirm

image.png

3.msg

image.png

此文章在原作者插件基础上增加了msg,显示时间可自行设定