---
nav: default
---
### ColorPicker
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fcolor-picker"/>
<a href="demo/#/component/color-picker" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/color-picker</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/color-picker" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <div style="padding: 15px;">
      <color-picker
        v-model="color1"
        :colors="colors1"
      />
      <br>
      <color-picker
        v-model="color1"
        :colors="colors1"
        size="middle"
      />
    </div>
    <group title="as a cell's content">
      <cell :title="'Color:' + color1">
        <color-picker
          slot="value"
          v-model="color1"
          :colors="colors1"
          size="small"
        />
      </cell>
    </group>
    <group title="a cell without title">
      <cell primary="content">
        <color-picker
          slot="value"
          v-model="color1"
          :colors="colors1"
          size="middle"
        />
      </cell>
    </group>
    <group title="enable single and null">
      <cell primary="content">
        <color-picker
          slot="value"
          v-model="color2"
          :colors="colors2"
          size="middle"
          :enable-null="true"
        />
      </cell>
    </group>
  </div>
</template>

<script>
import { ColorPicker, Group, Cell } from '../components/_index'

export default {
  components: {
    ColorPicker,
    Group,
    Cell
  },
  data () {
    return {
      color1: '#FFEF7D',
      colors1: ['#FF3B3B', '#FFEF7D', '#8AEEB1', '#8B8AEE', '#CC68F8', '#fff'],
      color2: '#FF3B3B',
      colors2: ['#FF3B3B']
    }
  }
}
</script>

```

#### Github Issue