实现装修页面组件拖拽（vue）

基于 vue + ant-design + vue-draggable 实现的可视化页面装修功能

$ npm install 使用

# develop mode $ npm run dev 自定义组件配置项

参考组件 U000001：

/** 数据类型的配置 */ const datas = { field1, field2, field3, }; /** 样式类型的配置 */ const styles = { field1, field2, field3, }; field 参考

格式：

/** 自行替换[]中的值 */ [name]: { title: "[配置项的文案]", type: "[配置项的类型]" }

Example:

href: { title: '跳转链接', type: 'text' },

通用字段：

[name]: { title: "[文案]", type: 'text', value: '', showBy: 'show_title' //根据哪个参数控制显示 }, number: 数字类型输入框

[name]: { title: "[文案]", type: 'number', value: 1, max: 100 }, color: 颜色选择器

[name]: { title: "[文案]", type: 'color', value: '#FFFFFF', }, radio: 单选

[name]: { title: '对齐方式', type: 'radio', "button_style": 'solid', //显示的样式 value: 'center', options: [ { label: '左对齐', value: 'left' }, { label: '居中对齐', value: 'center' }, { label: '右对齐', value: 'right' } ] }, checkbox: 多选

[name]: { title: '对齐方式', type: 'checkbox', value: [], options: [ { label: '左对齐', value: 'left' }, { label: '居中对齐', value: 'center' }, { label: '右对齐', value: 'right' } ] }, iconbox: 图标样式单选

[name]: { title: '商品属性', type: "iconbox", tips: '商品属性统一在左上角显示', value: { choose_icon: '0', image: '', }, choose: 'single', isIcon: false, options: [ {label: '无', value: '0'}, {label: '推荐', value: '1'}, {label: '热销', value: '2'}, {label: '新上', value: '3'}, {label: '包邮', value: '4'}, {label: '限时', value: '5'}, {label: '自定义', value: '7'} ] }, bar: 范围选择

[name]: { title: '圆角大小', type: 'bar', value: 0, min: 0, max: 20, }, link: 选择连接

[name]: { title: '对齐方式', type: 'link', value: '' }, bg: 背景选择

[name]: { title: "背景", type: "bg", value: { isColor: '1', color: "#ffffff", image: "" } }, image: 选择图片

[name]: { title: '选择图片', type: 'image', value: '' }, switch: 滑动开关

[name]: { title: '是否显示', type: 'switch', value: false }, tab: 多个

[name]: { title: '对齐方式', type: 'tab', value: [], options: [ {"type": "text", "title": "测试", "value": ""} ] }, list: 多个图片+跳转链接

[name]: { title: "添加单图", type: "list", notShowText: true, // notShow: true, hotArea: true, choose_title: { choose_style: '2', choose_option: [ {label: "普通样式", value: "2"}, {label: "绘制热区", value: "3"}, ] }, value: [ { id: 1, image: '', is_minApp: '1', h5_link: '', gh_id: '', minApp_link: '', hotArea: [] } ] }, ustyle: 获取方式

[name]: { title: "获取方式", type: "ustyle", value: { get_style: '1', get_number: '0', list: [] }, show: 'list', min: 0, max: 30, choose: 'coupons', options: [ {label: "自动获取", value: "1"}, {label: "手动获取", value: "2"}, ] }, template1.js 模版一配置

export default { datas: [ { title: '[文案]', groups: [name1, name2, name3] } ], styles: [ { title: 'margin配置', groups: ['margin_top', 'margin_bottom'] }, { title: 'padding配置', groups: ['padding_top', 'padding_bottom'] } ] } 更新日志