更新记录

1.0.0（2024-12-04） 下载此版本

首次发布。

平台兼容性

cook-tools 是从 cook-uni 组件库抽离出来的一个工具库，本插件包含了开发中常用的js工具库和scss变量，以方便快速开发，避免重复造轮子。

使用方法

<script setup>
import { uid } from "@/uni_modules/cook-tools/index";

console.log(uid()) // czXkDVapvHCnLypp0xg32yOkabfV8nQY
</script>

工具列表

• uid 生成全局uid 查看文档
• sys 获取系统信息 查看文档
• addUnit 用于给值加上单位，例如:addUnit(10)或addUnit('10rpx')返回10rpx，addUnit(5,'px')返回5px，addUnit('10rpx',false)返回10。
• camelCase 字符串转为驼峰 查看文档
• kebabCase 字符串转中划线 查看文档
• clone 深拷贝 查看文档
• merge 深度合并对象 查看文档
• debounce 防抖 查看文档
• throttle 节流 查看文档
• forEach 多功能循环 查看文档
• getObjValue 获取对象的值 查看文档
• setObjValue 设置对象属性值 查看文档
• isEmpty 空判断 查看文档
• isNullish 无效值判断 查看文档
• isPlainObject 是否简单对象 查看文档
• mathRandom 随机数生成 查看文档
• randomArray 打乱数组 查看文档
• filterObj 对象过滤 查看文档
• Big 数字处理组件Big.js 查看文档
• queryString 处理URL查询 查看文档
• queryRect 查询节点信息，例如：queryRect('#test',this).then(res=>{ //... })，注意：必须保证此节点同时拥有id|class和ref属性，且id|class等于ref
• lowerFirst 首字母小写 查看文档
• upperFirst 首字母大小 查看文档
• splitString 分隔字符串 查看文档
• stringToArray 字符串转数组 查看文档
• cssAttrSimplify Css简写处理 查看文档
• cssStyleToObj Css样式转对象 查看文档
• cssStyleToString Css样式转字符串 查看文档
• cssClassToArray Css类转数组 查看文档
• cssClassToString Css类转字符串 查看文档

Mixin

• styleMixin.js 在组件的props中混入cStyle和cClass，来替代和扩展style和class，数据类型支持String、Object、Array。

主题

theme.scss 文件中存放scss主题变量，使用如下：

在uni.scss中全局引入。

// uni.scss
@import "@/uni_modules/cook-tools/theme.scss";

或在页面或组件中单独引入主题变量。

<style lang="scss">
  @import "@/uni_modules/cook-tools/theme.scss";

  .my-class {
    background-color: $cook-color-primary;
  }
</style>

全部的主题变量如下：

// 主题色
$cook-color-primary: #409eff !default;
$cook-color-success: #67c23a !default;
$cook-color-warning: #F7940C !default;
$cook-color-danger: #f56c6c !default;
$cook-color-info: #909399 !default;

// 常规色
$cook-color-black: #000000 !default;
$cook-color-white: #ffffff !default;
$cook-color-transparent: rgba($color: #000000, $alpha: 0) !default;

// 中性色
$cook-main-color: #303133 !default;
$cook-regular-color: #606062 !default;
$cook-secondary-color: #8f909 !default;
$cook-placeholder-color: #c1c1c2 !default;

// 背景色
$cook-bg-color-base: #f8f8f8 !default;
$cook-bg-color-dark: #f6f6f6 !default;
$cook-bg-color-darker: #f4f4f4 !default;
$cook-bg-color-light: #fafafa !default;
$cook-bg-color-lighter: #fcfcfc !default;

// 边框色
$cook-border-color: #dcdfe6 !default;
$cook-border-color-dark: #d4d7de !default;
$cook-border-color-darker: #cdd0d6 !default;
$cook-border-color-light: #e4e7ec !default;
$cook-border-color-lighter: #ebecf1 !default;

// 圆角
$cook-radius-sm: 6rpx !default;
$cook-radius-base: 10rpx !default;
$cook-radius-lg: 16rpx !default;

// 阴影
$cook-shadow-sm: 0 4rpx 6rpx rgba(0, 0, 0, 0.05) !default;
$cook-shadow-base: 0 6rpx 12rpx rgba(0, 0, 0, 0.05) !default;
$cook-shadow-lg: 0 12rpx 24rpx rgba(0, 0, 0, 0.05) !default;

Cook-uni

Cook uni是基于uni-app的多平台快速开发UI框架，历经多个大小型的项目实践，已形成一套更适合uni-app多平台开发的UI框架。

查看cook-uniUi组件库。

这些项目都使用了cook-uni：项目案例

功能预览：查看示例