使用Vue開發(fā)的過程中，我們會(huì)在很多地方用到一些同樣的功能枯芬，比如說提示彈窗论笔，這種時(shí)候我們可以自定義一個(gè)插件，方便在多個(gè)地方使用千所。
項(xiàng)目目錄結(jié)構(gòu)：
image.png
-modules：放置模塊的文件夾狂魔，里面有一個(gè) alert 文件夾，用于存放 alert 插件 淫痰；
-Alert.vue：就是我們要在多處用到提示彈窗組件最楷；
-index.js：對(duì)于該自定義插件的一些配置；
代碼編寫：
Alert.vue
<template>
<!-- 初始狀態(tài)下隱藏提示框 -->
<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插件接收的確認(rèn)事件
success: {
type: Function,
default: () => {
console.log('點(diǎn)擊了success');
}
},
// confirm插件接收的取消事件
cancel: {
type: Function,
default: () => {
console.log('點(diǎn)擊了cancel');
}
}
},
methods: {
// 關(guān)閉彈窗
close() {
this.isShow = false
},
// alert 插件點(diǎn)擊陰影區(qū)域關(guān)閉彈窗
closeMask() {
if(this.type === 'alert') {
this.close();
}
},
// confirm 插件點(diǎn)擊取消觸發(fā)的事件
cancelEvent() {
this.cancel();
this.close();
},
// confirm 插件點(diǎn)擊確定觸發(fā)的事件
successEvent() {
this.success();
this.close();
}
},
updated(){
var _this = this;
if(_this.type == 'msg'){
setTimeout(function(){_this.close()},1500);
}
}
}
// 調(diào)用實(shí)例
// this.$alert('測(cè)試')
// this.$confirm('測(cè)試Confirm', () => {
// console.log('這是確定事件');
// }, () => {
// console.log('這是取消事件');
// })
// this.$msg('測(cè)試')
</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暴露了一個(gè)install方法，用于自定義插件
Alert.install = function (Vue) {
// 創(chuàng)建一個(gè)子類
const AlertConstructor = Vue.extend(AlertComponent);
// 實(shí)例化這個(gè)子類
const instance = new AlertConstructor();
// 創(chuàng)建一個(gè)div元素籽孙，并把實(shí)例掛載到div元素上
instance.$mount(document.createElement('div'));
// 將el插入到body元素中
document.body.appendChild(instance.$el);
// 添加實(shí)例方法
// msg插件的實(shí)例方法：只接收提示信息msg
Vue.prototype.$msg = msg => {
instance.type = 'msg';
instance.msg = msg;
instance.isShow = true;
};
// alert插件的實(shí)例方法：只接收提示信息msg
Vue.prototype.$alert = msg => {
instance.type = 'alert';
instance.msg = msg;
instance.isShow = true;
};
// confirm插件的實(shí)例方法烈评，可以接收三個(gè)參數(shù)
// msg：提示信息
// success：點(diǎn)擊確定執(zhí)行的函數(shù)
// cancel：點(diǎn)擊取消執(zhí)行的函數(shù)
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;
至此，我們的自定義插件就差最后點(diǎn)睛一筆了犯建，只需要使用 Vue.use 方法將插件安裝進(jìn)去即可讲冠。
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之前被調(diào)用
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('測(cè)試')
},
handleConfirm() {
this.$confirm('測(cè)試Confirm', () => {
console.log('這是確定事件');
}, () => {
console.log('這是取消事件');
})
},
handleMsg() {
this.$msg('測(cè)試')
}
}
}
</script>
頁(yè)面效果
1.alert
image.png
2.confirm
image.png
3.msg
image.png
此文章在原作者插件基礎(chǔ)上增加了msg,顯示時(shí)間可自行設(shè)定
原文https://blog.csdn.net/sinat_40697723/article/details/106036056
