bigScreen大屏配置选项无法和画布中心的展示联动解决
作者：小孔菜菜
这篇文章主要为大家介绍了bigScreen大屏配置选项无法和画布中心的展示联动解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
问题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);
}
}
}
},以上就是bigScreen大屏配置选项无法和画布中心的展示联动解决的详细内容，更多关于bigScreen大屏配置画布联动的资料请关注脚本之家其它相关文章！