话不多说直接开干，先上一张功能图
思路及实现方式
在vue中有动态组件的概念，即<component is='xxx'/>,那很容易的就能想到我们需要的数据是多个对象组成的数组，格式大致为
[
{
title:'',//组件名
icon:'',//操作栏中显示的icon
prop:{} //组件的一些数据
attr:{}//组件的自定义样式数据
class:''//用于组件分类
}
]
有了这样的数据那就很好处理了，我们可以写一个config.json的文件来存这样的初始化数据，在自定义页面引入，同时渲染到左边的操作栏中，第一步就完成了。
<template>
<div>
<!--左侧功能列表-->
<div @click='handlePickItem(item)' v-for='(item) in configArr'>{{item.title}}</div>
<!--中间预览区域-->
<template>
</template>
<!--右边操作区域-->
<div></div>
</div>
</template>
<script>
import configArr from '@/components/cinfog.json'
export default {
data(){
return {
configArr:configArr
}
}
}
</script>
左侧列表选然出来之后，我们就要进行点击选中的功能，上面代码可见在左侧操作渲染列表中添加点击事件@click='handlePickItem(item)',将configArr的元素直接作为参数代入，然后我们需要一个数组来记录我们使用的组件，同时理用这个数组来循环渲染中间的预览界面
<template>
<div>
<!--左侧功能列表-->
<div @click='handlePickItem(item)' v-for='(item) in configArr'>{{item.title}}</div>
<!--中间预览区域-->
<template>
<component is='xxx'/>
</template>
<!--右边操作区域-->
<div></div>
</div>
</template>
<script>
import configArr from '@/components/cinfog.json'
export default {
data(){
return {
configArr:configArr ,
usingArr:[]
}
},
method:{
handlePickItem:function(data){
this.usingArr.push(data)
}
}
}
</script>
通过文档我们可以发现，is需要我们给定一个注册后组件的名称或者一个包含组件的对象,但是这里考虑到页面组件堆积的越来越多，如果将所有组件一次性注册肯定会带来一定的负面影响，所以这里我采用了动态引入组件的方式，这就意味着我们的config.json需要发生一点点变动.这样意味着我们需要提前把组件的预览模块和操作模块提前写好并放入指定的位置，在点击的时候就可以进行动态的引入，这样一来，预览的渲染也能成功进行了，最后一个主要流程就是渲染当前的操作模块，这里就要分为几个情况来四考，
1，当新增模块时，2.当插入模块时，3.当删除模块时，所以这里我们需要去记录一下当前插入usingArr的元素在数组中的index，
//config.json
[
{
title:'',//组件名
icon:'',//操作栏中显示的icon
prop:{} //组件的一些数据
attr:{}//组件的自定义样式数据
class:''//用于组件分类
path:""//用于寻找组件路径的标识
}
]
data(){
return {
configArr:configArr,
usingArr:[],
current:null
}
}
method:{
handlePickItem:function(data){
data.view_component = () => import(`@/component/view/${data.path}/${data.path}`)
data.tool_component = () => import(`@/component/tool/${data.path}/${data.path}`)
if(current === null){
//此情况为新增时
this.usingArr.push(data)
this.current = this.usingArr.length - 1
}else{
//此情况为插入时
this.usingArr.splice(this.current + 1, 0, copy)
this.current = this.current + 1
}
}
}
这个时候我们有了当前插入元素的序号就好办了，操作模块的显示就可以直接用序号来安排上，操作模块的切换就可以直接在componet组件上添加click事件来动态切换current就ok了，然后就是很核心的数据传递，从页面来看，这是父组件和兄弟组件之间的互相通信，最开始我准备使用vuex或者eventBus来进行实现，但是在实验过程中发现并不是特别理想，最后采用了对象的一个特别的性质来实现了数据的传递，同时让整个过程看起来和理解起来非常的简单，那就是对象是引用类型,组件的样式属性和数据属性通过props向子组件传递，而子组件只需要去改变props里的对象，就能三边联动