vuedraggable实现一个简单的商城拖拽设计工具

夜满繁星2023-10-30 18:07

接到一个商城拖拽的需求，为了方便大家不用重复造轮子，对于一些要求简单的可配置需求，可以快速实现功能，只需要写业务代码，现在把代码分享出来，欢迎大家star，大家觉得有可以完善的地方也可以代码提交给我

技术栈：vuedraggable、element-plus

simple-drag-mall: 一个简单的商城拖拽设计工具 (gitee.com)

模板参数化配置

通过参数配置生成模板，存在children字段证明存在子项目，子项目参数配置在childrenSource中，模板参数配置在params中

{ 复制代码

  templateId: '1',
  componentName: 'Banner',
  name: '轮播图',
  params: {
    bannerSize: '',
  },
  childrenSource: {
    imageUrl: '',
    routeType: '',
  },
  children: [],
}

根据参数动态生成表单

通过解析params和children中的参数，动态生成表单，FirmList.vue中实现了常用的input、upload、select等，可根据业务自己调整，比如'productList'

css 复制代码

title: {
  type: 'input',
  name: '标题'
},
imageUrl: {
  type: 'upload',
  name: '图片'
},
bannerSize: {
  type: 'select',
  name: '图片尺寸',
  enum: [
    {
      label: '750X200',
      value: '200'
    },
    {
      label: '750X375',
      value: '375'
    },
    {
      label: '750X400',
      value: '400'
    },
  ]
},
productList: {
  type: 'productList',
  name: '商品列表'
}

截图

总结

通过这套简单的配置工具，我们就可以实现商城设计功能，代码实现一些基础的东西，方便大家不用重复开发，欢迎指正和star