您好，选中拖拽到画布上的其中的某几个控件，点击右键可以保存成一个新的综合组件，下次我可以直接拖拽这个新生成的自定义的组合控件，直接生成想要的，不用一步一步的去重新拽组合了，配置属性的话可以对这个整体进行配置，这个是一个扩展功能。最近有这方面的需求，不知道您有什么比较好的思路提供么？ about web_designer

[xiaoai7904]

我暂时想到的思路如下:

• 实现上面提到的多选功能
• 通过获取选区里面的组件信息(宽高,位置,组件 props 等)保存一份数据对象（重点地方）
• 点击鼠标右键展示是否保存为自定义组件
• 如果数据需要持久化保存,可以把生成新组件数据对象保存在服务器,或者保存在localStorage
• 系统通过服务器数据动态生成组件

其实加载自定义组件就是把你之前选择的组件通过一个父容器包装一层，父容器里面去渲染你选择的子组件,可以参考containerLayout.vue这个组件就是一个父容器组件,里面实现了加载子组件功能

伪代码:

// 保存数据结构可以是如下格式
{
    key: 'newCustom',
    props: {
        custom: {name: '自定义组件', icon: '新组件icon图标'},
        style: {}, // 新组件样式属性
        options: [], // 新组件属性配置对象
        // 保存子组件props数据
        children: [{
            key: 'xaInput',
            props: {},// 输入框props属性
            ... // 其他配置
        }]
    }
}
// 新组件动态生成模版文件 newCustom.vue
<script>
export default {
    name: 'newCustom',
    props: {
        options: Object // 这个就是上面定义的数据
    },

    render(h) {
        return <div class="xa-newcusotom">
            {this.options.children.map(item => {
                return <component is={item.key} options={item.props}></component>
            })}
    </div>
  }
}
</script>

[xiaoai7904]

以上方案 是根据目前系统实现方式
之前有考虑上传自定义组件功能, 后面想到需要部署服务器就放弃了,如果系统去实现该功能可以把数据可暂时保存在浏览器本地