# 多度颜色

3.0.3 版本之后对颜色配比进行了重大的更改,摒弃less的使用方式采用:root
:root 所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。
这次主要更新是抽离了colors和db-tidy-ui的重度依赖改为单独脚手架的方式。
下面介绍最新的db-colors脚手架改如何在项目使用

# npm 安装

推荐使用 npm 的方式安装。

安装完毕后拥有全局的db-colors的指令

npm i db-colors -g

# db-colors使用

通过-h来查看当前所有指令

db-colors -h 
// 基础使用创建颜色config-path是对应基础配置地址
// 这个地址是按照当前触发命令行的相对地址
db-colors create [config-path]

# db-colors可配置项

{
  "colors": [ // 必填！通过colors来定义当前生成多少颜色
    {
      "key": "primary", // key将会成功颜色的命名 会生成 --db-{key}-1 为命名的css var()
      "value": "#3054eb"
    }
  ],
  "colourGamut": 10, // 选填，通过改参数可以定义颜色的梯度，默认10度。注意主色永远是第6度
  "path": "./colors", // 选填，生成的颜色文件夹默认 colors
  "name": "index", // 选填，生成的颜色名称
}

# css访问颜色

css通过使用var()来进行设置颜色
定义新的:root可以覆盖之前的:root来达到换肤的效果

# 主色

颜色定义上分为两块，主色+辅助色。总体颜色以primary为主。其他则是补充色

主色

<template>
<db-row class="color__block1" :margin="0" :padding="3">
  <db-col width="100%" style="background: var(--db-primary-base);">
    主色
  </db-col >
  <db-col flex-grow="1" v-for="(item, i) in Array(10)" :key="i" :style="{ background: `var(--db-primary-${i})`}">
  </db-col>
</db-row>
</template>
<style>
  .color__block1{
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    line-height: 25px;
    border-radius: 4px;
    overflow: hidden;
  }
</style>

Copy

# 辅助色

辅助色

成功色

危险色

警告色

信息色

<template>
<div>
  <db-row class="color__block2" :margin="0" :padding="3">
    <db-col width="100%" style="background: var(--db-low-base);">
      辅助色
    </db-col >
    <db-col flex-grow="1" v-for="(item, i) in Array(10)" :key="i" :style="{ background: `var(--db-low-${i})`}">
    </db-col>
  </db-row>
  <db-row class="color__block2" :margin="0" :padding="3">
    <db-col width="100%" style="background: var(--db-success-base);">
      成功色
    </db-col >
    <db-col flex-grow="1" v-for="(item, i) in Array(10)" :key="i" :style="{ background: `var(--db-success-${i})`}">
    </db-col>
  </db-row>
  <db-row class="color__block2" :margin="0" :padding="3">
    <db-col width="100%" style="background: var(--db-danger-base);">
      危险色
    </db-col >
    <db-col flex-grow="1" v-for="(item, i) in Array(10)" :key="i" :style="{ background: `var(--db-danger-${i})`}">
    </db-col>
  </db-row>
  <db-row class="color__block2" :margin="0" :padding="3">
    <db-col width="100%" style="background: var(--db-warning-base);">
      警告色
    </db-col >
    <db-col flex-grow="1" v-for="(item, i) in Array(10)" :key="i" :style="{ background: `var(--db-warning-${i})`}">
    </db-col>
  </db-row>
  <db-row class="color__block2" :margin="0" :padding="3">
    <db-col width="100%" style="background: var(--db-info-base);">
      信息色
    </db-col >
    <db-col flex-grow="1" v-for="(item, i) in Array(10)" :key="i" :style="{ background: `var(--db-info-${i})`}">
    </db-col>
  </db-row>
</div>
</template>
<style>
  .color__block2{
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    line-height: 25px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
  }
</style>

Copy

# 换肤系统

通过设定不同的link标签来达到需求
注意js就算替换了，也无法触发视图的更新。vue上可以通过vuex来解决这个问题
运行yarn run:colors来查看案例，请确保npm安装http-server
以下为直接添加标签，您也可以更具项目动态更改标签的href来实现会更好

