🎀🎀🎀 microi-pageengine 界面引擎系列 🎀🎀🎀

一、Microi吾碼：一款高效、靈活的低代碼開發開源框架【低代碼框架】
二、Vue3項目快速集成界面引擎
三、Vue3 界面設計插件 microi-pageengine 入門教程一
四、Microi吾碼界面設計引擎之基礎組件用法大全【內置組件篇·上】
五、Microi吾碼界面設計引擎之基礎組件用法大全【內置組件篇·中】
六、Microi吾碼界面設計引擎之基礎組件用法大全【內置組件篇·下】

---

前言

【Microi吾碼-界面設計器】 是一款基于 Vue3 + ElementPlus 的Web頁面設計插件。是一款無狀態、零耦合、可插拔的界面渲染工具，可以無縫集成到 web端、移動端。可以幫助開發人員、項目經理、產品經理快速搭建頁面原型，可以設計動態看板、數據報表、精美圖表等。

🔗體驗地址：https://www.nbweixin.cn/autopage/

前面已經學習了如何快速集成界面引擎插件，也介紹的界面引擎的布局及基本用法，今天來學習系統內置組件的用法。

---

一、容器用法

在介紹組件用法之前，首先要先了解容器的原理。容器的概念其實也算是一種特殊的組件，屬于組件包裝器。目前只有一個卡片的容器，其實就是 Element Plus 的 Card 卡片。

• 定義：給組件提供一個包裝器，通過包裝器來控制整體的布局樣式和排版。
• 用法：一個容器可以包含多個子組件，容器和容器之間拖拽調換位置。
• 柵格：容器寬度采用的是柵格系統，共24格，通過屬性控制欄的寬度 Slider 滑塊來調節寬度。
• 排版：容器沒有使用瀑布流模式，而是使用的響應式柵格布局。

二、內置組件介紹

系統內置了一些常用的基本組件，當然并不能滿足所有需求，我們還提供了自定義組件，自定義組件具體用法后續會有介紹。

內置組件基本囊括了 ElementPlus 80% 的組件，而且參數設置基本上是一致的，除了一些樣式上的參數控制。

2.1 工作臺組件

工作臺組件主要用于數據看板和首頁展示當前用的基本信息和友好提示信息。

webapi 數據源格式：

{"icon": "https://www.nbweixin.cn/autopage/photo.png","title": "早安，Ah jung，開始您一天的工作吧！","subTitle": "今日陰轉大雨，15℃ - 25℃，出門記得帶傘哦。"
}

注意：數據源格式是一個Object 對象。

2.2 進度組件

進度組件主要展示跟進度相關的內容，下圖所展示的屬于滿配的效果，也可以通過屬性配置來控制標題、進度條、副標題的開關。可以控制顯示的對齊方式，可以控制字體的顏色、大小、厚度等。

webapi 數據源格式：

[{"title": "個人業績（年度）","value": "￥1,000,00.00","subTitle": "目標金額: ￥1,000,000.00","percentage": 60,"color": "#409EFF"},{"title": "團隊業績（年度）","value": "￥10,000,00.00","subTitle": "目標金額: ￥10,000,000.00","percentage": 100,"color": "#67C23A"}
]

注意：數據源格式是一個對象數組。

2.3 快捷導航組件

快捷導航組件主要展示快捷欄，可以點擊跳轉到指定的頁面路徑，可以是外鏈和內鏈，內鏈只需傳入路由地址，外鏈需要完整的url地址。

webapi 數據源格式：

[{"title": "會員中心","iconUrl": "https://www.nbweixin.cn/autopage/logoarr1/%E4%BC%9A%E5%91%98.png","linkUrl": "/"},{"title": "投訴建議","iconUrl": "https://www.nbweixin.cn/autopage/logoarr1/%E6%8A%95%E8%AF%89%E5%BB%BA%E8%AE%AE.png","linkUrl": "/"},{"title": "問卷調查","iconUrl": "https://www.nbweixin.cn/autopage/logoarr1/%E9%97%AE%E5%8D%B7%E8%B0%83%E6%9F%A5.png","linkUrl": "/"},{"title": "資料打印","iconUrl": "https://www.nbweixin.cn/autopage/logoarr1/%E8%B5%84%E6%96%99%E6%89%93%E5%8D%B0.png","linkUrl": "/"},{"title": "待我審批","iconUrl": "https://www.nbweixin.cn/autopage/logoarr1/%E5%AE%A1%E6%A0%B8.png","linkUrl": "/"},{"title": "我的收藏","iconUrl": "https://www.nbweixin.cn/autopage/logoarr1/%E6%94%B6%E8%97%8F.png","linkUrl": "/"},{"title": "資料下載","iconUrl": "https://www.nbweixin.cn/autopage/logoarr1/%E4%B8%8B%E8%BD%BD%E8%B5%84%E6%96%99.png","linkUrl": "/"},{"title": "我的卡包","iconUrl": "https://www.nbweixin.cn/autopage/logoarr1/%E5%8D%A1%E5%8C%85.png","linkUrl": "/"}
]

注意：數據源格式是一個對象數組。

2.4 輪播圖組件

主要用于圖片輪播，可以通過屬性面板配置輪播方向、切換間隔、指示器位置、顯示類型、是否自動播放等。

webapi 數據源格式：

[{"url": "https://img2.baidu.com/it/u=3602890503,1890231107&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"},{"url": "https://img1.baidu.com/it/u=585570696,4101770749&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"}
]

注意：數據源格式是一個對象數組。

2.5 統計面板組件

主要展示匯總數據，背景可以使用圖片，也可以使用漸變色。

webapi 數據源格式：

