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

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

一、Microi吾码：一款高效、灵活的低代码开发开源框架【低代码框架】
二、Vue3项目快速集成界面引擎
三、Vue3 界面设计插件 microi-pageengine 入门教程一
四、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·上】
五、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·中】
六、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、可为空】。然后去【表单引擎】—>【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 对象。

三、未完待续

时间有限，先介绍到这，下一篇再介绍余下的组件用法，感谢您的点赞、评论与收藏。让我更有动力去持续输出。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/75071.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【多线程】单例模式和阻塞队列

【多线程】单例模式和阻塞队列

目录 一.单例模式 1. 饿汉模式 2. 懒汉模式 二.阻塞队列 1. 阻塞队列的概念 2. BlockingQueue接口 3.生产者-消费者模型 4.模拟生产者-消费者模型 一.单例模式 单例模式（Singleton Pattern）是一种常用的软件设计模式，其核心思想是确保…
阅读更多...
终值定理的推导与理解

终值定理的推导与理解

终值定理的推导与理解 终值定理是控制理论和信号处理中的一个重要工具，它通过频域的拉普拉斯变换来分析时间域函数的最终稳态值。具体来说，终值定理提供了一个简便的方法，利用 F ( s ) F(s) F(s)（ f ( t ) f(t) f(t) 的拉普拉斯…
阅读更多...
每日c/c++题 备战蓝桥杯（二分答案模版）

每日c/c++题 备战蓝桥杯（二分答案模版）

在算法学习中，二分答案算法是一种非常高效且常用的技巧。它的核心思想是通过不断缩小搜索范围，逐步逼近目标答案。相比传统的暴力搜索，二分答案算法的时间复杂度通常为 O(logn)，特别适合处理大规模数据的查找问题。 本文将详细介…
阅读更多...
NLP高频面试题（二十六）——RAG的retriever模块作用，原理和目前存在的挑战

NLP高频面试题（二十六）——RAG的retriever模块作用，原理和目前存在的挑战

在自然语言处理领域，检索增强生成（Retrieval-Augmented Generation，简称RAG）是一种将信息检索与文本生成相结合的技术，旨在提升模型的回答准确性和信息丰富度。其中，Retriever在RAG架构中扮演着关键角色&am…
阅读更多...
第30周Java分布式入门 分布式基础

第30周Java分布式入门 分布式基础

分布式基础课程笔记 一、什么是分布式？ 1. 权威定义 分布式系统定义为：“利用物理架构形成多个自治的处理元素，不共享主内存，通过发送消息合作”。 2. 核心解释 物理架构与处理元素 🌟 多台独立服务器/电脑&#x…
阅读更多...
Vuex状态管理

Vuex状态管理

Vuex Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。（类似于在前端的数据库，这里的数据存储在内存当中） 一、安装并配置 在项目的…
阅读更多...
从代码学习深度学习 - 使用块的网络（VGG）PyTorch版

从代码学习深度学习 - 使用块的网络（VGG）PyTorch版

文章目录 前言一、VGG网络简介1.1 VGG的核心特点1.2 VGG的典型结构1.3 优点与局限性1.4 本文的实现目标二、搭建VGG网络2.1 数据准备2.2 定义VGG块2.3 构建VGG网络2.4 辅助工具2.4.1 计时器和累加器2.4.2 准确率计算2.4.3 可视化工具2.5 训练模型2.6 运行实验总结前言 深度学习…
阅读更多...
Baklib激活企业知识管理新动能

Baklib激活企业知识管理新动能

Baklib核心技术架构解析 Baklib的底层架构以模块化设计为核心，融合知识中台的核心理念，通过分布式存储引擎与智能语义分析系统构建三层技术体系。数据层采用多源异构数据接入协议，支持文档、音视频、代码片段等非结构化数据的实时解析与分类…
阅读更多...
小智机器人中的部分关键函数，FreeRTOS中`xEventGroupWaitBits`函数的详细解析

小智机器人中的部分关键函数，FreeRTOS中`xEventGroupWaitBits`函数的详细解析

以下是对FreeRTOS中xEventGroupWaitBits函数的详细解析： 函数功能 xEventGroupWaitBits用于在事件组中等待指定的位被设置。它可以配置为等待任意一个位或所有位，并支持超时机制。 注意：该函数不能在中断中调用。 函数原型 EventBits_t xEv…
阅读更多...
关注分离（Separation of Concerns）在前端开发中的实践演进：从 XMLHttpRequest 到 Fetch API

关注分离（Separation of Concerns）在前端开发中的实践演进：从 XMLHttpRequest 到 Fetch API

