使用Vue开发的过程中，我们会在很多地方用到一些同样的功能，比如说提示弹窗，这种时候我们可以自定义一个插件，方便在多个地方使用。
项目目录结构：
image.png
-modules：放置模块的文件夹，里面有一个 alert 文件夹，用于存放 alert 插件 ；
-Alert.vue：就是我们要在多处用到提示弹窗组件；
-index.js：对于该自定义插件的一些配置；
代码编写：
Alert.vue
<template>
<!-- 初始状态下隐藏提示框 -->
<div v-show="isShow">
<div class="alert" :class="type">
<div class="flex" >{{msg}}</div>
<!-- alert插件只显示确定按钮 -->
<div class="space-around" v-if="type === 'alert'">
<div class="btnCommon success" @click="close">确定</div>
</div>
<!-- confirm插件显示取消和确定按钮 -->
<div class="space-around" v-else-if="type === 'confirm'">
<div class="btnCommon cancel" @click="cancelEvent">取消</div>
<div class="btnCommon success" @click="successEvent">确定</div>
</div>
</div>
<!-- 背景遮罩 -->
<div class="mask" @click="closeMask" v-if="type !== 'msg'"></div>
</div>
</template>
<script>
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('测试')
</script>
<style lang="stylus" rel="stylesheet/stylus">
.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;
}
</style>
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
<template>
<div id="app">
<button @click="handleAlert">alert</button>
<button @click="handleConfirm">confirm</button>
<button @click="handleMsg">alert</button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
handleAlert() {
this.$alert('测试')
},
handleConfirm() {
this.$confirm('测试Confirm', () => {
console.log('这是确定事件');
}, () => {
console.log('这是取消事件');
})
},
handleMsg() {
this.$msg('测试')
}
}
}
</script>
页面效果
1.alert
image.png
2.confirm
image.png
3.msg
image.png
此文章在原作者插件基础上增加了msg,显示时间可自行设定
原文https://blog.csdn.net/sinat_40697723/article/details/106036056
