一个简单的vuedraggle练习
在vue项目中npm i vuedraggable引入
页面中
<template> <div class="row"> <div class="col-1"> <h3>组件</h3> <draggable class="list-group-1" :list="list1" :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneDog" @change="log"> <div class="list-group-item1" v-for="(element, index) in list1" :key="element.name" > <el-button style="width:80%" @click="add(element)"> {{ element.name }} </el-button> </div> </draggable> </div> <div class="col-2"> <h3>生成</h3> <el-form label-width="80px"> <draggable class="list-group-2" :list="list2" group="people" @change="log"> <div class="list-group-item" v-for="(element, index) in list2" :key="index" @click="chooseItem(element,index)" > <el-form-item :label="element.label" style="width:80%"> <div v-if="element.name=='输入框'"> <el-input :placeholder="element.placeholder" v-model="element.data" /> </div> <div v-if="element.name=='下拉'"> <el-select v-model="element.data" :placeholder="element.placeholder"> <el-option v-for="item in element.options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div v-if="element.name=='单选'"> <el-radio-group v-model="element.data"> <el-radio v-for="item in element.options" :label="item.value">{{item.label}}</el-radio> </el-radio-group> </div> <div v-if="element.name=='计数器'"> <el-input-number v-model="element.data"></el-input-number> </div> </el-form-item> <el-button @click="del(index)" size="mini" class="el-icon-delete delbtn"></el-button> </div> </draggable> </el-form> </div> <div class="col-3"> <h3>属性</h3> <el-form label-width="80px" > <el-form-item label="标题" v-if="itemList.name"> <el-input v-model="itemList.label"></el-input> </el-form-item> <el-form-item label="提示" v-if="itemList.name"> <el-input v-model="itemList.placeholder"></el-input> </el-form-item> <el-form-item label="选项" v-if="itemList.name=='单选' || itemList.name=='下拉'"> <div v-for="item in itemList.options"> label: <el-input style="width: 30%;" v-model="item.label"></el-input> value: <el-input style="width: 40%;" v-model="item.value"></el-input> </div> <el-button @click="addOption(itemList.options)">添加</el-button> </el-form-item> </el-form> </div> </div> </template> <script> import draggable from "vuedraggable"; export default { name: "custom-clone", display: "custom Clone", order: 3, components: { draggable }, data() { return { list1: [ { name: "输入框", id: 1 ,label:'输入框'}, { name: "下拉", id:2 ,options:[{value:'1',label:'1'}]}, { name: "单选", id: 3 ,options:[{value:'1',label:'1'}]}, { name: "计数器", id: 4 ,label:'计数器'}, ], list2: [ ], itemList:{ name:null }, itemIndex:null }; }, methods: { //新增组件 add(e){ this.list2.push(e) // this.chooseItem(e) }, //删除组件 del:function(e){ console.log(e) this.list2.splice(e,1) }, //编辑属性 chooseItem(e,index){ this.itemList=this.list2[index] this.itemIndex=index }, clone: function(el) { return { name: el.name + " cloned" }; }, log: function(evt) { window.console.log(evt); }, addOption(){ let item ={ label:'', value:'' } this.list2[this.itemIndex].options.push(item) }, //克隆组件 cloneDog(e) { console.log("e",e) console.log(this.list1) // return{ // name:e.name, // options:e.options, // label:e.label // } return JSON.parse(JSON.stringify(e)) } } }; </script> <style> .row{ display: flex; } .col-1{ width: calc(25% - 2px); border: 1px solid black; height: calc(100vh - 2px) ; overflow: auto; } .col-2{ width: calc(50% - 2px); border: 1px solid black; height: calc(100vh - 2px) ; overflow: auto; } .col-3{ width: calc(25% - 2px); border: 1px solid black; height: calc(100vh - 2px) ; overflow: auto; } .list-group-item{ display: flex; min-height: 40px; margin-bottom: 20px; border: 1px solid black; } .list-group-item .el-form-item{ margin-bottom: 0!important; } .list-group-item1{ text-align: center; align-items: center; width: 50%; margin-bottom: 10px; } .list-group-1{ display: flex; flex-wrap: wrap; } .list-group-2{ display: flex; flex-direction: column; } .delbtn{ display: none; } .delbtn:hover{ height: 40px; display: block; } </style>
结果