bigScreen大屏配置選項(xiàng)無(wú)法和畫布中心的展示聯(lián)動(dòng)解決

更新時(shí)間：2023年01月05日 09:17:43 作者：小孔菜菜

這篇文章主要為大家介紹了bigScreen大屏配置選項(xiàng)無(wú)法和畫布中心的展示聯(lián)動(dòng)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

問(wèn)題1. 大屏的配置選項(xiàng)無(wú)法和畫布中心的展示聯(lián)動(dòng)

解決過(guò)程：

大概找了2天時(shí)間，各種排查數(shù)據(jù)綁定的問(wèn)題？文件傳參的問(wèn)題？找的過(guò)程中差點(diǎn)沒(méi)把自己氣死????

最后發(fā)現(xiàn)是數(shù)據(jù)改變之后，沒(méi)有把改變的值更新到右側(cè)的屬性配置區(qū)。

畫布中心首次加載的時(shí)候，從config中讀取選項(xiàng)值，并且觸發(fā)右側(cè)的設(shè)置。

下一次，通過(guò)右側(cè)更改屬性值的時(shí)候，將值傳給dashboard，①子組件監(jiān)聽(tīng)dashboard的變化，實(shí)時(shí)更新；② dashboard也要賦值給配置項(xiàng)widgetOption，以便右側(cè)可以保持一致。

代碼學(xué)習(xí)：

// 源代碼：
            widgetValueChanged(key, val) {
                // 更新大屏屬性
                if (this.screenCode === 'screen') {
                    let newSetup = [];
                    this.dashboard = common.deepClone(val)
                    this.widgetOptions.setup.forEach(el => {
                        if (el.name === 'width') {
                            el.value = this.dashboard.width
                        } else if (el.name === 'height') {
                            el.value = this.dashboard.height
                        } else if (el.name === 'title') {
                            el.value = this.dashboard.title
                        } else if (el.name === 'backgroundColor') {
                            el.value = this.dashboard.backgroundColor
                        } else if (el.name === 'description') {
                            el.value = this.dashboard.description
                        } else if (el.name === 'backgroundImage') {
                            el.value = this.dashboard.backgroundImage
                        }
                        newSetup.push(el);
                    });
                    this.widgetOptions.setup = newSetup;
                } else {
                    // 更新組件屬性
                    for (let i = 0; i < this.widgets.length; i++) {
                        if (this.widgetIndex === i) {
                            this.widgets[i].value[key] = common.deepClone(val);
                            setDefaultValue(this.widgets[i].options[key], val);
                        }
                    }
                }
            },

代碼優(yōu)化：

想將一個(gè)對(duì)象中的屬性依次更新給數(shù)組對(duì)象中的屬性

widgetValueChanged(key, val) {
    // 更新大屏屬性
    if (this.screenCode === 'screen') {
        let newSetup = [];
        this.dashboard = common.deepClone(val)
        this.widgetOptions.setup.forEach(el => {
            if (this.dashboard.hasOwnProperty(el.name)) {
                el.value = this.dashboard[el.name]
            }
            newSetup.push(el)
        })
        this.widgetOptions.setup = newSetup;
    } else {
        // 更新組件屬性
        for (let i = 0; i < this.widgets.length; i++) {
            if (this.widgetIndex === i) {
                this.widgets[i].value[key] = common.deepClone(val);
                setDefaultValue(this.widgets[i].options[key], val);
            }
        }
    }
},

以上就是bigScreen大屏配置選項(xiàng)無(wú)法和畫布中心的展示聯(lián)動(dòng)解決的詳細(xì)內(nèi)容，更多關(guān)于bigScreen大屏配置畫布聯(lián)動(dòng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: