bigScreen大屏配置選項(xiàng)無(wú)法和畫布中心的展示聯(lián)動(dòng)解決
問(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)文章!
相關(guān)文章
微信小程序 開(kāi)發(fā)MAP(地圖)實(shí)例詳解
這篇文章主要介紹了微信小程序 開(kāi)發(fā)MAP(地圖)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06微信小程序 小程序制作及動(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-11mitt 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)資料,希望通過(guò)本文大家能夠理解并應(yīng)用小程序頁(yè)面跳轉(zhuǎn)及事件綁定的實(shí)例,需要的朋友可以參考下2017-09-09