一、封裝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>
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiIXZ05WZj91YpB3IwczX0xiRGZkRGZ0Xy9GbvNGL2EzXlpXazxSPrRVT3lERltmUywEMW1mY1RzRapnTtxkb5ckYplTeMZTTINGMShUYfRHelRHLwEzX39GZhh2css2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xyayFWbyVGdhd3LcV2Zh1Wa9M3clN2byBXLzN3btg3Pn5GcugDOyMTOzQTMzITOwAjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)