共计 1339 个字符，预计需要花费 4 分钟才能阅读完成。
实现如例子所示的可视化可拖放表单功能。整个页面，分为左中右三栏布局，左栏的部件库的部件（组件）作为 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
b.k = 2
console.log(a) // {k: 2}
这就会无意间导致数据被修改，很难排查。可以使用 Object.freeze 冻结对象，避免出错。
Object.freeze
function deepFreeze(obj) {
// 取回定义在 obj 上的属性名
var propNames = Object.getOwnPropertyNames(obj);
// 在冻结自身之前冻结属性
propNames.forEach(function(name) {
var prop = obj[name];
// 如果 prop 是个对象，冻结它
if (typeof prop == ‘object’ && prop !== null)
deepFreeze(prop);
});
// 冻结自身 (no-op if already frozen)
return Object.freeze(obj);
}
demo 项目 github