您好，可以问下咱们这个可一次多选几个图形么？ about web_designer

[xiaoai7904]

你好,
目前系统暂不支持该功能，感谢你提出这个功能,后期会增加该功能

目前想到的实现思路如下:

• 监听鼠标点击事件,进行区域选择(具体效果请参考示例)
• 根据鼠标选择区域内的组件包装在一个新的父元素
• 对新的父元素进行VueDraggableResizable组件包裹(Tips:VueDraggableResizable组件实现组件缩放,拖拽)
• 当移动时候,根据父元素移动的位置计算出子元素中相对父元素移动的位置得出最新值

目前想到的方案可能不是很完美,如果你有更好的方案可以提出来

再次感谢的提出的这个功能,系统只有工作空闲时间进行开发,开发周期较长

[changguichun88]

    非常感谢那么细心的回答，提出这个问题的初衷是在想可不可以选中拖拽到画布上的其中的某几个控件，点击右键可以保存成一个新的综合组件，下次我可以直接拖拽这个新生成的自定义的组合控件，直接生成想要的，不用一步一步的去重新拽组合了。这个是一个扩展功能。最近有这方面的需求，不知道您有什么比较好的思路提供么？真的感谢您能在百忙之中回答我的问题。

[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>