创建CommonDialog.vue 文件
<template>
<el-dialog
:title="title"
:before-close="beforeClose"
:visible.sync="dialogVisible"
class="clearly-dialog detail-dialog"
append-to-body
v-if="dialogVisible"
>
<slot></slot>
</el-dialog>
</template>
<script>
export default {
name: "CommonDialog",
props: {
title: {
default: ''
},
value:{
type:Boolean
},
beforeClose:{
default(){
return function (done) {
done()
}
}
}
},
data () {
return {
dialogVisible: false,
};
},
watch: {
value(val){
this.dialogVisible = val
},
dialogVisible(val){
this.$emit('input',val)
}
},
methods: {
show() {
this.dialogVisible = true;
}
},
};
</script>
<style lang="scss">
.detail-dialog {
.el-dialog {
height: 700px; margin-top: 0 !important; position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%) !important;
background: url("../assets/images/home/dialog-bg.png") no-repeat;background-size: 100% 100%;
width: 12.6rem;display: flex;flex-direction: column;padding: 0 8px;z-index: 999;
-webkit-box-shadow: none ;
box-shadow: none;
.el-dialog__body {
flex: 1;height: 0;
}
.el-dialog__headerbtn {
width: 0.25rem;height: 0.25rem;
background: url("../assets/images/home/icon-close.png") no-repeat;background-size: 100% 100%;
top: 0.7rem;right: 0.4rem;
i {
display: none;
}
}
.el-dialog__header {
text-align: center;padding: 0.6rem 0 0.1rem 0;
.el-dialog__title {
color: #afdcff;font-size: 0.48rem;font-weight: bolder;
}
}
}
}
</style>
使用:
1. import CommonDialog from '_c/CommonDialog.vue';
2. components: {
CommonDialog
},
3. <CommonDialog title="xxxx">
<div>弹框</div>
</CommonDialog>