vue可视化拖拽生成工具_vue完成可视化可拖放的自定义表单

完成如例子所示的可视化可拖放表单功用。全部页面，分为左中右三栏规划，左栏的部件库的部件(组件)作为key,拖放到中心地区时，往vuex寄存数组数据，拖一个就push一个。点击某个组件时，在右栏显现其属性，实在也就是在vuex寄存的数据中查找数据迭代属性。

左中右三栏 摆布牢固 中心自适应规划

起首，规划上来看，摆布都是能够拉伸的，中心是自适应的规划。

摆布离别

float left和

float right, 中心栏运用

margin撑开规划，即可完成规划

动态显现template

第二个重要点就是让template可编程,

比方： 传来一个字符串按钮,怎样显现成为组件而不是字符串标签呢。

症结点： 运用js和vue extends

新建js

export default Vue.component('CustomTemplate', {

props: {

html: String

},

render (h) {

return h(Vue.extend({ // 症结点

template: `

${this.html}

`,

data () {

return {

current: ''

}

},

methods: {

doclick (uuid, id)