vue定製化桌面（二）

vue定製化桌面（一）

之前使用開源外掛程式vue-grid-layout構建了乙個簡單的基於vue的定製化桌面系統，目的是通過拖拽的方式，快速的搭建出乙個資料視覺化監控系統。使用者可以根據自己的喜好，在頁面上新增自己想要的元件，並且可以動態的繫結元件的一些屬性，比如顯示大小、元件名稱、圖表名稱等。至於元件最關鍵的資料來源，暫時想通過vuex實現，相當於定義乙份全域性變數吧，到時候元件只需要繫結相應的資料名稱就可以了（已經進行了簡單嘗試，切實可行），這樣就可以實現乙個資料來源可動態繫結、元件位置以及大小可調整的快速資料視覺化平台搭建的系統。目前由於工作轉行，不再從事web開發了，因此一直沒有什麼進展，現將之前的思路和源**公布，希望有興趣的朋友可以一起研究研究，共同學習進步。

vue-grid-layout外掛程式提供的元件基本屬性為5個，分布為元件的x、y座標，長寬以及元件的id，具體為下面資料格式的前五項。後幾項為了實現定製化而新增的，component代表元件的名稱，為了後續動根據元件名稱動態解析元件用的。initw、inith代表元件的初始高度，為了在左側元件區顯示用。type為元件的型別，因為不同的元件屬性數量可能不同。以下是完整的元件屬性資料格式。

,

解析元件部分**


="board container" ref=
"cardpanel"
>
" layoutdata"
:col-num=
"colnum"
:row-height=
"rowheight"
:is-draggable=
"false"
:is-resizable=
"false"
:is-mirrored=
"false"
:vertical-compact=
"true"
:margin=
"margin"
:use-css-transforms=
"true"
>
for=
"(item) in layoutdata"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key=
"'comp'+item.i"
>
<
!-- 根據元件名動態載入元件 --
>
<
!-- numpanel型別的元件 --
>
"hover" v-if=
"item.type=='numpanel'"
class
="" style=
"width: 100%;height:100%" v-bind:
class=""
>
"item.component"
:iconname=
"item.iconname"
:numtext=
"item.textcontent"
:num=
"$data.param[item.dataname]"
:height=
"item.h*rowheight+(item.h-1)*5+'px'"
>
<
/component>
<
/div>
<
!-- 折線與柱狀圖型別的元件 --
>
"hover" v-
else-if
="item.type=='linechart' ||item.type=='barchart'"
class
="" style=
"width: 100%;height:100%" v-bind:
class=""
>
"item.component"
:title-text=
"item.titletext"
:x-array=
"$data.xarraylist[item.xarray]"
:series-data=
"$data.yarraylist[item.seriesdata]"
:height=
"item.h*rowheight+(item.h-1)*5+'px'"
>
<
/component>
<
/div>
"hover" v-
else style=
"width: 100%;height:100%" v-bind:
class=""
>
"item.component"
:height=
"item.h*rowheight+(item.h-1)*5+'px'"
>
<
/component>
<
/div>
<
/grid-item>
<
/grid-layout>
<
/div>
<
/template>

其中:num="$data.param[item.dataname]"實現了資料的動態繫結，上傳的**中暫時沒有更新，後續有時間了將這一部分**分離出來上傳更新。

vue定製化桌面

vue定製化桌面（二）

Vue 元件化（二）

Android 定製化修改

桌面虛擬化之磁碟規劃篇（二）

vue定製化桌面（二）

Vue 元件化（二）

Android 定製化修改

桌面虛擬化之磁碟規劃篇 （二）

相關推薦

桌面虛擬化之磁碟規劃篇（二）