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

实现效果如下图所示: