ColorPicker 颜色选择器 - 图1

参数

参数	说明	类型	可选值	默认值
colors	初始化颜色，支持所有 tinyColor2 模块支持转化的数据类型	object/string	——	——

Event

事件名称	说明	回调参数
change	value发生改变的回调	新的value，返回整个color对象，形式如下：{a:1,hex:”#FF0000”,hsl:{a:1,h:0,l:0.5,s:1},hsv:{a:1,h:0,s:1,v:1},oldHue:16.53842213114754,rgba:{a:1,b:0,g:0,r:255}}

使用示例

<template>
  <div class="colorPicker">
    <color-picker v-model="colors" @change="onChange"></color-picker>
    <div class="colorPicker-box" :style="{ background: color }"></div>
  </div>
</template>
<script>
import { ColorPicker } from 'genie-ui'
export default {
  components: {
    ColorPicker
  },
  data () {
    return {
      color: '#ff3300',
      colors: '#ff3300'
    }
  },
  methods: {
    onChange (v) {
      console.log('change', v)
      this.color = v.hex
    }
  }
}
</script>