[{"name": "個人銷售成交額","value": 100000,"icon": "Top","bgColor": "","bgImage": "linear-gradient(to right bottom, rgb(236, 71, 134), rgb(185, 85, 164))"},{"name": "同比上月業績","value": 100000,"icon": "Top","bgColor": "","bgImage": "linear-gradient(to right bottom, rgb(134, 94, 192), rgb(81, 68, 180))"},{"name": "測試3","value": 100000,"icon": "Bottom","bgColor": "","bgImage": "linear-gradient(to right bottom, rgb(86, 205, 243), rgb(113, 157, 227))"},{"name": "測試4","value": 100000,"icon": "CaretTop","bgColor": "","bgImage": "linear-gradient(to right bottom, rgb(252, 188, 37), rgb(246, 128, 87))"},{"name": "測試5","value": 100000,"icon": "CaretTop","bgColor": "#67C23A","bgImage": ""},{"name": "測試6","value": 100000,"icon": "CaretTop","bgColor": "#914F2C","bgImage": ""}
]

注意：數據源格式是一個對象數組。

2.6 日歷組件

日歷組件可以標識指定日期的提醒內容，可以點擊具體日期觸發事件，可以通過透傳事件自行處理點擊日期的具體業務邏輯。

webapi 數據源格式：

[{"date": "2024-12-01","content": "12月事件01"},{"date": "2024-12-10","content": "12月事件02"}
]

注意：數據源格式是一個對象數組。date 表示日期標識，content 表示日期事件內容。

2.7 時間軸組件

可視化地呈現時間流信息。Timeline可拆分成多個按照時間戳排列的活動， 時間戳是其區分于其他控件的重要特征， 使用時注意與 Steps 步驟條等區分。

webapi 數據源格式：

[{"date": "2024-05-01","title": "版本號:v3.16.20","content": "現在表內編輯也能正確的觸發表單屬性里面的數據修改接口替換了。表單引擎、模塊引擎新增V8代碼加密傳輸功能，但這導致必須要在sy..."},{"date": "2024-08-01","title": "版本號:v3.17.1","content": "【必須】手動去數據庫管理工具給【diy_field】表新增字段：【AppVisible、bit、可為空】。然后去【表單引擎】—>【diy_field】..."},{"date": "2024-10-21","title": "版本號:v4.0.0","content": "Microi v4.0microi v3.x版本已應用數百套產品，因此仍然長期持續維護，新增v4分支Vue2升級為Vue3.NET6升級到.NET8node14升級..."}
]

注意：數據源格式是一個對象數組。

2.8 折疊面板組件

通過折疊面板收納內容區域，可同時展開多個面板，面板之間不影響。

webapi 數據源格式：

[{"title": "版本號:v3.16.20","content": "表單引擎、模塊引擎新增V8代碼加密傳輸功能，但這導致必須要在sy..."},{"title": "版本號:v3.17.1","content": "表單引擎、模塊引擎新增V8代碼加密傳輸功能，【必須】手動去數據庫管理工具給【diy_field】表新增字段：【AppVisible、bit、可為空】。然后去【表單引擎】—>【diy_field】..."},{"title": "版本號:v4.0.0","content": "表單引擎、模塊引擎新增V8代碼加密傳輸功能，Microi v4.0microi v3.x版本已應用數百套產品，因此仍然長期持續維護，新增v4分支Vue2升級為Vue3.NET6升級到.NET8node14升級..."}
]

注意：數據源格式是一個對象數組。

2.9 步驟組件

可以通過屬性面板控制步驟間距、排列方向、居中顯示和簡介模式。

webapi 數據源格式：

{"activeIndex": 0,"stepArr": [{"title": "項目啟動進場","description": "計劃開始","timestamp": "2024-10-13","icon": "Position","status": "success","subdata": [{"id": "001001","content": "收入合同(1筆)","timestamp": "","color": "#0bbd87","router": "/"},{"id": "001002","content": "支出合同(1筆)","timestamp": "","color": "#0bbd87","router": "/"},{"id": "001003","content": "銷售訂單(2筆)","timestamp": "","color": "#0bbd87","router": "/"},{"id": "001004","content": "斷貨(2筆)","timestamp": "","color": "#F56C6C","router": "/"}]},{"title": "實施調研","description": "按時完成","timestamp": "2024-10-14","icon": "Edit","status": "finish","subdata": [{"id": "002001","router": "/","content": "合同收款(1筆)","timestamp": "","color": "#0bbd87"},{"id": "002002","router": "/","content": "銷售開票(1筆)","timestamp": "","color": "#0bbd87"}]},{"title": "項目方案","description": "逾期1.0天","timestamp": "2024-10-15","icon": "Collection","status": "error","subdata": [{"id": "003001","router": "/","content": "合同收款(1筆)","timestamp": "","color": "#0bbd87"}]},{"title": "項目上線","description": "正常上線","timestamp": "2024-10-16","icon": "Timer","status": "process","subdata": [{"id": "004001","router": "/","content": "收入合同(1筆)","timestamp": "","color": "#0bbd87"},{"id": "004002","router": "/","content": "指出合同(1筆)","timestamp": "","color": "#0bbd87"},{"id": "004003","router": "/","content": "采購訂單(1筆)","timestamp": "","color": "#0bbd87"},{"id": "004004","router": "/","content": "采購付款(1筆)","timestamp": "","color": "#0bbd87"}]},{"title": "項目驗收","description": "計劃結束","timestamp": "2024-10-20","icon": "CollectionTag","status": "wait","subdata": [{"id": "005001","router": "/","content": "填報執行單","timestamp": "","color": "#0bbd87"}]}]
}

注意：數據源格式是一個 Object 對象。

三、未完待續

時間有限，先介紹到這，下一篇再介紹余下的組件用法，感謝您的點贊、評論與收藏。讓我更有動力去持續輸出。