【2023-01-04】问题1. 大屏的配置选项无法和画布中心的展示联动
解决过程:
大概找了2天时间,各种排查数据绑定的问题?文件传参的问题?找的过程中差点没把自己气死😤😤
最后发现是数据改变之后,没有把改变的值更新到右侧的属性配置区。
画布中心首次加载的时候,从config中读取选项值,并且触发右侧的设置。
下一次,通过右侧更改属性值的时候,将值传给dashboard
,①子组件监听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);
}
}
}
},
代码优化:
想将一个对象中的属性依次更新给数组对象中的属性
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);
}
}
}
},