Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·上】

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

一、Microi吾码：一款高效、灵活的低代码开发开源框架【低代码框架】
二、Vue3项目快速集成界面引擎
三、Vue3 界面设计插件 microi-pageengine 入门教程一
四、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·上】

文章目录

🎀🎀🎀 microi-pageengine 界面引擎系列 🎀🎀🎀
前言
一、容器用法
二、内置组件介绍
- 2.1 工作台组件
- 2.2 进度组件
- 2.3 快捷导航组件
- 2.4 轮播图组件
- 2.5 统计面板组件
- 2.6 日历组件
- 2.7 时间轴组件
- 2.8 折叠面板组件
- 2.9 步骤组件
三、未完待续

前言

【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、可为空】。然后去【表单引擎】—&gt;【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、可为空】。然后去【表单引擎】—&gt;【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"}]}]
}