更新记录

1.0.0（2026-04-25） 下载此版本

更新日志

所有重要更改都将记录在此文件中。

[1.0.0] - 2026-04-25

新增

• r-button 按钮组件

  • 支持 6 种类型：default、primary、success、warning、danger、info
  • 支持 3 种尺寸：small、medium、large
  • 支持朴素按钮（plain）、圆角按钮（round）、圆形按钮（circle）
  • 支持禁用状态和加载状态
  • 支持块级按钮（block）
  • 支持图标显示

• r-card 卡片组件

  • 支持标题、描述、副标题
  • 支持缩略图
  • 支持自定义头部、内容、底部插槽
  • 支持阴影效果开关

特性

• 基于 Vue 3 Composition API
• 兼容 uni-app 生态
• 使用 SCSS 预处理器
• 响应式设计，支持 rpx 单位

平台兼容性

uni-app(3.7.6)

uni-app x(3.7.6)

ran-ui-lib

简洁美观的 uni-app 组件库，基于 Vue 3 Composition API 构建。

特性

• 基于 Vue 3 Composition API
• 轻量级、高性能
• 统一的命名规范和样式风格
• 响应式设计，支持多端适配

组件列表

Button 按钮

<r-button type="primary" @click="handleClick">主要按钮</r-button>

Props

Events

Card 卡片

<r-card title="卡片标题" desc="卡片描述" thumb="/static/logo.png">
  <template #content>
    卡片内容
  </template>
  <template #footer>
    卡片底部
  </template>
</r-card>

Props

Slots

安装

将 uni_modules/ran-ui-lib 目录复制到项目的 uni_modules 目录下。

使用

在 pages.json 中配置 easycom：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^r-(.*)": "@/uni_modules/ran-ui-lib/components/r-$1/r-$1.vue"
    }
  }
}

许可证

MIT