青柠

法式洋红

日出

原色

<template>
  <div >
    <db-button @click="setColor('lime')">青柠</db-button>
    <db-button @click="setColor('magenta')">法式洋红</db-button>
    <db-button @click="setColor('yellow')">日出</db-button>
    <db-button @click="setColor('index')">原色</db-button>
  </div>
</template>
<script>

export default {
  data() {
    return {
      src: 'http://127.0.0.1:8080/index.css'
    }
  },
  methods: {
    setColor(name) {
      function addCssByLink(name) {
        var url = `http://127.0.0.1:8080/${name}.css`
        var url2 = `http://127.0.0.1:8080/${name}.js`
        var doc = document
        var link = doc.createElement('link')
        link.setAttribute('rel', 'stylesheet')
        link.setAttribute('type', 'text/css')
        link.setAttribute('href', url)
        var js = doc.createElement('script')
        js.setAttribute('src', url2)
        var heads = doc.getElementsByTagName('head')
        if (heads.length) {
          heads[0].appendChild(link)
          heads[0].appendChild(js)
        } else {
          doc.documentElement.appendChild(link)
          doc.documentElement.appendChild(js)
        }
      }
      addCssByLink(name)
    }
  }
}
</script>
<style>
  .color__block{
    width: 90px;
    height: 75px;
    font-size: 18px;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #fff;
    line-height: 25px;
    padding:16px 0 0 8px;
    margin-bottom:32px;
  }
  .color-font{
    font-size: 16px;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #1F2647;
    line-height: 22px;
  }
</style>

Copy

# 通过js来使用颜色

目前不推荐js用于视图上的显示，因为更新了颜色也无法触发视图更新！！！vue上可以通过vuex来解决这个问题
创建时候会生成js文件，js支持require引入会提供颜色的hashjson
您也可以使用window对象上__db_colors来访问颜色

const Colors = require('colors/index.js') // 自己更具项目具体路径来
export default {
  data() {
    return {
      colors: {},
      show: false
    }
  },
  mounted () {
    this.colors = Colors
    this.$nextTick(() => {
      this.show = true
    })
  }
}

<template>
  <div v-if="show">
    <div class="color__block" :style="{ background: colors.primary.base }">
      主色
    </div>
    <div v-for="item in colors.primary" :key="item" class="color__block color__block3" :style="{ background: item }">
      {{item}}
    </div>
    <div class="color__block" :style="{ background: colors.warning.base}">
      统辅色
    </div>
    <div v-for="item in colors.warning" :key="item" class="color__block color__block3" :style="{ background: item }">
      {{item}}
    </div>
    <div class="color__block" :style="{ background: colors.danger.base }">
      危险色
    </div>
    <div v-for="item in colors.danger" :key="item" class="color__block color__block3" :style="{ background: item }">
      {{item}}
    </div>

    <div class="color__block" :style="{ background: colors.success.base }">
      成功色
    </div>
    <div v-for="item in colors.success" :key="item" class="color__block color__block3" :style="{ background: item }">
      {{item}}
    </div>

    <div class="color__block" :style="{ background: colors.info.base }">
      提示色
    </div>
    <div v-for="(item, i) in colors.info" :key="i" class="color__block color__block3" :style="{ background: item }">
      {{item}}
    </div>
  </div>
</template>
<script>


export default {
  mixins: [require('@public/mixin/colors').default], // vuepreess兼容写法项目勿用
}
</script>
<style>
  .color__block{
    width: 90px;
    height: 75px;
    font-size: 18px;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #fff;
    line-height: 25px;
    padding:16px 0 0 8px;
    margin-bottom:32px;
  }
  .color__block3{
    display: inline-block;
  }
  .color-font{
    font-size: 16px;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #1F2647;
    line-height: 22px;
  }
</style>

Copy

← 树型控件 tree 折线图 →