小程序ColorUI使用简易教程

柔情只为你懂 2022-11-29 12:54 1245阅读 0赞

**本教程配合[官方示例][Link 1]食用更佳！！！**

**目录**

[前言][Link 2]

[快速上手][Link 3]

[使用UniApp开发][UniApp]

[开始][Link 4]

[使用自定义导航栏][Link 5]

[使用原生小程序开发][Link 6]

[从现有项目开始][Link 7]

[从新项目开始][Link 8]

[使用自定义导航栏][Link 5]

[组件][Link 9]

[基础元素][Link 10]

[layout布局][layout]

[Background背景 ][Background]

[Text文字][Text]

[Icon图标][Icon]

[Button按钮][Button]

[Tag标签][Tag]

[Avatar头像][Avatar]

[Progress进度条 ][Progress]

[Border&Shadow边框阴影 ][Border_Shadow]

[Loading加载][Loading]

[交互组件][Link 11]

--------------------

# 前言 #

![colorUI组件][colorUI]

ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件

--------------------

# 快速上手 #

## 使用UniApp开发 ##

### 开始 ###

[下载源码][Link 1]解压获得`/Colorui-UniApp`文件夹，复制目录下的 `/colorui` 文件夹到你的项目根目录

`App.vue` 引入关键Css `main.css` `icon.css`

### 使用自定义导航栏 ###

导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

`App.vue` 获得系统信息

onLaunch: function() {
    
    uni.getSystemInfo({
    
    success: function(e) {
    
    // #ifndef MP
    
    Vue.prototype.StatusBar = e.statusBarHeight;
    
    if (e.platform == 'android') {
    
    Vue.prototype.CustomBar = e.statusBarHeight + 50;
    
    } else {
    
    Vue.prototype.CustomBar = e.statusBarHeight + 45;
    
    };
    
    // #endif
    
    // #ifdef MP-WEIXIN
    
    Vue.prototype.StatusBar = e.statusBarHeight;
    
    let custom = wx.getMenuButtonBoundingClientRect();
    
    Vue.prototype.Custom = custom;
    
    Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
    
    // #endif
    
    // #ifdef MP-ALIPAY
    
    Vue.prototype.StatusBar = e.statusBarHeight;
    
    Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
    
    // #endif
    
    }
    
    })
    
    },

`pages.json` 配置取消系统导航栏

"globalStyle": {
    
    "navigationStyle": "custom"
    
    },

复制代码结构可以直接使用，注意全局变量的获取。

使用封装,在`main.js` 引入 `cu-custom` 组件。

import cuCustom from './colorui/components/cu-custom.vue'
    
    Vue.component('cu-custom',cuCustom)

`page.vue` 页面可以直接调用了

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
    
    <block slot="backText">返回</block>
    
    <block slot="content">导航栏</block>
    
    </cu-custom>

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>作用</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bgColor</td> 
   <td>背景颜色类名</td> 
   <td>String</td> 
   <td>''</td> 
  </tr> 
  <tr> 
   <td>isBack</td> 
   <td>是否开启返回</td> 
   <td>Boolean</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>bgImage</td> 
   <td>背景图片路径</td> 
   <td>String</td> 
   <td>''</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>slot块</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>backText</td> 
   <td>返回时的文字</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>中间区域</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>右侧区域(小程序端可使用范围很窄！)</td> 
  </tr> 
 </tbody> 
</table>

## 使用原生小程序开发 ##

### 从现有项目开始 ###

[下载源码][Link 1]解压获得`/demo`，复制目录下的 `/colorui` 文件夹到你的项目根目录

`App.wxss` 引入关键Css `main.wxss` `icon.wxss`

@import "colorui/main.wxss";
    
    @import "colorui/icon.wxss";
    
    @import "app.css"; /* 你的项目css */
    
    ....

### 从新项目开始 ###

下载源码解压获得`/template`，复制`/template`并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了

### 使用自定义导航栏 ###

导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

`App.js` 获得系统信息

onLaunch: function() {
    
        wx.getSystemInfo({
    
            success: e => {
    
                this.globalData.StatusBar = e.statusBarHeight;
    
                let custom = wx.getMenuButtonBoundingClientRect();
    
                this.globalData.Custom = custom;
    
                this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
    
            }
    
        })
    
    },

`App.json` 配置取消系统导航栏,并全局引入组件

"window": {
    
    "navigationStyle": "custom"
    
    },
    
    "usingComponents": {
    
    "cu-custom":"/colorui/components/cu-custom"
    
    }

`page.wxml` 页面可以直接调用了

<cu-custom bgColor="bg-gradual-pink" isBack="{
       {true}}">
    
    <view slot="backText">返回</view>
    
    <view slot="content">导航栏</view>
    
    </cu-custom>

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>作用</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bgColor</td> 
   <td>背景颜色类名</td> 
   <td>String</td> 
   <td>''</td> 
  </tr> 
  <tr> 
   <td>isBack</td> 
   <td>是否开启返回</td> 
   <td>Boolean</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>isCustom</td> 
   <td>是否开启左侧胶囊</td> 
   <td>Boolean</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>bgImage</td> 
   <td>背景图片路径</td> 
   <td>String</td> 
   <td>''</td> 
  </tr> 
 </tbody> 
