更新记录

1.0.3（2025-08-13） 下载此版本

更新日历的导出方式

1.0.2（2025-08-13） 下载此版本

优化已知问题，新增日历数据。

1.0.1（2025-08-11） 下载此版本

• 初始化项目

平台兼容性

云端兼容性

uni-app(4.13)

uni-app x(4.13)

SC-UI

轻量级 uni-app UI 组件库，提供简洁、易用、高性能的组件，帮助开发者快速构建跨平台应用。

特点

• 轻量级：组件体积小，性能优良
• 跨平台：支持 Vue 2/Vue 3，兼容多个终端平台
• 易用性：组件 API 设计简洁，文档完善
• 可定制：支持主题定制和组件扩展
• 高性能：优化渲染性能，减少不必要的重绘

安装

在 uni-app 项目中，通过 HBuilderX 导入组件库即可使用。

使用

全局引入

在main.js中引入并注册组件库：

import Vue from "vue";
import scUI from "@/uni_modules/sc-ui";

// vue2
Vue.use(scUI, {
  // 配置选项
});

// vue3
app.use(scUI, {
  color: {
    // 配置全局颜色值
    c1: "#F11F00",
    c2: "#007DFE",
    c2: "#32F08C",
  },
  button: {
    // 配置全局按钮样式
    types: {
      bt1: {
        // 按钮的固定样式可以全局定义
        color: "#fff",
        width: "100px",
        height: "50px",
        borderRadius: "25px",
        fontSize: "16px",
        fontWeight: "bold",
        backgroundColor: "#3C9CFF",
      },
      bt2: {
        color: "#007DFE",
        width: "300rpx",
        height: "80rpx",
        borderRadius: "80rpx",
        fontSize: "16px",
        fontWeight: "bold",
        border: "1px solid #007DFE",
      },
    },
  },
});

组件使用

<template>
  <view>
    <sc-button type="bt1" @click="handleClick">按钮</sc-button>
    <sc-flex justify="center" align="center">
      <sc-text size="16">文本内容</sc-text>
    </sc-flex>
    <sc-grid col="1fr 200rpx 1fr">
      <sc-text size="16">文本内容</sc-text>
      <sc-text size="16">文本内容</sc-text>
      <sc-text size="16">文本内容</sc-text>
    </sc-grid>
  </view>
</template>

组件列表

基础组件

• <sc-view>：基础视图容器
• <sc-text>：文本组件
• <sc-button>：按钮组件
• <sc-image>：图片组件
• <sc-tag>：标签组件

布局组件

• <sc-flex>：弹性布局
• <sc-grid>：网格布局
• <sc-gap>：间距组件

业务组件

• <sc-price>：价格组件
• <sc-footer>：底部导航

工具函数

SC-UI 提供了丰富的工具函数，挂载在 $sc 全局对象上，详情查看代码文件

`debounce`: 函数防抖
`throttle`: 函数节流
`deepClone`: 深拷贝
`deepMerge`: 深合并
`addUnit`: 为数值添加单位
`convertColor`: 颜色转换
`px2rpx`: px 转换为 rpx
`rpx2px`: rpx 转换为 px
`removeObjectEmptyVal`: 移除对象空值
`getColor`: 获取颜色值
`isEmail`: 校验邮箱
`isEmpty`: 校验空值
`isPhone`: 校验手机号
`isIdCard`: 校验身份证号
`isObject`: 校验对象
`isPureNumber`: 校验纯数字
`storage`: 本地存储
`sysInfo`: 获取系统信息
`router`: 路由跳转

版本

当前版本：v1.0.1

更新日志

查看 changelog.md 获取详细更新记录。

联系方式

WeChat: zuodaowx

注意事项

• 目前组件库完善中，配置使用纯个人习惯
• 更多组件和功能持续开发中...