bigScreen大屏配置選項無法和畫布中心的展示聯(lián)動解決

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

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

問題1. 大屏的配置選項無法和畫布中心的展示聯(lián)動

解決過程：

大概找了2天時間，各種排查數(shù)據(jù)綁定的問題？文件傳參的問題？找的過程中差點沒把自己氣死????

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

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

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

代碼學習：

// 源代碼：
            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)化：

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

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大屏配置選項無法和畫布中心的展示聯(lián)動解決的詳細內容，更多關于bigScreen大屏配置畫布聯(lián)動的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: