vue实现可视化可拖放的自定义表单的示例代码
实现如例子所示的可视化可拖放表单功能。整个页面，分为左中右三栏布局，左栏的部件库的部件（组件）作为key,拖放到中间区域时，往vuex存放数组数据，拖一个就push一个。点击某个组件时，在右栏显示其属性，其实也就是在vuex存放的数据中查找数据迭代属性。
左中右三栏左右固定中间自适应布局
首先，布局上来看，左右都是可以拉伸的，中间是自适应的布局。
左右分别floatleft和floatright,中间栏使用margin撑开布局，即可完成布局
动态缩放浏览器窗口来查看效果
动态显示template
第二个重要点就是让template可编程,
例如：传来一个字符串
关键点：使用js和vueextends
新建js
exportdefaultVue.component('CustomTemplate',{
props:{
html:String
},
render(h){
returnh(Vue.extend({//关键点
template:`${this.html} 拖放操作和数据的组装
在文章开头已经分析好了，整个数据的流向，接下来就是用vuex去实现。
拖放组件使用vuedraggable,拖放完成的时候，鉴于MVVM的特点，画面改变<=>数据改变，操作vuex时注意不能直接修改state
computed:{
myList:{
get(){
returnthis.$store.state.myList
},
set(value){
this.$store.commit('updateList',value)
}
}
}
整个数据流向：左栏组件库<-->中间展示栏<---->右栏属性设置,控制不好数据的话，可能会出现原始数据被修改的情况。请看：
vara={k:1}
varb=a
b.k=2
console.log(a)//{k:2}
这就会无意间导致数据被修改，很难排查。可以使用Object.freeze冻结对象，避免出错。
Object.freeze
functiondeepFreeze(obj){
//取回定义在obj上的属性名
varpropNames=Object.getOwnPropertyNames(obj);
//在冻结自身之前冻结属性
propNames.forEach(function(name){
varprop=obj[name];
//如果prop是个对象，冻结它
if(typeofprop=='object'&&prop!==null)
deepFreeze(prop);
});
//冻结自身(no-opifalreadyfrozen)
returnObject.freeze(obj);
}
demo项目github
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。