注意：以下文档只适用于TOP接口，请谨慎使用！
注意：以下文档只适用于TOP接口，请谨慎使用！
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| colors | 初始化颜色，支持所有 tinyColor2 模块支持转化的数据类型 | object/string | —— | —— |
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| 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>