</table>

--------------------

# 组件 #

## 基础元素 ##

### layout布局 ###

**Flex布局**

> 父级添加class名flex

*  固定尺寸

> 通过添加class名basic-\{ \{options\}\}来设置分栏大小，options可以取五个值，分别为xs、sm、df、lg、xl

![固定尺寸][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70]

*  比例布局

> 通过添加class名flex-\{ \{options\}\}来设置分栏大小，options可以取值sub、twice、treble，分别代表占比1，2，3

![比例布局][20191108160308488.png]

*  水平对齐（justify）

> 通过添加class名justify-\{ \{options\}\}来设置盒子水平对齐方式，options可以取值start、end、center、between、around，效果可以参考flex布局布局中的容器属性justify-content（[Flex布局教程][Flex]）

![水平对齐][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 1]

<view class="bg-white">
    
    <view class="flex solid-bottom padding justify-start">
    
    <view class="bg-grey padding-sm margin-xs radius">start</view>
    
    <view class="bg-grey padding-sm margin-xs radius">start</view>
    
    </view>
    
    <view class="flex solid-bottom padding justify-end">
    
    <view class="bg-grey padding-sm margin-xs radius">end</view>
    
    <view class="bg-grey padding-sm margin-xs radius">end</view>
    
    </view>
    
    <view class="flex solid-bottom padding justify-center">
    
    <view class="bg-grey padding-sm margin-xs radius">center</view>
    
    <view class="bg-grey padding-sm margin-xs radius">center</view>
    
    </view>
    
    <view class="flex solid-bottom padding justify-between">
    
    <view class="bg-grey padding-sm margin-xs radius">between</view>
    
    <view class="bg-grey padding-sm margin-xs radius">between</view>
    
    </view>
    
    <view class="flex solid-bottom padding justify-around">
    
    <view class="bg-grey padding-sm margin-xs radius">around</view>
    
    <view class="bg-grey padding-sm margin-xs radius">around</view>
    
    </view>
    
    </view>

*  垂直对齐（align）

> 通过添加class名align-\{ \{options\}\}来设置盒子垂直对齐方式，options可以取值start、end、center，效果可以参考flex布局布局中的容器属性align-item（[Flex布局教程][Flex]）

![垂直对齐][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 2]

<view class="bg-white">
    
    <view class="flex solid-bottom padding align-start">
    
    <view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    
    <view class="bg-grey padding-sm margin-xs radius">start</view>
    
    </view>
    
    <view class="flex solid-bottom padding align-end">
    
    <view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    
    <view class="bg-grey padding-sm margin-xs radius">end</view>
    
    </view>
    
    <view class="flex solid-bottom padding align-center">
    
    <view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    
    <view class="bg-grey padding-sm margin-xs radius">center</view>
    
    </view>
    
    </view>

**Grid布局**

> 父级添加class名grid

*  等分列

> 通过添加class名col-\{ \{options\}\}来实现栅格布局，options可以取值1、2、3、4、5

![等分列][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 3]

<view class="bg-white padding">
    
    <view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)">
    
    <view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'" v-for="(item,indexs) in (index+1)" :key="indexs">{
       {index+1}}</view>
    
    </view>
    
    </view>

*  等高

> 通过添加class名grid-square设置盒子内容等高，添加col-\{ \{options\}\}来设置分栏个数，options可以取值1、2、3、4、5，将盒子等分

![等高][20191108162002771.png]

<view class="bg-white padding">
    
    <view class="grid col-4 grid-square">
    
    <view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
    
    </view>
    
    </view>
    
    
    ----------------------------------------------------------------------------------------
    
    
    data() {
    
    return {
    
    avatar: ['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
    
    'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
    
    'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
    
    'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
    
    ],
    
    }
    
    },

**布局相关class**

