分享一个vue3,或者2中使用element-ui的el-dialog的封装例子😃😃

el-dialog是使用率很高的组件

使用el-dialog很多都是按照文档的例子，用一个变量控制是否显示，再来一个变量控制标题。

如果我这个对话框多个地方使用的话还要创建多个变量，甚至关闭之后还要清空一些变量，应该可以简化一点。我写vue的时候奉行的都是数据驱动，像刚才那种写法没有问题，也更灵活，反正都是数据驱动的，即使错误了也只是某些地方没正确处理数据而已。

所以封装也需要保持这些优点，灵活可控。

以下是封装代码

一个.vue文件，表示封装的相应el-dialog代码

<template>
    <el-dialog
        :title="configData.title+configData.afterTitle"
        v-model="configData.open"
        width="700px"
        :close-on-click-modal="false"
        append-to-body
    >
        <div class="edit-data-dialog">
            <h1>
                哈哈哈，代码封装
            </h1>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="configData.open = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
/**
 * 数据修改对话框
 */
import { defineComponent, ref, getCurrentInstance, reactive, nextTick } from 'vue';
import { mergeObjProperty } from '@/common/OtherTools';

export default defineComponent({
    name: 'EditDataDialog',
    emits: ['onSuccess'],
    components: {
    },
    setup(_, { emit }) {
        const configMap = {
            //配置信息，初始化时使用
            open: {
                oldValue: false,
            },
            title: {
                oldValue: 'XX数据',
            },
            afterTitle: {
                oldValue: '',
            },
            isShow: {
                //是否只是展示
                oldValue: false,
            },
        };
        const configData = reactive(initDataByConfig(configData,{},configMap));
        const dataContainer = reactive({
            loading:false,
            form:{},
            list:[],
        });
        /** 初始化数据（外部调用） */
        function initData(show = true, data_ = {}, option = {}) {
            initDataByConfig(configData,option,configMap);
            dataContainer.list = [];
            dataContainer.form = {};
            dataContainer.loading = false;
            configData.open = show;
            nextTick(() => {
                dataContainer.form = data_;
                getDataInfo();
            });
        }
        /** 获取数据列表 */
        function getDataInfo() {
          
        }
        return {
            configData,
            initData,
            dataContainer,
        };
    },
});
</script>

<style lang="scss" scoped>
.edit-data-dialog {
  
}
</style>

一个很简单的例子，不用创建多个变量来控制显示以及标题和各种杂七杂八的状态，全部由外部指定，再由initDataByConfig方法初始化。

以下是initDataByConfig方法的代码

/** 
 * 根据配置信息初始化对象
 * 如果 option 有该属性则使用该属性，没有则初始化
 * configMap example
 *  const configMap = {
        //配置信息，初始化时使用
        open: {
            oldValue: false,
        },
        title: {
            oldValue: '入库',
        },
        afterTitle: {
            oldValue: '',
        },
        isShow: {
            //是否只是展示
            oldValue: false,
        },
    };
 */
export function initDataByConfig(data = {}, configOption = {}, configMap = {}) {
    configOption = configOption || {};
    Object.keys(configMap).forEach(key => {
        //初始化一些配置信息
        if (Object.prototype.hasOwnProperty.call(configOption, key)) {
            data[key] = configOption[key];
        } else {
            if (typeof configMap[key].oldValue == 'function') {
                data[key] = configMap[key].oldValue();
            } else {
                data[key] = configMap[key].oldValue;
            }
        }
    });
    return data;
}

使用的话直接引用然后用ref获取组件实例调用initData方法就行了。

这是我目前对el-dialog使用的简单封装，所有数据皆可外部指定且不用创建多个变量，更灵活可控。

反正就是好用的非常。