关注分离（Separation of Concerns）在前端开发中的实践演进：从 XMLHttpRequest 到 Fetch API 一、关注分离的核心价值 关注分离（SoC）是软件工程领域的重要设计原则，强调将系统分解为不同维度的功能模块&am…
阅读更多...
C之(16)scan-build与clang-tidy使用

C之(16)scan-build与clang-tidy使用

C之(16)scan-build与clang-tidy使用 Author: Once Day Date: 2025年3月29日 一位热衷于Linux学习和开发的菜鸟，试图谱写一场冒险之旅，也许终点只是一场白日梦… 漫漫长路，有人对你微笑过嘛… 全系列文章可参考专栏: Linux实践记录_Once_da…
阅读更多...
在 Vue 项目中快速集成 Vant 组件库

在 Vue 项目中快速集成 Vant 组件库

目录 引言一、找到 src 下的App.js 写入代码。二、安装Vant三、解决 polyfill 问题四、查看依赖五、配置webpack六、引入 Vant七、在组件中使用 Vant八、在浏览器中查看样式总结 引言 在开发移动端 Vue 项目时，选择一个高效、轻量且功能丰富的组件库是提升开发效率…
阅读更多...
“GPU 挤不动了？”——聊聊基于 GPU 的计算资源管理

“GPU 挤不动了？”——聊聊基于 GPU 的计算资源管理

“GPU 挤不动了？”——聊聊基于 GPU 的计算资源管理 作者：Echo_Wish “老板：为什么 GPU 服务器卡得跟 PPT 一样？” “运维：我们任务队列爆炸了，得优化资源管理！” 在 AI 训练、深度学习、科学计算的场景下，GPU 计算资源已经成为香饽饽。但 GPU 服务器贵得离谱，一台 A…
阅读更多...
AI渗透测试：网络安全的“黑魔法”还是“白魔法”？

AI渗透测试：网络安全的“黑魔法”还是“白魔法”？

引言：AI渗透测试，安全圈的“新魔法师” 想象一下，你是个网络安全新手，手里攥着一堆工具，正准备硬着头皮上阵。这时，AI蹦出来，拍着胸脯说：“别慌，我3秒扫完漏洞&#xff0…
阅读更多...
（二）GEE基础学习初探及案例详解【20250330】

（二）GEE基础学习初探及案例详解【20250330】

Google Earth Engine(GEE)是由谷歌公司开发的众多应用之一。借助谷歌公司超强的服务器运算能力以及与NASA的合作关系，GEE平台将Landsat、MODIS、Sentinel等可以公开获取的遥感图像数据存储在谷歌的磁盘阵列中，使得GEE用户可以方便的提取、调用和分析海量…
阅读更多...
redhat认证是永久的吗

redhat认证是永久的吗

​认证有效期 ​红帽认证一般有效期为3年​（如RHCSA、RHCE、RHCA等），从通过考试之日起计算。 ​例外：部分基础或工程师认证（如Red Hat Certified Engineer）有效期为三年时间，以官方最新政策为准…
阅读更多...
git --- cherry pick

git --- cherry pick

git --- cherry pick cherry pick cherry pick Cherry Pick 是 Git 中的一个操作，它允许你选择某个分支的某次（或多次）提交，并将其应用到当前分支，而不会合并整个分支的所有更改。 cherry pick 的作用 只提取某个特定的…
阅读更多...
妙用《甄嬛传》中的选妃来记忆概率论中的乘法公式

妙用《甄嬛传》中的选妃来记忆概率论中的乘法公式

强烈推荐最近在看的不错的B站概率论课程 《概率统计》正课，零废话，超精讲！【孔祥仁】 《概率统计》正课，零废话，超精讲！【孔祥仁】_哔哩哔哩_bilibili 其中概率论中的乘法公式，老师用了《甄嬛传…
阅读更多...
AI 的出现是否能替代 IT 从业者？

AI 的出现是否能替代 IT 从业者？

AI 的出现是否能替代 IT 从业者？ AI 的快速发展正在深刻改变各行各业，IT 行业也不例外。然而，AI 并非完全替代 IT 从业者，而是与其形成互补关系。本文将从 AI 的优势、IT 从业者的不可替代性、未来趋势等方面，探讨 AI…
阅读更多...
【leetcode100】有效的括号

【leetcode100】有效的括号

1、题目描述 给定一个只包括 (，)，{，}，[，] 的字符串 s ，判断字符串是否有效。 有效字符串需满足： 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的…
阅读更多...
最新文章

Copyright @ 2022~2023