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

問題1. 大屏的配置選項無法和畫布中心的展示聯(lián)動
解決過程:
大概找了2天時間,各種排查數(shù)據(jù)綁定的問題?文件傳參的問題?找的過程中差點沒把自己氣死????
最后發(fā)現(xiàn)是數(shù)據(jù)改變之后,沒有把改變的值更新到右側(cè)的屬性配置區(qū)。
畫布中心首次加載的時候,從config中讀取選項值,并且觸發(fā)右側(cè)的設(shè)置。
下一次,通過右側(cè)更改屬性值的時候,將值傳給dashboard,①子組件監(jiān)聽dashboard的變化,實時更新;② dashboard也要賦值給配置項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)化:
想將一個對象中的屬性依次更新給數(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)動解決的詳細內(nèi)容,更多關(guān)于bigScreen大屏配置畫布聯(lián)動的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
mitt tiny-emitter發(fā)布訂閱應(yīng)用場景源碼解析
這篇文章主要為大家介紹了mitt tiny-emitter發(fā)布訂閱應(yīng)用場景源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12