<table> 
 <thead> 
  <tr> 
   <th>class</th> 
   <th>说明</th> 
   <th>可选值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex</td> 
   <td>flex布局必选值</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>basic-{ {options}}</td> 
   <td>设置分栏大小</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>flex-{ {options}}</td> 
   <td>以比例设置分栏大小</td> 
   <td>sub/twice/treble</td> 
  </tr> 
  <tr> 
   <td>justify-{ {options}}</td> 
   <td>水平对齐方式</td> 
   <td>start/end/center/between/around</td> 
  </tr> 
  <tr> 
   <td>align-{ {options}}</td> 
   <td>垂直对齐方式</td> 
   <td>start/end/center</td> 
  </tr> 
  <tr> 
   <td>grid</td> 
   <td>grid布局必选值</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>col-{ {options}}</td> 
   <td>栅格布局</td> 
   <td>1/2/3/4/5</td> 
  </tr> 
  <tr> 
   <td>grid-square</td> 
   <td>等高</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>fl</td> 
   <td>左浮</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>fr</td> 
   <td>右浮</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>margin-{ {options}}</td> 
   <td>外边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>padding-{ {options}}</td> 
   <td>内边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>margin-lr-{ {options}}</td> 
   <td>水平方向外边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>padding-lr-{ {options}}</td> 
   <td>水平方向内边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>margin-tb-{ {options}}</td> 
   <td>垂直方向外边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>padding-tb-{ {options}}</td> 
   <td>垂直方向内边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>margin-top-{ {options}}</td> 
   <td>上外边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>padding-top-{ {options}}</td> 
   <td>上内边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>margin-right-{ {options}}</td> 
   <td>右外边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>padding-right-{ {options}}</td> 
   <td>右内边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>margin-bottom-{ {options}}</td> 
   <td>下外边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>padding-bottom-{ {options}}</td> 
   <td>下内边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>margin-left-{ {options}}</td> 
   <td>左外边距</td> 
   <td>xs/sm/df/lg/xl</td> 
  </tr> 
  <tr> 
   <td>padding-left-{ {options}}</td> 
   <td>左内边距</td> 
   <td> <p>xs/sm/df/lg/xl</p> </td> 
  </tr> 
 </tbody> 
</table>

注：lr，left-right；tb，top-bottom；

### Background背景  ###

**颜色背景 **

*  深色

>  通过添加class名bg-\{ \{options\}\}设置背景

![深色背景][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 4]

<view class="grid col-3 padding-sm">
    
    <view class="padding-sm" v-for="(item,index) in ColorList" :key="index">
    
    <view class="padding radius text-center shadow-blur" :class="'bg-' + item.name">
    
    <view class="text-lg">{
       {item.title}}</view>
    
    <view class="margin-top-sm text-Abc">{
       {item.name}}</view>
    
    </view>
    
    </view>
    
    </view>

*  浅色

>  通过添加class名bg-\{ \{options\}\}设置背景颜色，添加class名light表示相应的浅色

![浅色背景][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 5]

<view class="grid col-3 bg-white padding-sm">
    
    <view class="padding-sm" v-for="(item,index) in ColorList" :key="index" v-if="index<12">
    
    <view class="padding radius text-center light" :class="'bg-' + item.name">
    
    <view class="text-lg">{
       {item.title}}</view>
    
    <view class="margin-top-sm text-Abc">{
       {item.name}}</view>
    
    </view>
    
    </view>
    
    </view>

*   渐变

> 通过添加class名bg-gradual-\{ \{options\}\}设置渐变背景颜色

![渐变背景][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 6]

** 图片背景**

*  透明背景（文字层）

> 通过bg-img设置图片背景，bg-mask设置透明遮罩层

![透明背景][20191111094642351.png]

<view class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
    
    <view class="padding-xl text-white">
    
    <view class="padding-xs text-xxl text-bold">
    
    钢铁之翼
    
    </view>
    
    <view class="padding-xs text-lg">
    
    Only the guilty need fear me.
    
    </view>
    
    </view>
    
    </view>

>  通过bg-shadeTop设置遮罩层上阴影，bg-shadeBottom设置遮罩层下阴影

** 背景相关class**

<table> 
 <thead> 
  <tr> 
   <th>class</th> 
   <th>说明</th> 
   <th>可选值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bg-{ {options}}</td> 
   <td>设置背景色</td> 
   <td> <p>red/orange/yellow/olive/green/cyan/blue/purple/mauve/pink/</p> <p>brown/grey/gray/black/white</p> </td> 
  </tr> 
  <tr> 
   <td>light</td> 
   <td>浅色背景，配合bg-{ {options}}使用，取值前12个</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>bg-gradual-{ {options}}</td> 
   <td>渐变色背景</td> 
   <td>red/orange/green/blue/purple/pink</td> 
  </tr> 
  <tr> 
   <td>bg-img</td> 
   <td>图片背景</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>bg-mask</td> 
   <td>遮罩层</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>bg-shadeTop</td> 
   <td>遮罩层上阴影</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>bg-shadeBottom</td> 
   <td>遮罩层下阴影</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>shadow-blur</td> 
   <td>外阴影</td> 
   <td>——</td> 
  </tr> 
 </tbody> 
</table>

### Text文字 ###

**文字大小**

> 通过添加class名text-\{ \{size\}\}设置文字大小，size取值xs、sm、df、lg、xl、xxl、sl、xsl

![1][]![2][]![20191111133559775.png][]

![4][]![5][]![6][]

![7][]

**文字颜色**

> 通过添加class名text-\{ \{color\}\}设置文字颜色，color取值red、orange、yellow、olive、green、cyan、blue、purple、mauve、brown、grey、gray、black、white

![文字颜色][20191111134530426.png]

