COOL-UNI

# COOL-UNI

# 简介

COOL-UNI 是uni-app (opens new window)的组件库，使用简单，兼容多端。

# 版权信息

COOL-UNI遵循MIT (opens new window)开源协议，无需支付任何费用，也无需授权，即可将COOL-UNI应用到您的产品中。

WARNING

不可以用于非法用途，如：赌博、色情等，由此产生的法律问题，COOL官方不承担任何责任

# 演示

# 小程序 | H5

# H5 演示地址

H5 演示地址 (opens new window)

# 下载

npm 方式

npm install cl-uni

yarn 方式

yarn add cl-uni

安装依赖后，存在目录 node_modules/cl-uni 即可

# 运行

WARNING

cool-uni 使用easycom模式（自动引入组件），简化组件使用。无需在页面里面引入和注册组件，按实际使用打包

组件自动引入

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
            // 1.1.0 版本前:
            "cl-(.*)": "cl-uni/components/$1/$1.vue"

            // 1.1.0 版本后:
            "cl-(.*)": "cl-uni/components/cl-$1/cl-$1.vue"
		}
	}
}

引入组件样式（必须）

// App.vue
<style lang="scss">
	@import "cl-uni/index.scss";
</style>

引入主题（必须）

// uni.scss
@import "cl-uni/theme.scss";

/* 默认主题色 */
$cl-color-primary: #409eff;
$cl-color-default: #dcdfe6;
$cl-color-success: #67c23a;
$cl-color-warning: #e6a23c;
$cl-color-error: #dd524d;
$cl-color-info: #909399;
$cl-color-disabled: #c0c4cc;

/* 自定义主题色 */
$cl-color-primary: red;
$cl-color-default: green;
$cl-color-success: yellow;
$cl-color-warning: pink;
$cl-color-error: blue;
$cl-color-info: white;
$cl-color-disabled: black;

WARNING

支付宝小程序下，需要在 main.js 中配置主题色

# 配置

使用组件时，附加的一些配置

// main.js
import Vue from "vue";
import ClUni from "cl-uni";

Vue.use(ClUni, {
	// 进入业务单页时，页面栈只有一个，自定义导航左侧返回按钮跳转的路径
	homePage: "/"
});

# 兼容提示

  • 支付宝小程序需要开启 component2 编译

# 版本

# v1.6.1(2020-12-30)

  • 添加头条小程序的支持
  • 调整 cl-waterfall 组件，支持自定义列数

# v1.5.1(2020-12-28)

  • 重写 cl-filter-bar 支持升序降序, 下拉框，开关，自定义筛选，更加自由

# v1.4.4(2020-12-23)

  • 全面支持支付宝小程序
  • 优化 cl-noticebar 组件

# v1.3.9(2020-12-18)

  • 重写 cl-form 验证规则
  • 处理 cl-form 在 app 上不生效问题
  • cl-loading 添加主题
  • cl-button 添加加载样式

# v1.3.7(2020-12-16)

  • cl-form 添加参数 disabled 表单禁用
  • cl-select 添加参数 border 边框
  • cl-textarea 添加参数 count 计数
  • 解决 app 下颜色异常问题

# v1.3.6(2020-12-15)

  • cl-guide 添加动画
  • 解决 cl-button 在安卓 app 下 loading 错位

# v1.3.5(2020-12-14)

  • 添加 cl-calendar 日历组件
  • 优化样式细节

# v1.3.4(2020-12-11)

  • 修改 cl-select 数据显示错误问题
  • 修改 cl-select-region 数据显示问题
  • cl-select 添加 defaultFirstOption 是否默认返回第一个

# v1.1.10(2020-12-08)

  • 添加 ClCanvas 支持超出隐藏, 圆角, 边框...

# v1.1.9(2020-12-04)

  • cl-text 添加 prefix-icon suffix-icon @tap
  • cl-tabs 添加 color
  • cl-input 添加 @prefix-icon-tap @suffix-icon-tap
  • 解决 cl-sticky 代码异常

# v1.1.0(2020-11-26)

  • 重构部分组件，更新文档
  • 调整项目结构，添加 props 说明；
  • 修改 easycom
	{
		easycom: {
			custom: {
				"cl-(.\*)": "cl-uni/components/cl-$1/cl-$1.vue"
			}
		}
	}

Button 按钮 →