有个问题，因为页面弹框很多， 7 8 个，
而且，表格类型的，纯文字详情类型的，echarts图类型的，都有，
我用了element的dialog组件，怎么统一管理更好以一些，
我现在是将每一弹窗都封装成一个组件。
将element的dialog封装成子组件的方法网上很多，
但是因为弹框很多，就不知道怎么管理方便了。
总感觉本末倒置了，在每一个弹框子组件中自乐很多一样的代码，脱离了组件的本意。
父组件：
<xlpt-history-dialog
:show.sync="dialogShow.xxxDialog"
:xxxDialogInfo ='xxxDialogInfo'
@closeDialog="closeHandle">
</xlpt-history-dialog>
import xxxDialog from './dialog/xxxDialog'
import xxxDialog from './dialog/xxxDialog'
import xxxDialog from './dialog/xxxDialog'
import xxxDialog from './dialog/xxxDialog'
import xxxDialog from './dialog/xxxDialog'
import xxxDialog from './dialog/xxxDialog'
export default {
components:{
xxxDialog,
xxxDialog,
xxxDialog,
xxxDialog,
xxxDialog,
xxxDialog,
},
data() {
return {
dialogShow:{
xxxDialog: false,
xxxDialog: false,
xxxDialog: false,
xxxDialog: false,
xxxDialog: false,
xxxDialog: false
},
}
},
methods: {
// 控制取消和X按钮，关闭弹窗
closeHandle(name){this.dialogShow[name] = false}
},
子组件：
<template>
<el-dialog
:visible.sync="visible"
:title="title"
:before-close="closeDialog"
width="90%"
class=""
>
<p>组件内容</p>
</el-dialog>
</template>
<script>
export default {
name: "xxxDialog",
props: {
show: {
type: Boolean,
default: false
},
xxxDialogInfo: {
type: Array,
default: false
}
},
data() {
return {
title: "弹框",
visible: this.show,
propxxxDialogInfo: [],
};
},
methods: {
closeDialog() {
this.$emit("closeDialog", this.$options.name);
},
},
watch: {
show() {
this.visible = this.show;
},
xxxDialogInfo: function(newVal, oldVal) {
var _this = this;
_this.propxxxDialogInfo = newVal; //newVal即是propxxxDialogInfo
},
deep: true,
immediate: true
}
};
</script>
每一个组件的基本格式就是这样，但是内容都不一样，总感觉有更好的方法去管理这些组件。