一、版本："element-ui": "2.4.11"

   1.原本的样式

2.需要實現類似編輯工具欄的樣式

3. 修改方法为覆盖element-ui的原本样式，代码如下

<template>
  <div class="dashboard-container">

    <div class="color-picker font-color-picker" >
      <el-color-picker v-model="color" ></el-color-picker>
    </div>
    <div class="color-picker back-color-picker">
      <el-color-picker v-model="color"></el-color-picker>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: { },
  data() {
    return {
      color:'#181515'
    }
  },

  computed: {
    ...mapGetters([
    ])
  },
  created() {

  }
}
</script>
<style lang="scss">
  .color-picker{
      .el-color-picker__icon {
        display: none !important;
      }

      .el-icon-arrow-down {
        display: none !important;
      }
      .el-color-picker__color-inner {
        position: relative !important;
        height: 20% !important;
        bottom: 0px;
        display: block !important;
      }
  }
  .font-color-picker{
    .el-color-picker__color::before {
      content: 'A';
      color: #181515;
      font-size: 17px;
    }
  }
  .back-color-picker{
    .el-color-picker__color::before {
      display: block;
      height: 80%;
      content: '';
      background-image: url('../../assets/beijingyanse.svg');
      background-size: 100% 100%;
    }
  }
</style>

ColorUI 简易 使用文档

• 友情链接
• 文本大小
• 颜色
• 图片
• 头像
• 边距
• 辅助样式
• 阴影
• 布局
• 列表

友情链接

ColorUI使用文档

看云： https://www.kancloud.cn/als24/color/1141392

ColorUI H5

H5： http://demo.color-ui.com/h5.html#/

参考文章链接

简书： https://www.jianshu.com/p/450527d7239a#comments

文本大小

/* 大小 */
.text-xs{font-size:20upx}
.text-sm{font-size:24upx}
.text-df{font-size:28upx}
.text-lg{font-size:32upx}
.text-xl{font-size:36upx}
.text-xxl{font-size:44upx}
.text-sl{font-size:80upx}
.text-xsl{font-size:120upx}