<view class="grid col-5 padding-sm">
    
    <view class="padding-sm" v-for="(item,index) in ColorList" :key="index">
    
    <view class="text-center" :class="'text-' + item.name">
    
    {
       {item.title}}
    
    </view>
    
    </view>
    
    </view>

**文字阴影**

> 通过添加class名text-shadow设置文字阴影

![文字阴影][20191111134737509.png]

**文字截断**

> 通过添加class名text-cut设置文字长度溢出显示省略号

![文字截断][20191111134948425.png]

<view class="padding bg-white">
    
    <view class="text-cut padding bg-grey radius" style="width:220px">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
    
    </view>

**文字对齐 **

> 通过添加class名text-\{ \{position\}\}设置文字长度溢出显示省略号，position取值left、center、right

![文字对齐][20191111135201781.png]

<view class="padding bg-white">
    
    <view class="text-left padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
    
    <view class="text-center padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
    
    <view class="text-right padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
    
    </view>

**特殊文字**

> 通过添加class名text-price表示价格，会显示￥符号，text-Abc设置英文首字母大写，text-ABC设置英文大写，text-abc设置英文小写

![价格][20191111135548406.png]![首字母大写][20191111135609974.png]![大写][20191111135632717.png]![小写][20191111135646227.png]

<view class="padding text-center">
    
    <view class="padding-lr bg-white">
    
    <view class="solid-bottom padding">
    
    <text class="text-price">80.00</text>
    
    </view>
    
    <view class="padding">价格文本，利用伪元素添加"¥"符号</view>
    
    </view>
    
    <view class="padding-lr bg-white margin-top">
    
    <view class="solid-bottom padding">
    
    <text class="text-Abc">color Ui</text>
    
    </view>
    
    <view class="padding">英文单词首字母大写</view>
    
    </view>
    
    <view class="padding-lr bg-white margin-top">
    
    <view class="solid-bottom padding">
    
    <text class="text-ABC">color Ui</text>
    
    </view>
    
    <view class="padding">全部字母大写</view>
    
    </view>
    
    <view class="padding-lr bg-white margin-top">
    
    <view class="solid-bottom padding">
    
    <text class="text-abc">color Ui</text>
    
    </view>
    
    <view class="padding">全部字母小写</view>
    
    </view>
    
    </view>

**文字相关class**

<table> 
 <thead> 
  <tr> 
   <th>class</th> 
   <th>说明</th> 
   <th> <p>可选值</p> </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text-{ {size}}</td> 
   <td>文字大小</td> 
   <td>xs(20upx)/sm(24upx)/df(28upx)/lg(32upx)/xl(36upx)/xxl(44upx)/sl(80upx)/xsl(120upx)</td> 
  </tr> 
  <tr> 
   <td>text-{ {color}}</td> 
   <td>文字颜色</td> 
   <td>red/orange/yellow/olive/green/cyan/blue/purple/mauve/brown/grey/gray/black/white</td> 
  </tr> 
  <tr> 
   <td>text-shadow</td> 
   <td>文字阴影</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>text-cut</td> 
   <td>文字截断</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>text-bold</td> 
   <td>文字加粗</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>text-{ {position}}</td> 
   <td>文字对齐</td> 
   <td>left/center/right</td> 
  </tr> 
  <tr> 
   <td>text-price</td> 
   <td>带￥符号</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>text-Abc</td> 
   <td>首字母大写</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>text-ABC</td> 
   <td>全部大写</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>text-abc</td> 
   <td>全部小写</td> 
   <td>——</td> 
  </tr> 
 </tbody> 
</table>

### Icon图标 ###

> 通过添加class名cuIcon-\{ \{iconName\}\}，直接设置图标

![1][1 1]![2][2 1]![3][]![4][4 1]![5][5 1]![6][6 1]![7][7 1]![8][]![9][]![10][]![11][]![12][]![13][]![14][]![15][]

### Button按钮 ###

> 按钮必选class cu-btn

**按钮形状**

> 通过添加class名设置按钮不同形状，默认只需要添加cu-btn，round为圆角，cuIcon为圆形用来包裹图标

![按钮大小][20191111165212978.png]

**按钮尺寸**

> sm小尺寸，lg大尺寸

![按钮尺寸][20191111165433741.png]

**按钮颜色 **

> 添加背景class名就可以，用法参考背景组件的介绍

![按钮颜色][20191111165859113.png]

<view class="grid col-5 padding-sm">
    
    <view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index">
    
    <button class="cu-btn round" :class="'bg-' + item.name ">{
       {item.title}}</button>
    
    </view>
    
    </view>

**幽灵按钮**

> 通过line-\{ \{color\}\}或者lines-\{ \{color\}\}设置镂空的幽灵按钮

![youling][]

<view class="grid col-5 padding-sm">
    
    <view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='white'">
    
    <button class="cu-btn round" :class="'line-' + item.name">{
       {item.title}}</button>
    
    </view>
    
    </view>

**禁用按钮**

> 添加disabled禁用按钮

