网站建设与管理指什么软件wordpress 企业网站教程
🎀🎀🎀 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 参数介绍后续会继续介绍。