实现如例子所示的可视化可拖放表单功能。整个页面,分为左中右三栏布局,左栏的部件库的部件(组件)作为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) {
this.curren