![禁用按钮][20191113095716624.png]

** 自定义图标按钮**

> 可以直接在button标签class内添加图标名，或者在text等其他标签内添加class，其他标签要包裹在button标签内

![图标按钮][20191113095733628.png]

**按钮相关class**

<table> 
 <thead> 
  <tr> 
   <th>class</th> 
   <th>说明</th> 
   <th>可选值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cu-btn</td> 
   <td>按钮必选值</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>round</td> 
   <td>圆角按钮</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>cuIcon</td> 
   <td>圆形</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>sm</td> 
   <td>小尺寸按钮</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>lg</td> 
   <td>大尺寸按钮</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>line-{ {color}}</td> 
   <td>幽灵按钮，细边框</td> 
   <td>参考背景色</td> 
  </tr> 
  <tr> 
   <td>lines-{ {color}}</td> 
   <td>幽灵按钮，粗边框</td> 
   <td>参考背景色</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>禁用</td> 
   <td>——</td> 
  </tr> 
 </tbody> 
</table>

### Tag标签 ###

> 标签必选class cu-tag

**标签形状**

> 通过添加class名设置标签不同形状，默认只需要添加cu-tag，round为椭圆，radius为圆角

![标签形状][20191113105209689.png]

**标签尺寸**

> sm小尺寸

![标签尺寸][20191113110743846.png]

**标签颜色**

> 添加背景class名就可以，用法参考背景组件的介绍

![标签颜色][20191113111823368.png]

<view class='padding-sm flex flex-wrap'>
    
    <view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='gray'">
    
    <view class='cu-tag' :class="'bg-' + item.name">{
       {item.title}}</view>
    
    </view>
    
    <view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='gray' && item.name!='black' && item.name!='white'">
    
    <view class='cu-tag light' :class="'bg-' + item.name">{
       {item.title}}</view>
    
    </view>
    
    </view>

**幽灵标签**

> 通过line-\{ \{color\}\}设置镂空的幽灵按钮

![幽灵标签][20191113111934479.png]

<view class='padding-sm flex flex-wrap'>
    
    <view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='white'">
    
    <view class='cu-tag' :class="'line-' + item.name">{
       {item.title}}</view>
    
    </view>
    
    </view>

**胶囊样式**

> 通过cu-capsule设置为胶囊样式，内部设置自己想要的样式

![胶囊样式][20191113113252320.png]

**数字标签**

>  通过badge设置角标

![数字标签][2019111311364981.png]

**标签相关class**

<table> 
 <thead> 
  <tr> 
   <th>class</th> 
   <th>说明</th> 
   <th>可选值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cu-tag</td> 
   <td>标签必选值</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>round</td> 
   <td>椭圆</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>radius</td> 
   <td>圆角</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>sm</td> 
   <td>小尺寸标签</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>line-{ {color}}</td> 
   <td>幽灵标签</td> 
   <td>参考背景色</td> 
  </tr> 
  <tr> 
   <td>cu-capsule</td> 
   <td>胶囊标签</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>badge</td> 
   <td>数字角标</td> 
   <td>——</td> 
  </tr> 
 </tbody> 
</table>

### Avatar头像 ###

> 头像必选class cu-avatar

**头像形状**

> 通过round和radius设置头像形状

![头像形状][20191113165047125.png]

**头像尺寸**

> 通过sm 、lg、xl设置不同大小的头像

![头像尺寸][20191113165147527.png]

**内嵌文字**

> 头像内部不仅仅是图片，也可以是自定义文字和图标等

![内嵌文字][20191113165402123.png]

**头像颜色**

> 设置背景色即可

![头像颜色][20191113165654604.png]

** 头像组**

> 设置了cu-avatar外部的盒子添加cu-avatar-group的class

![头像组][20191113165955393.png]

**头像标签**

> 在头像标签内部添加数字标签的角标即可

![头像标签][20191113170127235.png]

**头像相关class**

<table> 
 <thead> 
  <tr> 
   <th>class</th> 
   <th>说明</th> 
   <th>可选值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cu-avatar</td> 
   <td>头像必选值</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>cu-avatar-group</td> 
   <td>头像组，包裹cu-avatar</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>round</td> 
   <td>圆形</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>radius</td> 
   <td>圆角</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>sm</td> 
   <td>小尺寸头像</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>lg</td> 
   <td>大尺寸头像</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>xl</td> 
   <td>超大尺寸头像</td> 
   <td>——</td> 
  </tr> 
 </tbody> 
</table>

### Progress进度条  ###

> 进度条必须值为cu-progress

**进度条形状**

> 进度条默认为方形，radius为圆角，round为圆形；代码中loading只是一个变量，初始值为false，页面初始化时赋值为true，即给进度条赋值，使进度条有一个动画效果。

![进度条形状][20191114145356523.png]

**进度条尺寸**

> sm为小尺寸，xs为超小尺寸

![进度条尺寸][20191114145626765.png]

** 进度条颜色**

