使用
this.$dialogPopup({
title: '测试',
width: '800px',
coexist: false,//控制上一次弹窗是否保留,默认false
option: {
text: '你好呀'
},
cancelClick: () => {
console.log('你点击了取消')
},
saveClick: () => {
console.log('你点击了保存')
}
})
index.vue
<template>
<!-- 封装弹框 -->
<el-dialog
custom-class="DialogPopup"
:title="dialogTitle"
:visible.sync="dialogPopVisible"
:width="popupWidth"
:before-close="onBeforeClose"
:center="true">
<component
:is="dom"
:option.sync="option"
/>
<span slot="footer" class="dialog-footer">
<el-button @click="Cancel">取 消</el-button>
<el-button type="primary" @click="Save">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'DialogPopup',
data () {
return {
title: '', // 窗体标题
dialogPopVisible: false, // 窗体显示控制
width: '550px'
}
},
computed: {
popupWidth: function () {
return this.width || '550px'
},
dialogTitle: function () {
return this.title || '标题'
}
},
methods: {
Cancel () {
this.dialogPopVisible = false
this.cancelClick()
},
Save () {
this.dialogPopVisible = false
this.saveClick(this.option)
},
onBeforeClose (done) {
done()
}
}
}
</script>
<style lang="scss">
.DialogPopup {
&.el-dialog {
z-index: 99;
background-color: #ffffff;
margin-top: 10% !important;
}
.el-dialog__header {
width: 100%;
height: 40px;
line-height: 5px;
box-sizing: border-box;
padding: 15px 20px;
font-size: 16px;
text-align: center;
}
.el-dialog__close.el-icon.el-icon-close {
font-size: 20px;
width: 17px;
height: 17px;
top: -10px;
position: relative;
right: 3px;
}
.el-dialog__body {
// padding: 30px 32px;
box-sizing: border-box;
}
.el-dialog__title {
color: #333333;
font-size: 16px;
line-height: 16px;
}
.el-dialog__footer {
text-align: center;
height: 72px;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
.el-button {
width: 80px;
height: 32px;
margin-top: 12px;
padding: 6px 20px;
}
}
}
</style>
index.js
//其中#mes为根目录的id,用户将dialog,appendChild到元素中
import Vue from 'vue'
import DialogPopup from './index.vue'
let instance
let iscoexist
const PopupBox = Vue.extend(DialogPopup)
DialogPopup.install = function (data) {
if (data.coexist) {
iscoexist = new PopupBox({
data
}).$mount()
document.querySelector('#mes').appendChild(iscoexist.$el)
// 挂载至页面(#app)
Vue.nextTick(() => {
iscoexist.dialogPopVisible = true
// show 和弹窗组件里的show对应,用于控制显隐
})
} else {
if (iscoexist) {
iscoexist.dialogPopVisible = false
document.querySelector('#mes').removeChild(iscoexist.$el)
iscoexist = null
}
if (instance) {
instance.dialogPopVisible = false
document.querySelector('#mes').removeChild(instance.$el)
instance = null
} // 移除已有弹窗,确保只有一个弹窗显示
instance = new PopupBox({
data
}).$mount()
document.querySelector('#mes').appendChild(instance.$el)
// 挂载至页面(#mes
Vue.nextTick(() => {
instance.dialogPopVisible = true
// dialogPopVisible 和弹窗组件里的show对应,用于控制显隐
})
}
// if (instance) {
// instance.dialogPopVisible = false
// document.querySelector('#mes').removeChild(instance.$el)
// instance = null
// } // 移除已有弹窗,确保只有一个弹窗显示
// instance = new PopupBox({
// data
// }).$mount()
// document.querySelector('#mes').appendChild(instance.$el)
// // 挂载至页面(#app)
// Vue.nextTick(() => {
// instance.dialogPopVisible = true
// })
}
export default DialogPopup
全局注册
import DialogPopup from '@/components/DialogPopup';
Vue.prototype.$dialogPopup = DialogPopup.install;
//TAPD
==**注意不要忘了引用**==
import element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(element)