# vueGradientColorPicker

**Repository Path**: wys657485941/vue-gradient-color-picker

## Basic Information

- **Project Name**: vueGradientColorPicker
- **Description**: 最近项目用到了渐变色的颜色选择器 框架的颜色选择器是单色的不支持渐变色 所有参考element ui 开发了一个渐变色的选择器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: base_001
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2023-03-06
- **Last Updated**: 2024-03-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue2颜色选择器可选择单色和渐变色

## 安装

```
npm i wcolorpicker
```

### 使用在main.js 中使用

```
import wcolorpicker from 'wcolorpicker'
Vue.use(wcolorpicker)
```

### 在要使用的位置

```
 <wcolorpicker v-model="color"></wcolorpicker>
```

### 配置

| 属性          | 默认值 | 描述               |
| ------------- | ------ | ------------------ |
| v-model       |        | 绑定数据           |
| show-alpha    | false  | 是否显示透明度     |
| gradient-dots | 2      | 渐变色颜色点最大数 |
| show-change   | true   | 是否展示切换按钮   |
| predefine     | []     | 预设颜色           |
| disabled      | false  | 是否禁用           |
| popperClass   |        | 样式               |
| Confirm       |        | 确定按钮事件       |
| cancal        |        | 取消按钮事件       |


### 示例

```
<template>
  <div id="app">
    <div>
      <wcolorpicker showAlpha :gradient-dots="3" v-model="color"></wcolorpicker>
    </div>
  </div>
</template>
```

![image](https://img.picgo.net/2023/03/24/capture_202303221701098465492b2bdcc1b7652.png)

![image](https://img.picgo.net/2023/03/24/capture_20230322170756266cd7b78093babc467.png)

![image](https://img.picgo.net/2023/03/24/capture_20230324161518134676a9b72a81f24ad.png)