> 添加背景色即可

![进度条颜色][20191114152225684.png]

**进度条条纹**

> 添加striped设置条纹样式，active设置条纹动态效果

![进度条条纹][20191114155705759.png]

**进度条比例**

> 在给定class为cu-progress的标签内按需放置元素并进行分段设计即可

![进度条比例][20191114160101242.png]

**进度条布局**

> 结合布局、图标等内容，可根据个人所需可以设置不同进度显示的样式

![进度条布局][20191114160359906.png]

** 进度条相关class**

<table> 
 <thead> 
  <tr> 
   <th>class</th> 
   <th>说明</th> 
   <th>可选值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cu-progress</td> 
   <td>进度条必选值</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>radius</td> 
   <td>圆角</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>round&nbsp;</td> 
   <td>圆形</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>sm</td> 
   <td>小尺寸</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>xs</td> 
   <td>超小尺寸</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>striped</td> 
   <td>条纹</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>active&nbsp;</td> 
   <td>结合striped使用，设置动态条纹效果</td> 
   <td>——</td> 
  </tr> 
 </tbody> 
</table>

### Border&Shadow边框阴影  ###

> 默认shadow是根据背景色设置的阴影，shadow-lg为长阴影，但是我肉眼没看出来二者的区别，真是在下愚钝，shadow-warp为翘边阴影（在下愚钝，它翘一点？？？），shadow-blur根据背景图片设置的阴影，有点意思，挺好。关于边框border没什么好展开的，直接看下面表格class说明就好。

![阴影1][1 2]![阴影2][2 2]

<view class="padding text-center">
    
    <view class="padding-xl radius shadow bg-white">默认阴影</view>
    
    <view class="padding-xl radius shadow bg-gradual-red margin-top">根据背景颜色而改变的阴影</view>
    
    <view class="padding-xl radius shadow shadow-lg bg-white margin-top">长阴影</view>
    
    <view class="padding-xl radius shadow shadow-lg bg-blue margin-top">长阴影</view>
    
    <view class="padding-xl radius shadow-warp bg-white margin-top">翘边阴影</view>
    
    <view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
    
    <view>根据背景图而改变的阴影</view>
    
    </view>
    
    </view>

** 边框阴影相关class**

<table> 
 <thead> 
  <tr> 
   <th>class</th> 
   <th>说明</th> 
   <th>可选值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>solid/solids</td> 
   <td>实线四周边框，solid为细边框 ，solids为粗边框</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>solid/solids-{ {options}}</td> 
   <td>不同方向的边框(上下左右)</td> 
   <td>top/right/bottom/left</td> 
  </tr> 
  <tr> 
   <td>shadow</td> 
   <td>默认阴影（根据背景色变化）</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>shadow-lg</td> 
   <td>长阴影</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>shadow-wrap</td> 
   <td>翘边阴影</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>shadow-blur</td> 
   <td>根据背景图片变化的阴影</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### Loading加载 ###

> 加载必选值cu-load

**加载状态**

> loading正在加载中，over加载完成，erro加载失败

![加载中][20191114165750120.png]

![加载完成][20191114165807766.png]

![加载失败][20191114165846401.png]

**弹框加载**

> 设置按钮，弹出弹框，显示加载状态，弹框模板设置load-modal

![弹框加载][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 7]

<view class="cu-bar bg-white margin-top">
    
    <view class="action">
    
    <text class="cuIcon-title text-blue"></text>弹框加载
    
    </view>
    
    <view class="action">
    
    <button class="cu-btn bg-green shadow" @tap="LoadModal">
    
    点我
    
    </button>
    
    </view>
    
    </view>
    
    <view class="cu-load load-modal" v-if="loadModal">
    
    <image src="/static/logo.png" mode="aspectFit"></image>
    
    <view class="gray-text">加载中...</view>
    
    </view>
    
    
    
    <script>
    
    export default {
    
    data() {
    
    return {
    
    loadModal: false
    
    };
    
    },
    
    methods: {
    
    LoadModal(e) {
    
    this.loadModal = true;
    
    setTimeout(() => {
    
    this.loadModal = false;
    
    }, 2000)
    
    }
    
    }
    
    }
    
    </script>

** 进度条加载**

> 设置进度条加载时需要添加load-progress，变量loadProgress为加载进度条的进度，load-progress-bar代表加载中进度条样式，load-progress-spinner代表加载中旋转的圆圈样式

![进度条加载][20191115101626286.png]

<view class="action">
    
    <button class="cu-btn bg-green shadow" @tap="LoadProgress">
    
    点我
    
    </button>
    
    </view>
    
    <view class="load-progress" :class="loadProgress!=0?'show':'hide'" style="top:100px">
    
    <view class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
    
    <view class="load-progress-spinner text-green"></view>
    
    </view>
    
    
    <script>
    
    export default{
    
    data(){
    
    return{
    
    loadProgress:0
    
    }
    
    },
    
    methods:{
    
    LoadProgress(e) {
    
    this.loadProgress = this.loadProgress + 3;
    
    if (this.loadProgress < 100) {
    
    setTimeout(() => {
    
    this.LoadProgress();
    
    }, 100)
    
    } else {
    
    this.loadProgress = 0;
    
    }
    
    }
    
    }
    
    }
    
    </script>

