用vue实现json模版编辑器

控件区
表单区
配置项区（还没写）
业务逻辑

设想业务逻辑是拖拽控件生成表单动手做了一个简单的demo 业务的原型图设想如下所示
其中使用的技术主要是vuedragger
在这里插入图片描述

控件区

做控件区的时候首先我们要有确定的配置项其实也很简单就是把所有的选项罗列开来能够正常显示就行了
如图所示可以去换成图标什么的但是是做demo 没有细节所以比较丑陋后面的也是将就看吧嘻嘻
在这里插入图片描述
配置项如下代码所示：（这一部分还是要看自己具体的业务逻辑）

 [{type: 'image',name: '上传照片',updata_data: []},{type: 'radio-multi',values: ['option1', 'option2', 'option3'],name: '多选选择',updata_data: []},{type: 'radio-single',values: ['是', '否'],name: '单选选择',updata_data: ''},{type: 'text',name: '文本输入',updata_data: ''}],

表单区

表单区用border做了一个丑丑的类似手机的边框如下图所示
在这里插入图片描述

配置项区（还没写）

业务逻辑

如上两张图我们已经有了控件区和表单区，现在要处理拖拽事件我们的页面逻辑为 1左边到右边为复制 2右边不可到左边 3左边不可排序 4右边生成的表单内容可以进行排序
实现这个业务逻辑主要使用了vuedraggable 这个库，这是一个很好用的Js拖拽库
任务点1和3可以通过定义一个不被修改的配置项控件区的end自定义事件里替换绑定值实现
任务点2 通过配置拖拽组的时候另外加配置项实现
任务点4 插件本身支持这个功能
业务分析完毕
当前完整代码如下：

<template><div class="TemplateEditor-container"><div class="btn-list"><draggable :group="grpupA" :animation="50" key="optionList" v-model="optionList" :move="onmove" @end="end1"><transition-group style="min-height:600px;display: block;"><div v-for="(item, idx) in optionList" :key="idx" class="btn">{{ item.type }}</div></transition-group></draggable></div><div class="phonelist-con"><div class="phonelist"><draggable group="site" :animation="50" key="ttt" v-model="ttt"><transition-group style="min-height:600px;display: block;"><div v-for="(item, idx) in ttt" :key="idx" class="phoneinner" @dblclick="changejson"><div v-if="item.type == 'text'"><div class="labletit" :class="item.required ? 'requiredval' : ''">{{ item.name }}</div><el-input class="info" type="textarea" :autosize="{ minRows: 4 }":placeholder="item.hint" disabled></el-input></div><div v-if="item.type == 'image'"><div class="labletit" :class="item.required ? 'requiredval' : ''">{{ item.name }}</div><div class="imgbox"><div class="inputbox"><i class="ri-camera-fill"></i><span>点击上传图片</span></div></div></div><div v-if="item.type == 'radio-multi'"><div class="labletit" :class="item.required ? 'requiredval' : ''">{{ item.name }}</div><el-checkbox-group v-model="item.updata_data"><el-checkbox disabled v-for="inner in item.values" :label="inner" :key="inner">{{inner }}</el-checkbox></el-checkbox-group></div><div v-if="item.type == 'radio-single'"><div class="labletit" :class="item.required ? 'requiredval' : ''">{{ item.name }}</div><el-radio-group><el-radio disabled v-for="(innerite, idx) in item.values" :key="idx":label="innerite">{{innerite }}</el-radio></el-radio-group></div></div></transition-group></draggable></div></div><div class="json"></div></div>
</template><script>
import draggable from 'vuedraggable'
export default {components: {draggable},data() {return {grpupA: {name: 'site',pull: true,put: false},ttt: [],tempoptions: [{type: 'image',name: '上传照片',updata_data: []},{type: 'radio-multi',values: ['option1', 'option2', 'option3'],name: '多选选择',updata_data: []},{type: 'radio-single',values: ['是', '否'],name: '单选选择',updata_data: ''},{type: 'text',name: '文本输入',updata_data: ''}],optionList: [{type: 'image',name: '上传照片'},{type: 'radio-multi',values: ['option1', 'option2', 'option3'],name: '多选选择'},{type: 'radio-single',values: ['是', '否'],name: '单选选择'},{type: 'text',name: '文本输入'}]}},methods: {changejson(){},onmove() {//return false},end1(e) {console.log(e, '111')this.optionList = this.tempoptions},}}
</script><style lang="scss" scoped>
.inputbox {width: 100%;height: 4.125rem;line-height: unset;background-color: #F2F6F8;border-radius: 6px;border-color: #f2f6f8;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;box-sizing: border-box;i {font-size: 24px;color: #4E5969;}span {font-weight: 400;font-size: 12px;color: #86909C;}
}.TemplateEditor-container {border: 2px solid #333;width: 100vw;height: 100vh;box-sizing: border-box;display: flex;align-items: center;.btn-list {width: 10%;height: 60vh;//padding: 20%;box-sizing: border-box;.btn {display: block;padding: 10px 20px;margin-left: 10px;margin-top: 10px;border: 1px solid #333;}}.phonelist-con {height: 80vh;width: 375px;padding-left: 20px;.phonelist {max-height: 80vh;overflow: auto;border: 10px solid #333;border-top-width: 120px;border-bottom-width: 100px;box-sizing: border-box;border-radius: 40px;.phoneinner {width: 100%;margin-bottom: 10px;padding: 2px 10px;box-sizing: border-box;}}}.json{flex: 1;height: 80vh;margin-left: 10px;margin-right: 10px;border:1px solid #d8d8d8;}.labletit {color: #888;font-size: 14px;padding-top: 10px;padding-bottom: 4px;}.requiredval {position: relative;width: auto;}.requiredval::after {right: -6px;top: 0px;padding-left: 4px;content: "*";color: #f56c6c;margin-right: 4px;}
}
</style>

实现效果如下图所示:
在这里插入图片描述