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

使用el-dialog很多都是按照文檔的例子，用一個(gè)變量控制是否顯示，再來一個(gè)變量控制標(biāo)題。

如果我這個(gè)對(duì)話框多個(gè)地方使用的話還要?jiǎng)?chuàng)建多個(gè)變量，甚至關(guān)閉之后還要清空一些變量，應(yīng)該可以簡化一點(diǎn)。我寫vue的時(shí)候奉行的都是數(shù)據(jù)驅(qū)動(dòng)，像剛才那種寫法沒有問題，也更靈活，反正都是數(shù)據(jù)驅(qū)動(dòng)的，即使錯(cuò)誤了也只是某些地方?jīng)]正確處理數(shù)據(jù)而已。

所以封裝也需要保持這些優(yōu)點(diǎn)，靈活可控。

以下是封裝代碼

一個(gè).vue文件，表示封裝的相應(yīng)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>
/**
 * 數(shù)據(jù)修改對(duì)話框
 */
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 = {
            //配置信息，初始化時(shí)使用
            open: {
                oldValue: false,
            },
            title: {
                oldValue: 'XX數(shù)據(jù)',
            },
            afterTitle: {
                oldValue: '',
            },
            isShow: {
                //是否只是展示
                oldValue: false,
            },
        };
        const configData = reactive(initDataByConfig(configData,{},configMap));
        const dataContainer = reactive({
            loading:false,
            form:{},
            list:[],
        });
        /** 初始化數(shù)據(jù)（外部調(diào)用） */
        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();
            });
        }
        /** 獲取數(shù)據(jù)列表 */
        function getDataInfo() {
          
        }
        return {
            configData,
            initData,
            dataContainer,
        };
    },
});
</script>

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

一個(gè)很簡單的例子，不用創(chuàng)建多個(gè)變量來控制顯示以及標(biāo)題和各種雜七雜八的狀態(tài)，全部由外部指定，再由initDataByConfig方法初始化。

以下是initDataByConfig方法的代碼

/** 
 * 根據(jù)配置信息初始化對(duì)象
 * 如果 option 有該屬性則使用該屬性，沒有則初始化
 * configMap example
 *  const configMap = {
        //配置信息，初始化時(shí)使用
        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獲取組件實(shí)例調(diào)用initData方法就行了。

這是我目前對(duì)el-dialog使用的簡單封裝，所有數(shù)據(jù)皆可外部指定且不用創(chuàng)建多個(gè)變量，更靈活可控。

反正就是好用的非常。

有些封裝不僅僅是模塊分離，還有代碼分離，反正就是一句話，代碼是先寫給人看的，然后才是機(jī)器。我奉行的封裝是必要才封裝，不然是不會(huì)去封裝的。

文章原文文章來源地址http://www.zghlxwxcb.cn/news/detail-651250.html

到了這里，關(guān)于element-ui的el-dialog，簡單的封裝。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！