**加载相关class**

<table> 
 <thead> 
  <tr> 
   <th>class</th> 
   <th>说明</th> 
   <th>可选值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cu-load</td> 
   <td>加载必选值（除了进度条加载）</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td>加载中</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>over</td> 
   <td>加载完成</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>erro</td> 
   <td>加载失败</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>load-modal</td> 
   <td>弹框加载</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>load-progress</td> 
   <td>设置进度条加载</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>load-progress-bar</td> 
   <td>进度条加载样式</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>load-progress-spinner</td> 
   <td>旋转加载样式</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>hide</td> 
   <td>隐藏</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>show</td> 
   <td>显示</td> 
   <td>——</td> 
  </tr> 
 </tbody> 
</table>

## 交互组件 ##

这篇博客太长了，交互组件的介绍就另写一篇吧，[ColorUI组件库简易教程之交互组件][ColorUI]

这只是个人的理解写的，有什么不足，望大佬指教，及时更正！

[Link 1]: https://github.com/weilanwl/ColorUI
[Link 2]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E5%89%8D%E8%A8%80
[Link 3]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B
[UniApp]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E4%BD%BF%E7%94%A8UniApp%E5%BC%80%E5%8F%91
[Link 4]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E5%BC%80%E5%A7%8B
[Link 5]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%BC%E8%88%AA%E6%A0%8F
[Link 6]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9F%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91
[Link 7]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E4%BB%8E%E7%8E%B0%E6%9C%89%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%A7%8B
[Link 8]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E4%BB%8E%E6%96%B0%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%A7%8B
[Link 9]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E7%BB%84%E4%BB%B6
[Link 10]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E5%9F%BA%E7%A1%80%E5%85%83%E7%B4%A0
[layout]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#layout%E5%B8%83%E5%B1%80
[Background]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E8%83%8C%E6%99%AF%C2%A0
[Text]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%C2%A0%E6%96%87%E5%AD%97
[Icon]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#ICON%E5%9B%BE%E6%A0%87
[Button]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#Button%E6%8C%89%E9%92%AE
[Tag]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%C2%A0Tag%E6%A0%87%E7%AD%BE
[Avatar]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%C2%A0Avatar%E5%A4%B4%E5%83%8F
[Progress]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#Progress%E8%BF%9B%E5%BA%A6%E6%9D%A1%C2%A0
[Border_Shadow]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#Border%26Shadow%E8%BE%B9%E6%A1%86%E9%98%B4%E5%BD%B1%C2%A0
[Loading]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#Loading%E5%8A%A0%E8%BD%BD
[Link 11]: https://blog.csdn.net/miao_yf/article/details/102971767?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param#%E4%BA%A4%E4%BA%92%E7%BB%84%E4%BB%B6
[colorUI]: /images/20221124/876096b5d1734d8ba71f1823652d494d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70]: /images/20221124/c23769719aeb42d38a972d45f3569d57.png
[20191108160308488.png]: /images/20221124/554a6e44200b46929954ab7e2f59ef7a.png
[Flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool%29
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 1]: /images/20221124/f1334a03bcfe42888688d7f5d93000f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 2]: /images/20221124/1c89905ba5d142aaab7ca97b679a4e41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 3]: /images/20221124/aabc3da0bd474adfac8e2aedadcc2591.png
[20191108162002771.png]: /images/20221124/32cec07e440f4e75a36fc625646fe8ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 4]: /images/20221124/c6ffbc249df64c72bfe088398e029915.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 5]: /images/20221124/b4180ad298394e6c9e868c2eb9eb59a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 6]: /images/20221124/219cba36117541e2b36ead60635bad9f.png
[20191111094642351.png]: /images/20221124/be17140dda4d40859f87e01615f914d7.png
[1]: https://img-blog.csdnimg.cn/2019111113350672.png
[2]: https://img-blog.csdnimg.cn/20191111133527559.png
[20191111133559775.png]: /images/20221124/e6b7a26eaa57462ab3650e87d7c5fcf8.png
[4]: https://img-blog.csdnimg.cn/20191111133648383.png
[5]: https://img-blog.csdnimg.cn/20191111133703940.png
[6]: /images/20221124/9fbc76d225724a3085f035afc941fe97.png
[7]: /images/20221124/66e594a5729046f5b58aae923624025d.png
[20191111134530426.png]: /images/20221124/87bf595ae88a4653bb0247227f2b6301.png
[20191111134737509.png]: /images/20221124/19e928c3231745d2936a3a61c6dfc70e.png
[20191111134948425.png]: /images/20221124/2766e417ef01422d96b7205db7d16903.png
[20191111135201781.png]: /images/20221124/c52cb88235eb4635b2680bacf9a8144b.png
[20191111135548406.png]: https://img-blog.csdnimg.cn/20191111135548406.png
[20191111135609974.png]: https://img-blog.csdnimg.cn/20191111135609974.png
[20191111135632717.png]: https://img-blog.csdnimg.cn/20191111135632717.png
[20191111135646227.png]: /images/20221124/d559506f709e4e15828defd120c39c67.png
[1 1]: https://img-blog.csdnimg.cn/20191111141543306.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[2 1]: https://img-blog.csdnimg.cn/20191111141622936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[3]: https://img-blog.csdnimg.cn/20191111141647695.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[4 1]: https://img-blog.csdnimg.cn/20191111141704933.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[5 1]: https://img-blog.csdnimg.cn/20191111141716215.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[6 1]: https://img-blog.csdnimg.cn/20191111141728688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[7 1]: https://img-blog.csdnimg.cn/20191111141739263.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[8]: https://img-blog.csdnimg.cn/20191111141748739.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[9]: https://img-blog.csdnimg.cn/20191111141806229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[10]: https://img-blog.csdnimg.cn/20191111141816359.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[11]: https://img-blog.csdnimg.cn/20191111141832215.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[12]: https://img-blog.csdnimg.cn/20191111141842653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[13]: https://img-blog.csdnimg.cn/20191111141853726.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[14]: https://img-blog.csdnimg.cn/20191111141903501.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[15]: /images/20221124/b833f88197f54813ba848896851c6a3f.png
[20191111165212978.png]: /images/20221124/ee245045cde34e46a8f7ad8d61b691b7.png
[20191111165433741.png]: /images/20221124/b4718336dedc4ec6a60980f5bc421b4b.png
[20191111165859113.png]: /images/20221124/9623fa6433a2408f9883eb4de40718b3.png
[youling]: /images/20221124/ad57c948075f405684e17ef626816778.png
[20191113095716624.png]: /images/20221124/48c4efcfeafa465d83af46e32a49adb1.png
[20191113095733628.png]: /images/20221124/54652dfb77bd48ceb5c0c4cebb3053f9.png
[20191113105209689.png]: /images/20221124/03ee6c75123d48e6b3ad21961de29a34.png
[20191113110743846.png]: /images/20221124/8f9c78d4089b4695aef2b8ae16580509.png
[20191113111823368.png]: /images/20221124/3f93297ee04d4288949fd442cdff0099.png
[20191113111934479.png]: /images/20221124/f8639c2e8d8a45a0a98506e2b25a643f.png
[20191113113252320.png]: /images/20221124/1797acbd5212452ba79b12a6e8ae74a5.png
[2019111311364981.png]: /images/20221124/82ac894dece443beaef3d34f90bc857c.png
[20191113165047125.png]: /images/20221124/1b62e5d8fdbd478aa0805e3b49ae233c.png
[20191113165147527.png]: /images/20221124/3f34471b0d3f469fbda94637078408bf.png
[20191113165402123.png]: /images/20221124/0e613f6722e34332b4944e4bedcfcfe7.png
[20191113165654604.png]: /images/20221124/372be7b638ad401fa848f8143b087398.png
[20191113165955393.png]: /images/20221124/db6f1bf7d1294ed994b223c9210ca23e.png
[20191113170127235.png]: /images/20221124/6cde14095400493abd92227cc1b8ddc2.png
[20191114145356523.png]: /images/20221124/ec51ca8171cd4c8cbf4446a5457a53a8.png
[20191114145626765.png]: /images/20221124/b3ad075d23cd46018457442ddd160611.png
[20191114152225684.png]: /images/20221124/946c5058278c48c791291b3c304c9bb6.png
[20191114155705759.png]: /images/20221124/c8d8b18544b24e30abe42b0afad46d2c.png
[20191114160101242.png]: /images/20221124/f462ab606fa845bb842c37dc8fb34dfc.png
[20191114160359906.png]: /images/20221124/cfc2bbe3a24641d788d747542c8ea4b2.png
[1 2]: https://img-blog.csdnimg.cn/20191114162957890.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY=,size_16,color_FFFFFF,t_70
[2 2]: /images/20221124/2611923a696443a79782059fe8da490b.png
[20191114165750120.png]: /images/20221124/57271113cdb04d2c8a0258da1a40f89f.png
[20191114165807766.png]: /images/20221124/7a44b7a5482a456cb96c2729fb4f7011.png
[20191114165846401.png]: /images/20221124/10bdfbc9cd7a4c50852467f9a526f369.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pYW9feWY_size_16_color_FFFFFF_t_70 7]: /images/20221124/4b0ce47b4d8849c59b4ed9ec7219f40c.png
[20191115101626286.png]: /images/20221124/4af78cbd62e543dd94468a62f0686c26.png
[ColorUI]: https://blog.csdn.net/miao_yf/article/details/103081988