bigScreen大屏配置选项无法和画布中心的展示联动解决

目录

• 问题1. 大屏的配置选项无法和画布中心的展示联动
• 解决过程：
• 代码学习：
• 代码优化：

问题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大屏配置画布联动的资料请关注我们其它相关文章！