formDesigner: 基于vue+ElementUI的表单设计器，让表单拖拽更加简单方便。想做功能最全的表单设计器
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
<template>
<div id="app">
<img src="./assets/logo.png">
<el-card class="box-card leftCard">
<vuedraggable v-model="list" :sort="false" :group="{ name: 'course', pull: 'clone' }">
<div v-for="item in list" :key="item" class="item"><el-button>{{ item }}</el-button></div>
</vuedraggable>
</el-card>
<el-card class="box-card leftCard">
<vuedraggable v-model="list2" :group="{ name: 'course', pull: 'clone' }">
<div v-for="item in list2" :key="item" class="item">
<component :is="item" v-model="form[item]" v-bind="attrs">{{ item }}</component>
</div>
</vuedraggable>
</el-card>
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
<router-view/>
</div>
</template>
<script>
import vuedraggable from 'vuedraggable'
import row1col2 from './components/row1col2.vue'
export default {
components: {
vuedraggable,row1col2
},
name: 'App',
data: function () {
return {
form: {},
attrs: { 'type': 'success' }, // , disabled: true
list: ['row1col2','el-rate', 'el-tag', 'el-button', 'el-switch', 'el-slider', 'el-time-select', 'el-input'],
list2: [],
}
},
methods: {
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.box-card{width:100%;}
</style>
<template>
<el-row >
<el-col :span=12>
<vuedraggable v-model="list" :group="{ name: 'course'}">
<div v-for="item in list" :key="item" class="item">
<component :is="item" v-model="form[item]" v-bind="attrs">{{ item }}</component>
</div>
</vuedraggable>
</el-col>
<el-col :span=12>
<vuedraggable v-model="list2" :group="{ name: 'course' }">
<div v-for="item in list2" :key="item" class="item">
<component :is="item" v-model="form[item]" v-bind="attrs">{{ item }}</component>
</div>
</vuedraggable>
</el-col>
</el-row>
</template>
<script>
import vuedraggable from 'vuedraggable'
export default {
components: {
vuedraggable,
},
name: 'row1col2',
data () {
return {
form: {},
attrs: { 'type': 'success' }, // , disabled: true
list: [],
list2: [],
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
}
}
</script>
<style scoped>
.el-col {
height:40px;
line-height:40px;
border:1px solid #000;
}
.item>div{height:40px;}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>