# yll_color_pick

**Repository Path**: yll10243/yll_color_pick

## Basic Information

- **Project Name**: yll_color_pick
- **Description**: vue3-vite-ts的颜色选择器的组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-21
- **Last Updated**: 2022-02-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 描述

vue3+vite2+ts的一个独立的颜色选择器

![](https://gitee.com/yll10243/yll_color_pick/raw/master/readme_img/preview-dark.jpg)
![](https://gitee.com/yll10243/yll_color_pick/raw/master/readme_img/preview-light.jpg)

# 使用


## Install

```bash
npm run yll_color_pick 
```

## Example

> 直接引入组件

```vue
<template>
  <ColorPicker :color="colorAttr" @changeColor="changeColor"></ColorPicker>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { ColorPicker } from "yll_color_pick"
import "yll_color_pick/dist/yll_color_pick.css"
const colorAttr = ref("#1BC7B6")
const changeColor = (color: any) => {
  const { r, g, b, a } = color.rgba
  let tempColor = `rgba(${r}, ${g}, ${b}, ${a})`
  console.log(tempColor)
}
</script>
```

> 引入全局

```vue
# main.js
import { createApp } from 'vue'
import App from './App.vue'

import { ColorPicker } from "yll_color_pick"
import "yll_color_pick/dist/yll_color_pick.css"

const app = createApp(App)
app.component('ColorPicker', ColorPicker)
app.mount('#app')

# xxx.vue中使用
<template>
  <ColorPicker :color="colorAttr" @changeColor="changeColor"></ColorPicker>
</template>
<script setup lang="ts">
import { ref } from "vue"
const colorAttr = ref("#1BC7B6")
const changeColor = (color: any) => {
  const { r, g, b, a } = color.rgba
  let tempColor = `rgba(${r}, ${g}, ${b}, ${a})`
  console.log(tempColor)
}
</script>
```

## Options

| Name               | Type              | Default                                                                                                                                                                                  | Description                             |
| ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| theme              | String            | `dark`                                                                                                                                                                                   | `dark` or `light`                       |
| color              | String            | `#000000`                                                                                                                                                                                | `rgba` or `hex`                         |
| colors-default     | Array             | `['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)']` | like `['#ff00ff', '#0f0f0f', ...]`      |
| colors-history-key | String            | `vue-color-kit-history`   | - |


> `color` is one-way data flow, so you can't use `v-model`. why? because you'll listen `changeColor` event do more things, so i think it's not necessary here.

## Events

| Name        | Type     | Args   | Description                     |
| ----------- | -------- | ------ | ------------------------------- |
| changeColor | Function | color  | `{ rgba: {}, hsv: {}, hex: ''}` |