話不多說直接開干，先上一張功能圖
思路及實現方式
在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里的對象，就能三邊聯動