/* 特殊 */
.text-Abc{text-transform:Capitalize}
.text-ABC{text-transform:Uppercase}
.text-abc{text-transform:Lowercase}
.text-price::before{content:"¥";font-size:80%;margin-right:4upx}
.text-cut{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.text-bold{font-weight:700}
.text-center{text-align:center}
.text-content{line-height:1.6}
.text-left{text-align:left}
.text-right{text-align:right}

颜色

文字颜色

.line-red,.lines-red,.text-red{color:#e54d42}
.line-orange,.lines-orange,.text-orange{color:#f37b1d}
.line-yellow,.lines-yellow,.text-yellow{color:#fbbd08}
.line-olive,.lines-olive,.text-olive{color:#8dc63f}
.line-green,.lines-green,.text-green{color:#39b54a}
.line-cyan,.lines-cyan,.text-cyan{color:#1cbbb4}
.line-blue,.lines-blue,.text-blue{color:#0081ff}
.line-purple,.lines-purple,.text-purple{color:#6739b6}
.line-mauve,.lines-mauve,.text-mauve{color:#9c26b0}
.line-pink,.lines-pink,.text-pink{color:#e03997}
.line-brown,.lines-brown,.text-brown{color:#a5673f}
.line-grey,.lines-grey,.text-grey{color:#8799a3}
.line-gray,.lines-gray,.text-gray{color:#aaa}
.line-black,.lines-black,.text-black{color:#333}
.line-white,.lines-white,.text-white{color:#fff}

背景颜色

.bg-red{background-color:#e54d42;color:#fff}
.bg-orange{background-color:#f37b1d;color:#fff}
.bg-yellow{background-color:#fbbd08;color:#333}
.bg-olive{background-color:#8dc63f;color:#fff}
.bg-green{background-color:#39b54a;color:#fff}
.bg-cyan{background-color:#1cbbb4;color:#fff}
.bg-blue{background-color:#0081ff;color:#fff}
.bg-purple{background-color:#6739b6;color:#fff}
.bg-mauve{background-color:#9c26b0;color:#fff}
.bg-pink{background-color:#e03997;color:#fff}
.bg-brown{background-color:#a5673f;color:#fff}
.bg-grey{background-color:#8799a3;color:#fff}
.bg-gray{background-color:#f0f0f0;color:#333}
.bg-black{background-color:#333;color:#fff}
.bg-white{background-color:#fff;color:#666}

.light{}

.bg-gradual-red{background-image:linear-gradient(45deg,#f43f3b,#ec008c);color:#fff}
.bg-gradual-orange{background-image:linear-gradient(45deg,#ff9700,#ed1c24);color:#fff}
.bg-gradual-green{background-image:linear-gradient(45deg,#39b54a,#8dc63f);color:#fff}
.bg-gradual-purple{background-image:linear-gradient(45deg,#9000ff,#5e00ff);color:#fff}
.bg-gradual-pink{background-image:linear-gradient(45deg,#ec008c,#6739b6);color:#fff}
.bg-gradual-blue{background-image:linear-gradient(45deg,#0081ff,#1cbbb4);color:#fff}

图片

<view class="bg-img bg-mask" style="background-image: url('')">
  遮罩
</view>

<view class="bg-img" style="background-image: url('')">
  透明
</view>

<view class="bg-img" style="background-image: url()"></view>
<view class="bg-img" :style="'background-image: url(' + i.img + ')'"></view>

头像

<view class="cu-avatar"></view>

<view class="cu-avatar">文字图标</view>

<view class="cu-avatar"><text>图标</text></view>

<view class="cu-avatar" style="background-image: url()"></view>
<view class="cu-avatar" :style="'background-image: url(' + i.img + ')'"></view>

<!-- 其他 -->

边距

margin

.margin-0{margin:0}
.margin-xs{margin:10upx}
.margin-sm{margin:20upx}
.margin{margin:30upx}
.margin-lg{margin:40upx}
.margin-xl{margin:50upx}
.margin-top-xs{margin-top:10upx}
.margin-top-sm{margin-top:20upx}
.margin-top{margin-top:30upx}
.margin-top-lg{margin-top:40upx}
.margin-top-xl{margin-top:50upx}
.margin-right-xs{margin-right:10upx}
.margin-right-sm{margin-right:20upx}
.margin-right{margin-right:30upx}
.margin-right-lg{margin-right:40upx}
.margin-right-xl{margin-right:50upx}
.margin-bottom-xs{margin-bottom:10upx}
.margin-bottom-sm{margin-bottom:20upx}
.margin-bottom{margin-bottom:30upx}
.margin-bottom-lg{margin-bottom:40upx}
.margin-bottom-xl{margin-bottom:50upx}
.margin-left-xs{margin-left:10upx}
.margin-left-sm{margin-left:20upx}
.margin-left{margin-left:30upx}
.margin-left-lg{margin-left:40upx}
.margin-left-xl{margin-left:50upx}
.margin-lr-xs{margin-left:10upx;margin-right:10upx}
.margin-lr-sm{margin-left:20upx;margin-right:20upx}
.margin-lr{margin-left:30upx;margin-right:30upx}
.margin-lr-lg{margin-left:40upx;margin-right:40upx}
.margin-lr-xl{margin-left:50upx;margin-right:50upx}
.margin-tb-xs{margin-top:10upx;margin-bottom:10upx}
.margin-tb-sm{margin-top:20upx;margin-bottom:20upx}
.margin-tb{margin-top:30upx;margin-bottom:30upx}
.margin-tb-lg{margin-top:40upx;margin-bottom:40upx}
.margin-tb-xl{margin-top:50upx;margin-bottom:50upx}

padding

.padding-0{padding:0}
.padding-xs{padding:10upx}
.padding-sm{padding:20upx}
.padding{padding:30upx}
.padding-lg{padding:40upx}
.padding-xl{padding:50upx}
.padding-top-xs{padding-top:10upx}
.padding-top-sm{padding-top:20upx}
.padding-top{padding-top:30upx}
.padding-top-lg{padding-top:40upx}
.padding-top-xl{padding-top:50upx}
.padding-right-xs{padding-right:10upx}
.padding-right-sm{padding-right:20upx}
.padding-right{padding-right:30upx}
.padding-right-lg{padding-right:40upx}
.padding-right-xl{padding-right:50upx}
.padding-bottom-xs{padding-bottom:10upx}
.padding-bottom-sm{padding-bottom:20upx}
.padding-bottom{padding-bottom:30upx}
.padding-bottom-lg{padding-bottom:40upx}
.padding-bottom-xl{padding-bottom:50upx}
.padding-left-xs{padding-left:10upx}
.padding-left-sm{padding-left:20upx}
.padding-left{padding-left:30upx}
.padding-left-lg{padding-left:40upx}
.padding-left-xl{padding-left:50upx}
.padding-lr-xs{padding-left:10upx;padding-right:10upx}
.padding-lr-sm{padding-left:20upx;padding-right:20upx}
.padding-lr{padding-left:30upx;padding-right:30upx}
.padding-lr-lg{padding-left:40upx;padding-right:40upx}
.padding-lr-xl{padding-left:50upx;padding-right:50upx}
.padding-tb-xs{padding-top:10upx;padding-bottom:10upx}
.padding-tb-sm{padding-top:20upx;padding-bottom:20upx}
.padding-tb{padding-top:30upx;padding-bottom:30upx}
.padding-tb-lg{padding-top:40upx;padding-bottom:40upx}
.padding-tb-xl{padding-top:50upx;padding-bottom:50upx}

辅助样式

实线

.solid,

.solid-top,

.solid-right,

.solid-bottom,

.solid-left

虚线

。dashed

阴影

翘边阴影：shadow-warp
长阴影： shadow-blur

布局

flex

.flex{display:flex}

/* 对齐 */
.justify-start{justify-content:flex-start}
.justify-end{justify-content:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.align-start{align-items:flex-start}
.align-end{align-items:flex-end}
.align-center{align-items:center}
.align-stretch{align-items:stretch}

/* 其他 */
.flex-direction{flex-direction:column}
.flex-wrap{flex-wrap:wrap}

/* 固定尺寸 */
.basis-xs{flex-basis:20%}
.basis-sm{flex-basis:40%}
.basis-df{flex-basis:50%}
.basis-lg{flex-basis:60%}
.basis-xl{flex-basis:80%}

/* 比例分布*/
.flex-sub{flex:1}
.flex-twice{flex:2}
.flex-treble{flex:3}

/* 自对齐 */
.self-start{align-self:flex-start}
.self-center{align-self:flex-center}
.self-end{align-self:flex-end}
.self-stretch{align-self:stretch}
.align-stretch{align-items:stretch}

grid

<view class="grid col-2">
    <view>等分</view>
  <view></view>
</view>

<view class="grid col-2 grid-square">
    <view>等高</view>
  <view></view>
</view>

列表

<view class="cu-list menu">
  <view class="cu-item">
    <view class="content">
      <text class="cuIcon-circlefill text-grey"></text>
      <text class="text-grey">图标 + 标题</text>
    </view>
  </view>
  
  <view class="cu-item">
    <view class="content">
      <image src="/static/logo.png" class="png" mode="aspectFit"></image>
      <text class="text-grey">图片 + 标题</text>
    </view>
  </view>
  
  <view class="cu-item">
    <button class="cu-btn content" open-type="contact">
      <text class="cuIcon-btn text-olive"></text>
      <text class="text-grey">Open-type 按钮</text>
    </button>
  </view>
  
  <view class="cu-item">
    <navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
      <text class="cuIcon-discoverfill text-orange"></text>
      <text class="text-grey">Navigator 跳转</text>
    </navigator>
  </view>
  
  <view class="cu-item">
    <view class="content">
      <text class="cuIcon-warn text-green"></text>
      <text class="text-grey">文本</text>
    </view>
    <view class="action">
      <text class="text-grey text-sm">小目标还没有实现！</text>
    </view>
  </view>
</view>

目录

使用方法

1.下载的colorUI源码后，里面有这些文件夹

2.运行demo文件夹，查看各组件效果

3.template文件夹（colorUI空项目文件介绍）

 注意：colorUI的app.json文件和原生的微信小程序的app.json有所不同了​

 自定义顶部导航栏

自定义tabBar

原生tabBar与自定义tabBar效果演示

之前记录了weUI组件库的基础使用，现在用一下更加【漂酿】的colorUI，weUI组件库的博客在这里：微信小程序-weUI组件库_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120673884

相较于weUI和原生微信小程序 样式的统一，colorUI更注重于【个性】，它的样式很动感，blingbling的，比较适合做一些活泼的活动小程序.而且，colorUI能兼容uniapp、微信小程序，还能用uniapp发布h5版本，兼容效果非常好。

        相较于weUI的使用上，colorUI会更复杂些，准确的说，是更繁琐一些，毕竟是大佬一个人肝出来的，而且对组件的样式、封装做了很强的兼容性处理，所以使用上没有weUI那种有团队做的简易，而且目前colorUI的文档，没有完成，只针对部分内容做了介绍，所以需要大家下载源码自行摸索（其实封装的挺易懂的~）

        就算你觉得麻烦不想用，也完全可以留下colorUI的wxss样式文件，肯定在其他项目中能用到，cv大法好呀~

        那么前言就介绍到这里，接下来会对colorUI的使用进行介绍。

colorUI在线效果演示：（用uniapp发布的h5）

ColorUI组件库 (color-ui.com)https://demo.color-ui.com/colorUI仓库镜像地址：

mirrors / weilanwl / colorui · CODE CHINA (csdn.net)https://codechina.csdn.net/mirrors/weilanwl/colorui?utm_source=csdn_github_acceleratorcolorUI资源网站：

ColorUI群资源 · 语雀 (yuque.com)https://www.yuque.com/colorui 一些针对colorUI组件介绍的博客：（比官方文档详细w(ﾟДﾟ)w）

小程序与colorUI实战总结_steve1988717的博客-CSDN博客使用colorUI，首先在app.wxss引入这两个文件@import "colorui/main.wxss";@import "colorui/icon.wxss";想实现下面的tabbar的效果，可以按着下面的步骤来写<view class="cu-bar tabbar bg-white"> <view data-num="1" class="acti...https://blog.csdn.net/steve1988717/article/details/96099036小程序ColorUI使用简易教程_仗剑东游的猫-CSDN博客_colorui本教程配合官方示例食用更佳！！！目录前言快速上手使用UniApp开发开始使用自定义导航栏使用原生小程序开发从现有项目开始从新项目开始使用自定义导航栏组件基础元素layout布局Background背景Text文字Icon图标Button按钮Tag标签Avatar头像Progress进度条Border&S...https://blog.csdn.net/miao_yf/article/details/102971767

使用方法

1.下载的colorUI源码后，里面有这些文件夹

2.运行demo文件夹，查看各组件效果

你可以参考效果，找到对应的代码，复制到自己的项目里去使用

当然，开着这个项目找不太方便，现在就要用到上面的地址链接了ColorUI组件库效果演示H5，这样方便开发。

3.template文件夹（colorUI空项目文件介绍）

template文件夹里就是最基础的微信小程序内容，只不过放好了colorUI组件库的文件

【cu-custom】组件中，还有 colorUI的navigation（顶上的导航栏），详细介绍看下方【自定义顶部导航栏】

而且，在app.wxss（全局样式）文件中也引入好了colorUI的样式文件

 注意：colorUI的app.json文件和原生的微信小程序的app.json有所不同了

 colorUI空文件中的app.json文件，【使用顶部导航栏cu-custom组件】,替换默认的顶部导航栏效果，同时，里面舍弃了tabBar配置，博客后面会介绍tabBar在index文件中的配置，详情请看【自定义tabBar】。

•  自定义顶部导航栏

colorUI空文件中，app.json文件中，有一行"navigationStyle": "custom" 是原生小程序没有写的

这段代码是用来   关闭【默认导航栏样式】和 引入colorUI自定义顶部导航栏 

页面中使用方法： 

<!-- 顶部导航栏 组件 -->
<cu-custom bgColor="bg-gradual-blue">
  <view slot="content">ColorUI 空白模板</view>
</cu-custom>

 效果如下：

你也可以做的更好看一些：

<!-- bgImage==> 顶部导航栏的背景图片
isBack="{{true}} ==》 开启返回箭头
-->
<cu-custom bgImage="../../../images/wave.gif" isBack="{{true}}">
  <!-- slot="backText" ==》 跟在返回箭头之后 -->
  <view slot="backText">返回</view>
  <!--  slot="content"===》居中的标题文字  -->
  <view slot="content">微动画</view>
</cu-custom>

这样的 navigation（顶上的导航栏）更加美观个性化：

而且：如果不在wxml中使用

• 自定义tabBar

使用自定义tabBar组件，需要对菜单页面进行一定的改造，接下来说明一下其和原生微信小程序在构造上的区别与注意点

原生小程序项目标准格式： 

原生小程序的tabBar菜单对应的页面都在pages文件夹下，按照Page格式设置js内容；使用的组件效果则是放在对应的compoents文件夹下，每个tabBar菜单对应是一个Page页面

colorUI使用自定以tabBar的方法

在colorUI中，因为使用的是自定义的tabBar，是通过组件的形式引入到页面中，然后通过样式将这个组件固定定位 position: fixed到页面的下放bottom位置。达到跟原生tabBar类似的效果。

这里就先说一下原理，详细的代码我后单独弄一篇博客，不然这里太长了~

微信小程序-colorUI组件库-自定义tabBar_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120740381

原生tabBar与自定义tabBar效果演示

•  默认的微信小程序tabbar效果：

•  colorUI封装的tabbar效果：

看上面截图对照，你可能绝对好像自定义tabBar和原生的tabBar也没啥太大区别，尤其是第一种自定义tabBar，跟原生的看起来不能说毫不相关，只能说是一模一样。

 但是，原生的tabBar，限制死了就那几样配置参数

路径pagePath、菜单名文字text、未选中图标、选中图标iconPath、selectedIconPath，还有一些操作栏颜色、定位的参数，没有其他多余的配置项目了（不过也满足基础使用了）

但是如果想要实现在tabBar上的一些样式、显示效果的改动，害得是自定义tabBar

像这个按钮、红色角标都得靠封装的自定义tabBar组件来实现，原生的tabBar没法做到，各有所长吧。

 关于微信小程序自定义tabBar，可以在官方文档了解一下大概内容：

自定义 tabBar | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

以上，就是colorUI组件库的基础介绍和如何使用的介绍，更加详细的组件使用、属性说明都在上方的链接中，有不少博客参考。