主题
LimeUi
🚀 现代化轻量级跨平台UI组件库
基于Composition API (setup)构建的轻量高效UI组件库,丰富的组件与原生插件,完美兼容UniApp/UniAppX生态,支持CSS Var动态主题,助您快速构建专业级跨端应用!
✨ 核心优势
- 基于Setup语法 - 采用Vue3 Composition API构建,代码更简洁,逻辑复用更强大
- 全面跨平台 - 完美支持UniApp/UniAppX生态,一套代码,多端运行
- CSS变量支持 - 内置CSS变量系统,轻松实现主题定制与暗黑模式
- 按需导入 - 支持组件单独导入,减小应用体积,提升性能
- 持续更新 - 活跃维护,定期新增组件与功能
提示
📦 组件使用提示
✔ 所有组件支持按需引入
⚠ 维护量大,难免出现错误,有问题及时反馈
📩 反馈问题:插件市场评论区 → 加入开发者交流群
🔖 最佳实践
▸ 保持HBX为最新版本,因为组件可能会使用最新特性
▸ 保持基础组件为最新版本
🚀 快速开始
安装方式
完整导入:
在 插件市场 点击「试用」按钮,一键集成基础组件库按需导入:
访问组件详情页 → 点击「导入」获取组件独立包
📦 推荐方案:基础组件库 + 按需加载特定组件
⚡ 优势:有利于改善强迫症患者焦虑
- 授权说明
授权类型 | 包含内容 | 获取方式 | 价格 |
---|---|---|---|
免费使用 | 全部免费组件 | 插件市场直接试用 | 免费 |
普通授权 | 全部免费组件 | 插件市场直接试用 | ¥8(相当于打赏) |
源码授权 | 免费组件 + 收费组件 + 原生组件源码 | 购买后联系作者 | ¥449 |
💡 小贴士:每份授权都是对项目持续维护的支持,衷心感谢开发者的认可!
🆓 免费组件列表
持续更新中,如有未覆盖的组件需求可通过交流群提出
以下组件将随库自动导入(共 66 款):
组件名称 | 功能描述 | 兼容平台 |
---|---|---|
lime-icon | 图标组件 | web/微信小程序/App/鸿蒙next |
lime-button | 按钮组件 | web/微信小程序/App/鸿蒙next |
lime-popup | 弹窗组件 | web/微信小程序/App/鸿蒙next |
lime-resize | 监听元素尺寸 | web/微信小程序/App/鸿蒙next |
lime-transition | 过渡动画 | web/微信小程序/App/鸿蒙next |
lime-cell | 单元格 | web/微信小程序/App/鸿蒙next |
lime-image | 图片组件 | web/微信小程序/App/鸿蒙next |
lime-link | 超链接 | web/微信小程序/App/鸿蒙next |
lime-space | 间距布局 | web/微信小程序/App/鸿蒙next |
lime-cascader | 级联选择器 | web/微信小程序/App/鸿蒙next |
lime-checkbox | 复选框 | web/微信小程序/App/鸿蒙next |
lime-radio | 单选框 | web/微信小程序/App/鸿蒙next |
lime-search | 搜索框 | web/微信小程序/App/鸿蒙next |
lime-stepper | 步进器 | web/微信小程序/App/鸿蒙next |
lime-switch | 开关组件 | web/微信小程序/App/鸿蒙next |
lime-input | 输入框 | web/微信小程序/App/鸿蒙next |
lime-textarea | 多行文本框 | web/微信小程序/App/鸿蒙next |
lime-upload | 文件上传 | web/微信小程序/App/鸿蒙next |
lime-picker | 选择器组件 | web/微信小程序/App/鸿蒙next |
lime-date-time-picker | 时间选择器 | web/微信小程序/App/鸿蒙next |
lime-area | 省市区选择 | web/微信小程序/App/鸿蒙next |
lime-keyboard | 虚拟键盘 | web/微信小程序/App |
lime-code-input | 验证码输入框 | web/微信小程序/App/鸿蒙next |
lime-date-strip | 日期横条 | web/微信小程序/App/鸿蒙next |
lime-daily-punch | 打卡签到 | web/微信小程序/App/鸿蒙next |
lime-loading | 加载动画 | web/微信小程序/App/鸿蒙next |
lime-load-more | 加载更多 | web/微信小程序/App/鸿蒙next |
lime-dialog | 弹出对话框 | web/微信小程序/App/鸿蒙next |
lime-overlay | 遮罩层 | web/微信小程序/App/鸿蒙next |
lime-action-sheet | 动作面板 | web/微信小程序/App/鸿蒙next |
lime-swipe-cell | 滑动单元格 | web/微信小程序/App/鸿蒙next |
lime-sorter | 排序按钮 | web/微信小程序/App/鸿蒙next |
lime-fab | 浮动按钮 | web/微信小程序/App/鸿蒙next |
lime-floating-panel | 浮动面板 | web/微信小程序/App/鸿蒙next |
lime-circle | 环形进度条 | web/微信小程序/App/鸿蒙next |
lime-liquid | 水波进度球 | web/微信小程序/App/鸿蒙next |
lime-collapse | 折叠面板 | web/微信小程序/App/鸿蒙next |
lime-count-down | 倒计时组件 | web/微信小程序/App/鸿蒙next |
lime-divider | 分割线 | web/微信小程序/App/鸿蒙next |
lime-empty | 空状态提示 | web/微信小程序/App/鸿蒙next |
lime-steps | 步骤条 | web/微信小程序/App/鸿蒙next |
lime-tag | 标签组件 | web/微信小程序/App/鸿蒙next |
lime-count-to | 数字滚动 | web/微信小程序/App/鸿蒙next |
lime-badge | 徽标组件 | web/微信小程序/App/鸿蒙next |
lime-avatar | 头像组件 | web/微信小程序/App/鸿蒙next |
lime-watermark | 水印组件 | web/微信小程序/App/鸿蒙next |
lime-highlight | 高亮文本 | web/微信小程序/App/鸿蒙next |
lime-popover | 气泡弹出框 | web/微信小程序/App/鸿蒙next |
lime-text-ellipsis | 文本省略 | web/微信小程序/App/鸿蒙next |
lime-read-more | 查看更多 | web/微信小程序/App/鸿蒙next |
lime-notice-bar | 通知栏 | web/微信小程序/App/鸿蒙next |
lime-scroll-x | 横向滚动 | web/微信小程序/App/鸿蒙next |
lime-dateformat | 日期格式化 | web/微信小程序/App/鸿蒙next |
lime-sidebar | 侧边导航 | web/微信小程序/Appp/鸿蒙next |
lime-tabbar | 标签栏 | web/微信小程序/App/鸿蒙next |
lime-back-top | 回到顶部 | web/微信小程序/App/鸿蒙next |
lime-navbar | 导航栏 | web/微信小程序/App/鸿蒙next |
lime-segmented | 分段器 | web/微信小程序/App/鸿蒙next |
lime-grid | 宫格布局 | web/微信小程序/App/鸿蒙next |
lime-tabs | 标签页 | web/微信小程序/App/鸿蒙next |
lime-pagination | 分页器 | web/微信小程序/App/鸿蒙next |
lime-swiper-dot | 轮播图指示点 | web/微信小程序/App/鸿蒙next |
lime-footer | 页脚 | web/微信小程序/App/鸿蒙next |
lime-dialer | 大转盘 | web/微信小程序/App/鸿蒙next |
lime-layout | 布局 | web/微信小程序/App/鸿蒙next |
lime-card | 卡片 | web/微信小程序/App/鸿蒙next |
💰 增值组件
不定期更新增加
收费组件 (18 款)
组件名称 | 功能描述 | 平台兼容 | 价格 |
---|---|---|---|
lime-svg | SVG 渲染核心 | web/微信小程序/App | ¥6 |
lime-barcode | 条形码生成 | web/微信小程序/App | ¥99 |
lime-qrcode | 二维码生成 | web/微信小程序/App | ¥99 |
lime-calendar | 日历组件 | web/微信小程序/App | ¥50 |
lime-arc-slider | 环形选择器 | web/微信小程序/App | ¥5 |
lime-ruler | 尺子工具 | web/微信小程序/App | ¥20 |
lime-clipper | 图片裁剪 | web/微信小程序/App | ¥60 |
lime-dropdown-menu | 下拉菜单 | web/微信小程序/App | ¥20 |
lime-tree | 树形控件 | web/微信小程序/App | ¥99 |
lime-confetti | 彩纸特效 | web/微信小程序/App | ¥50 |
lime-table | 表格 | web/微信小程序/App | ¥5 |
lime-indexes | 索引 | web/微信小程序/App | ¥5 |
lime-marquee | 跑马灯 | web/微信小程序/App | ¥10 |
lime-typing | 输入中 | web/微信小程序/App | ¥10 |
lime-gesture | 手势库 | web/微信小程序/App | ¥20/50 |
lime-color-picker | 颜色选择器 | web/微信小程序/App | ¥29/50 |
lime-waterflow | 瀑布流 | web/微信小程序/App | ¥19/20 |
lime-form | 表单 | web/微信小程序/App/鸿蒙next | ¥20 |
原生组件 (18 款)
组件名称 | 功能描述 | 平台兼容 | 价格 |
---|---|---|---|
lime-share | 文件分享 | iOS/Android | ¥68/99 |
lime-call-logs | 通讯记录 | Android | ¥10/299 |
lime-keyboard-utils | 隐藏键盘 | iOS/Android | ¥2/30 |
lime-choose-file | 文件选择 | iOS/Android/web/微信小程序 | ¥15/88 |
lime-scan | 扫码功能 | iOS/Android/web | ¥50/299 |
lime-zip | 压缩解压 | iOS/Android | ¥68/299 |
lime-pinyin | 汉字转拼音 | web/微信小程序/App | ¥28/299 |
lime-pdf | PDF 预览 | iOS/Android | ¥50/299 |
lime-blur-view | 高斯模糊 | iOS/Android | ¥10/299 |
lime-sqlite | 数据库 | App | ¥39/299 |
lime-svga | svga动画 | iOS/Android | ¥25/168 |
lime-weixin | 微信SDK | iOS/Android | ¥20/299 |
lime-ocr | 图片文本识别 | iOS/Android | ¥29/299 |
lime-shrink | 图片压缩 | App/web/微信小程序 | ¥19/20 |
lime-crypto | 加密 | App/web/微信小程序 | ¥19/199 |
lime-mqtt | mqtt消息推送 | App/web/微信小程序 | ¥30/299 |
lime-frost | 内容模糊 | iOS/Android | ¥20/200 |
lime-gzip | 数据流解压 | App/web/微信小程序 | ¥19/199 |
lime-xlsx | Excel文件转JSON | App/web/微信小程序 | ¥30/368 |
平台标识说明:
- 具体兼容性以插件市场组件详情页为准
价格说明
- 支持两种购买方式:
- 单独购买:单个组件授权
- 源码授权包:¥449 获得所有原生组件源码(含持续更新)
付费组件说明
本库坚持开源共享原则,绝大多数组件免费开放。少量付费组件收入将用于项目持续维护和技术支持,感谢理解与支持。
图标组件特别说明
使用LimeIcon
组件时需注意:
- 核心依赖
组件依赖的 lime-svg插件 为原生付费组件(5元)
Vue2 兼容方案
- 插件使用了
composition-api
, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置 - 关键代码是: 在main.js中 在vue2部分加上这一段即可
js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
组件标识规范
为方便开发调试,我们采用标准化标签体系:
标签类型 | 命名规范 | 示例 | 作用说明 |
---|---|---|---|
组件标签 | l-{component} | <l-image/> | 正式组件 |
演示标签 | lime-{component} | <lime-image/> | 组件使用示例 |
开发建议:参考演示标签的用法示例,实际开发使用正式组件标签
技术支持通道
遇到技术问题可通过以下方式获取支持:
- 📝 插件市场评论区留言
- 👥 评论区入口加入开发者交流群
文档维护说明:本指南将随版本迭代持续更新,建议定期查看最新版本说明。更新日志可通过插件市场页面查看。
捐助支持
如果您觉得组件库对您的开发工作有所帮助,欢迎通过下方二维码进行捐助。您的支持将助力项目持续优化与更新!


感谢您对开源项目的支持!💖
每一份捐助都将用于:
- 服务器与域名维护
- 组件库功能增强
- 开发者激励计划