# 截图
![](https://img-blog.csdnimg.cn/img_convert/c18bd37e85899be066939081bca2dd8e.gif)

# Usage
```html
<template>
   <div class="w-[160px] mt-[50px] ml-[20px] ">
        <ColorPicker @register="register" v-model:value="color">
       </ColorPicker>
   </div>
</template>
<script>
   import {ColorPicker,useColor} from 'color-picker-plus';
   const color= ref()
    const[register]=useColor({
       type:'hsl', //类型，在下面props里面有说明
       disabled:true, //默认false
       usuallyColorBlock:['#FF0000', '#55FF00', '#0015FF'], //常用的色块
	   defaultColor:'#f50' //默认选中颜色 可以为color
    )
</script>
```

# Props
| 属性           | 类型  | 默认值    | 说明 |
| ---------     | -----: | -----:   | -----:|
| type  	    | string | 'hsl'    | 'hsl','hex','rgb','rgba' |
| usuallyColorBlock  |   string |Array[] | ['#FF0000', '#55FF00', '#0015FF']|
| defaultColor  |   string | '' | ''|
| modalwidth  |   number | 300 | 颜色选择器弹出框的宽度 |
| disabled  |   boolean | false | 是否禁用 |



# 注意事项

- type跟defaultColor的类型保持一致
- type为‘hsl’defaultColor 为 'hsl(198,76%,36%)'
- type为‘rgb’defaultColor 为 'rgb(180,238,180)'
- type为‘rgba’defaultColor 为'rgb(192,255,62,0.5)'
- type为‘hex’defaultColor 为 '#00CDCD'


# Install


```javascript
npm i color-picker-plus
```