vue&ant-design-vue页面DIY,商城个性化设计,H5装修

最近有一个DIY小程序的需求，也就是小程序或H5的拖拽装修方案。参考了CRMEB。

完成的功能：通过简单的拖拽可以实现对页面的编辑，可以自定义组件的样式、内容，展示顺序等。

做出来的效果：

​

​

​

  

所用技术：Vue + and-design-vue + vuedraggable

如下图所示，PC端（编辑端）分为三个部分左侧基础组件栏、中部主体展示区域、右侧操作菜单栏。

​

基础组件代码结构和右侧配置项代码结构

​​
const panels = {
    basics: {
        title: '基础类',
        children: [
            {
                type: 'banner',
                icon: 'icon-lunbotu',
                title: '轮播图',
                content:{list:[]},
                facade: {
                    indicator_style: 1, //指示器样式 1：圆形  2：直线 3：数字 4：隐藏
                    indicator_align: 'flex-start', //指示器位置  left：左对齐  right：右对齐 center：居中
                    indicator_color: '#623ceb', //指示器颜色
                    imgRadius: 0,//图片圆角
                    topBottomPx: 0,//上下边距
                    leftRightPx: 0, // 左右边距
                }
            },
            {
                type: 'imageMf',
                icon: 'icon-tupianmofang',
                title: '图片魔方',
                content:{list:[{url:'',link: ''}]},
                facade: {
                    style: 1, //样式 1：单列  2：两列  3：三列   4：四列 5：左一右二  6：2*2  7：左二右一
                    topBottomPx: 0,//上下边距
                    leftRightPx: 0, // 左右边距
                    borderRadius: 0, //图片圆角
                    pictureSpac: 0, //图片间距
                }
            },
           ]
    }
}