## 颜色选择器 待优化
<br />
多种颜色供以选择 

### 导入使用
```code[javascript]
import SuColorPicker from "ss-universal-client-web/comp/form/su-color-picker";
```

### 基本用法

:::demo

```html

<template>
    <su-color-picker :color.sync="color"></su-color-picker>
</template>

<script>
    export default {
        components:{seColorPicker},
        data() {
            return {
                color: '#F05654'
            }
        }
    }
</script>
```

:::

### 自定义颜色
通过color设置展示颜色

:::demo `color` 自定义色值，默认为`#F05654`
```html

<template>
    <su-color-picker :color.sync="color"></su-color-picker>
</template>

<script>
    export default {
        components:{seColorPicker},
        data() {
            return {
                color: '#409EFF'
            }
        }
    }
</script>
```
:::

### 选中颜色回调
选择颜色后触发

:::demo 
```html

<template>
    <su-color-picker :color.sync="color" @change="change"></su-color-picker>
</template>

<script>
    export default {
        components:{seColorPicker},
        data() {
            return {
                color: '#56BD94'
            }
        },
        methods: {
            change() {
                this.$message('已选择颜色');
                console.log(this.color)
            },
        }
    }
</script>
```
:::


### Attributes

| 参数      | 说明          | 类型      | 可选值                                    | 默认值  |
|---------- |-------------- |---------- |--------------------------------------- |-------- |
| color | 所选择的颜色 | string | #F98257/#BA5DB7/#F56C6C/#56BD94/#409EFF/#EDAF45 | #F05654 |

### Events

| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 选中颜色后回调 | — |