如何优雅的让多弹框页面管理弹框？

Question

有个问题，因为页面弹框很多， 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>

每一个组件的基本格式就是这样，但是内容都不一样，总感觉有更好的方法去管理这些组件。

Answer 1

https://zhidao.baidu.com/question/1985056.html