Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·下】
🎀🎀🎀 microi-pageengine 界面引擎系列 🎀🎀🎀
一、Microi吾码：一款高效、灵活的低代码开发开源框架【低代码框架】
二、Vue3项目快速集成界面引擎
三、Vue3 界面设计插件 microi-pageengine 入门教程一
四、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·上】
五、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·中】
六、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·下】
文章目录
- 🎀🎀🎀 microi-pageengine 界面引擎系列 🎀🎀🎀
- 前言
- 一、容器用法
- 二、内置组件介绍
- 2.19 地图组件
- 2.20 甘特图组件
- 2.21 超文本组件
- 2.22 详情描述组件
- 2.23 WebGL 组件
- 2.24 Office文档在线预览组件
- 三、未完待续
前言
【Microi吾码-界面设计器】 是一款基于 Vue3 + ElementPlus 的Web页面设计插件。是一款无状态、零耦合、可插拔的界面渲染工具，可以无缝集成到 web端、移动端。可以帮助开发人员、项目经理、产品经理快速搭建页面原型，可以设计动态看板、数据报表、精美图表等。
🔗体验地址：https://www.nbweixin.cn/autopage/
前面已经学习了如何快速集成界面引擎插件，也介绍的界面引擎的布局及基本用法，今天来学习系统内置组件的用法。
一、容器用法
在介绍组件用法之前，首先要先了解容器的原理。容器的概念其实也算是一种特殊的组件，属于组件包装器。目前只有一个卡片的容器，其实就是 Element Plus 的 Card 卡片。
- 定义：给组件提供一个包装器，通过包装器来控制整体的布局样式和排版。
- 用法：一个容器可以包含多个子组件，容器和容器之间拖拽调换位置。
- 栅格：容器宽度采用的是栅格系统，共24格，通过属性控制栏的宽度
Slider滑块来调节宽度。 - 排版：容器没有使用瀑布流模式，而是使用的响应式栅格布局。
二、内置组件介绍
系统内置了一些常用的基本组件，当然并不能满足所有需求，我们还提供了自定义组件，自定义组件具体用法后续会有介绍。
内置组件基本囊括了 ElementPlus 80% 的组件，而且参数设置基本上是一致的，除了一些样式上的参数控制。
上一篇文章 Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·上】 介绍了部分组件，这一篇继续介绍余下的组件。
2.19 地图组件
目前内置的是高度地图组件，暂不支持自定义 key。通过配置中心点位置来渲染默认区域。
参数设置：
webapi 数据源格式：
[
{
"id": "1",
"title": "标题1",
"position": "121.553524,29.870657",
"icon": "",
"content": ""
},
{
"id": "2",
"title": "标题2",
"position": "121.52909,29.8565",
"icon": "https://www.nbweixin.cn/autopage/location.png",
"content": ""
}
]
注意：数据源格式是一个数组对象。
2.20 甘特图组件
甘特图（Gantt chart）又称为横道图、条状图（Bar chart），通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。
参数配置：
webapi 数据源格式：
{
"tasks": [
{
"id": 10,
"text": "RFQ&项目启动",
"type": "project",
"progress": 0.1,
"open": true,
"person": "张三"
},
{
"id": 12,
"text": "产品需求 #1.0.1",
"start_date": "02-01-2025",
"duration": 3,
"parent": 10,
"progress": 1,
"person": "张三"
},
{
"id": 13,
"text": "产品数据 #1.0.2",
"start_date": "05-01-2025",
"duration": 3,
"parent": 10,
"progress": 0.8,
"person": "张三"
},
{
"id": 14,
"text": "环境数据 #1.0.3",
"start_date": "08-01-2025",
"duration": 3,
"parent": 10,
"progress": 0,
"person": "张三"
},
{
"id": 20,
"text": "产品设计&开发",
"type": "project",
"progress": 0,
"person": "张三",
"open": false
},
{
"id": 21,
"text": "设计输入信息管理#3.0.1",
"start_date": "18-01-2025",
"duration": 2,
"parent": 20,
"progress": 0,
"person": "张三"
},
{
"id": 22,
"text": "产品设计过往教训展开 #3.0.2",
"start_date": "20-01-2025",
"duration": 2,
"parent": 20,
"progress": 0,
"person": "张三"
}
],
"links": [
{
"id": 10,
"source": 12,
"target": 13,
"type": 1
},
{
"id": 11,
"source": 13,
"target": 14,
"type": 1
},
{
"id": 12,
"source": 14,
"target": 15,
"type": 1
}
],
"columns": [
{
"name": "text",
"label": "任务名称",
"width": 196,
"tree": true,
"align": "left"
},
{
"name": "start_date",
"label": "起始时间",
"width": 77,
"align": "center"
},
{
"name": "duration",
"label": "持续时间",
"width": 70,
"align": "center"
},
{
"name": "progress",
"label": "进度",
"width": 73,
"align": "center"
},
{
"name": "person",
"label": "负责人",
"width": 70,
"align": "center"
}
]
}
注意：数据源格式是一个 Object 对象。
2.21 超文本组件
这个组件是个万能组件，如果你习惯于用 html 方式来设计组件，可以使用该组件，直接把 html 代码整体拷贝过来，超文本组件会原样渲染。
数据源格式：
<!DOCTYPE html>
<html>
<head>
<style>
.htmlprint {
width: 100%;
height: 100%;
padding: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<div class="htmlprint">
<table>
<tr>
<td colspan="2">合并2列</td>
<td rowspan="2">合并2行</td>
</tr>
<tr>
<td>${col21}</td>
<td>行2列3</td>
</tr>
<tr>
<td>${col31}</td>
<td>行3列2</td>
<td>行3列3</td>
</tr>
</table>
</div>
</body>
</html>
注意：数据源格式是一个 HTML 文本。
2.22 详情描述组件
这个组件乍一看有点像 table 组件,其实它 和 table 组件是相辅相成，主要用于详情展示，而不是列表展示。
参数配置：
webapi 数据源格式：
[
{
"label": "参与度",
"value": "项目维护",
"span": 1,
"rowspan": 1,
"align": "center",
"labelAlign": "center",
"width": "150px"
},
{
"label": "评分",
"value": 3,
"span": 1,
"rowspan": 1,
"align": "center",
"labelAlign": "center",
"rate_ui": true
},
{
"label": "占比",
"value": 30,
"span": 1,
"rowspan": 1,
"align": "left",
"labelAlign": "center",
"progress_ui": true,
"progress_status": "",
"progress_color": "#5cb87a"
},
{
"label": "综合评价",
"value": "及格",
"span": 1,
"rowspan": 1,
"align": "center",
"labelAlign": "center",
"tag_ui": true,
"tag_status": "warning"
}
]
注意：数据源格式是一个 对象数组。
2.23 WebGL 组件
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
界面引擎通过 three.js 实现。
参数配置：
webapi 数据源格式：
{
"gltfPath": "https://www.nbweixin.cn/autopage/gltfs/webgl/shoe/shoe.gltf",
"hdrPath": "https://www.nbweixin.cn/autopage/gltfs/webgl/shoe/spruit_sunrise_1k.hdr",
"variant": "midnight"
}
注意：数据源格式是一个 Object 对象。
2.24 Office文档在线预览组件
支持 word、excel、pdf 在线预览，支持 文件地址参数配置和 url 参数接收两种方式。
webapi 数据源格式：
{
"filePath": "https://www.nbweixin.cn/autopage/demo.xls"
}
注意：数据源格式是一个 Object 对象。
三、未完待续
截止今日，内置组件已介绍完，后续可能还会有新组件，具体组件内 webapi 参数介绍后续会继续介绍。