一、封装Dialog弹框组件
Dialog.vue
<template>
<div>
<el-dialog
class="comn_dialog"
:title="dialogTitle"
:visible.sync="visible"
:width="popupWidth"
:top="popupTop"
>
<slot>
<p>弹窗内容自定义</p>
</slot>
<span slot="footer" class="dialog-footer">
<el-button @click="Cancel">取 消</el-button>
<el-button type="primary" @click="Save">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
dialogTitle: {
type: String,
default: "标题"
},
centerDialogVisible: {
type: Boolean,
default() {
return false;
}
},
popupWidth: {
type: String,
default() {
return "430px";
}
},
popupTop: {
type: String,
default() {
return "23vh";
}
}
},
computed: {
visible: {
get() {
return this.centerDialogVisible;
},
set(val) {
// 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
this.$emit("updateVisible", val);
}
}
},
methods: {
Cancel() {
this.$emit("resetPopupData");
},
Save() {
this.$emit("submitPopupData");
}
}
};
</script>
<style lang="scss">
.comn_dialog {
.el-dialog__header {
padding: 8px 0px 3px 8px;
border-bottom: 1px solid #e7e6e6;
box-shadow: 0px 4px 4px -4px #d1d0d0;
}
.el-dialog__title {
font-size: 16px;
letter-spacing: 1px;
color: #464646;
font-weight: bolder;
}
.el-dialog__footer {
padding: 0px 20px 20px 0px;
}
.el-dialog__headerbtn {
position: static; // 兼容IE11 ,取消原有的position定位
}
.el-dialog__close {
color: $header_bg;
font-size: 20px;
font-weight: bolder;
position: absolute;
top: 8px;
right: 8px;
&::after {
content: '';
border: 2px solid $header_bg;
width: 20px;
height: 20px;
border-radius: 25px;
position: absolute;
right: -2px;
top: -3px;
}
}
.el-dialog__body {
padding: 20px;
}
}
</style>
二、在组件中引入并使用
<template>
<div class="test">
<el-button @click="show" type="primary">点击显示弹框</el-button>
<comn-dialog
:dialogTitle="dialogTitle"
:centerDialogVisible="visible"
@updateVisible="updateVisible"
@resetPopupData="resetPopupData"
@submitPopupData="submitPopupData"
:popupWidth="'350px'"
:popupTop="'10vh'"
>
<p class="enable_font">
<i class="el-icon-info enable-icon"></i>
<span>
确定要
<em class="operate_font"> 删除</em>
选中数据吗？
</span>
</p>
</comn-dialog>
</div>
</template>
<script>
import comnDialog from "@/components/Dialog.vue"
export default {
components:{
comnDialog
},
data() {
return {
dialogTitle: "",
visible: false
};
},
methods: {
updateVisible(val) {
this.visible = val;
},
resetPopupData() {
// 这里可重置数据
this.visible = false;
},
submitPopupData() {
//这里向后台 提交数据
this.visible = false;
},
show() {
this.visible = true;
this.dialogTitle = "删除确认";
}
}
};
</script>
