首页 >编程 >正文

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

这篇文章主要为大家介绍了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);
                        }
                    }
                }
            },

代码优化:

想将一个对象中的属性依次更新给数组对象中的属性

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

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大屏配置画布联动的资料请关注脚本之家其它相关文章!

网友评论

验证码 换一张
取 消
暂无评论...
三日内热门评论文章
关键词
为您推荐
  • 相关阅读
  • 业界资讯
  • 手机通讯
  • 电脑办公
  • 新奇数码
  • 软件游戏
  • 科学探索