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

問題1. 大屏的配置選項(xiàng)無(wú)法和畫布中心的展示聯(lián)動(dòng)
解決過程:
大概找了2天時(shí)間,各種排查數(shù)據(jù)綁定的問題?文件傳參的問題?找的過程中差點(diǎn)沒把自己氣死????
最后發(fā)現(xiàn)是數(shù)據(jù)改變之后,沒有把改變的值更新到右側(cè)的屬性配置區(qū)。
畫布中心首次加載的時(shí)候,從config中讀取選項(xiàng)值,并且觸發(fā)右側(cè)的設(shè)置。
下一次,通過右側(cè)更改屬性值的時(shí)候,將值傳給dashboard,①子組件監(jiān)聽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)文章!
相關(guān)文章
微信小程序 小程序制作及動(dòng)畫(animation樣式)詳解
這篇文章主要介紹了微信小程序 小程序制作及動(dòng)畫詳解的相關(guān)資料,這里對(duì)小程序制作進(jìn)行了詳解,介紹動(dòng)畫部分的知識(shí),需要的朋友可以參考下2017-01-01
微信小程序 保留小數(shù)(toFixed)詳細(xì)介紹
這篇文章主要介紹了 微信小程序 保留小數(shù)(toFixed)詳細(xì)介紹的相關(guān)資料,這里附有實(shí)例,幫助大家學(xué)習(xí)參考此部分知識(shí),需要的朋友可以參考下2016-11-11
mitt tiny-emitter發(fā)布訂閱應(yīng)用場(chǎng)景源碼解析
這篇文章主要為大家介紹了mitt tiny-emitter發(fā)布訂閱應(yīng)用場(chǎng)景源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
微信小程序 頁(yè)面跳轉(zhuǎn)事件綁定的實(shí)例詳解
這篇文章主要介紹了微信小程序 頁(yè)面跳轉(zhuǎn)事件綁定的實(shí)例詳解的相關(guān)資料,希望通過本文大家能夠理解并應(yīng)用小程序頁(yè)面跳轉(zhuǎn)及事件綁定的實(shí)例,需要的朋友可以參考下2017-09-09

