设计一个H5编辑器的数据模型和核心功能_图层

const store = {
            page: {
                title: '标题',
                setting: { /* 其他扩展信息：多语言，微信分享的配置，其他 */ },
                props: { /* 当前页面的属性设置，背景 */ },
                components: [
                    // components 有序，数组

                    {
                        id: 'x1',
                        name: '文本1',
                        tag: 'text', // type
                        style: { color: 'red', fontSize: '16px' },
                        attrs: { /* 其他属性 */ },
                        text: '文本1',
                    },
                    {
                        // 文本2
                    },
                    {
                        id: 'x3',
                        name: '图片1',
                        tag: 'image',
                        style: { width: '100px' },
                        attrs: { src: 'xxx.png' }
                    }
                ]
            },

            // 用于记录当前选中的组件，记录 id 即可
            activeComponentId: 'x3'
        }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
// 图层的实现 Vuex getters
        const getters = {
            // Vue computed
            layers() {
                store.page.components.map(c => {
                    return {
                        id: c.id,
                        name: c.name
                    }
                })
            }
        }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.