vue实现可视化可拖放的自定义表单的示例代码
1星 34 浏览量
2020-10-17
06:59:12
上传
评论 2
收藏 52KB PDF 举报 
vue实现可视化可拖放的自定义表单的示例代码实现可视化可拖放的自定义表单的示例代码
主要介绍了vue实现可视化可拖放的自定义表单的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个
参考。一起跟随小编过来看看吧
实现如例子所示的可视化可拖放表单功能。整个页面，分为左中右三栏布局，左栏的部件库的部件（组件）作为key,拖放到中
间区域时，往vuex存放数组数据，拖一个就push一个。点击某个组件时，在右栏显示其属性，其实也就是在vuex存放的数据
中查找数据迭代属性。
左中右三栏左中右三栏 左右固定左右固定 中间自适应布局中间自适应布局
首先，布局上来看，左右都是可以拉伸的，中间是自适应的布局。
左右分别float left和float right, 中间栏使用margin撑开布局，即可完成布局
动态缩放浏览器窗口来查看效果
动态显示动态显示template
第二个重要点就是让template可编程,
例如： 传来一个字符串<el-button>按钮</el-button>,如何显示成为组件而不是字符串标签呢。
关键点： 使用js和vue extends
新建js
export default Vue.component('CustomTemplate', {
props: {
html: String
},
render (h) {
return h(Vue.extend({ // 关键点
template: `<div class="root-custom-template">${this.html}</div>`,
data () {
return {
current: ''
}
},
methods: {
doclick (uuid, id) {
this.current = uuid
this.$store.commit('EditPanel/changeId', uuid)
},
dodragstart (ev) {
ev.dropEffect = 'move'
}
}
}))
},
})
拖放操作和数据的组装拖放操作和数据的组装
在文章开头已经分析好了，整个数据的流向，接下来就是用vuex去实现。
拖放组件使用vuedraggable,拖放完成的时候，鉴于MVVM的特点，画面改变<=>数据改变，操作vuex时注意不能直接修改
state
computed: {
myList: {
get() {
return this.$store.state.myList
},
set(value) {
this.$store.commit('updateList', value)
}
}
}
整个数据流向： 左栏组件库<-->中间展示栏 <---->右栏属性设置, 控制不好数据的话，可能会出现原始数据被修改的情况。请
看：
var a = { k: 1 }
var b = a
资源评论
天倾2021-04-27不值得，啥都没有
