之前在做一个颜色选择工具的时候，遇到了颜色选择需求，一开始是打算使用 elementui 中的颜色选择器组件，但是 elementui 的 color-picker 组件不支持渐变，而且每次选择完颜色还要点击确定才能选取，太麻烦了

于是试试去 npm 上找找看，如果没有就自己封装一个组件

npm 上一搜 colorpicker 找到挺多的，但是大都基于 React 封装的，接受搜了一下 vue-color-picker，找到了几个，看了一圈下来发现 vue3-colorpicker 这个组件还挺好的，功能完全满足我的需求，而且用起来极其方便

下面介绍一下这个组件的使用

安装

1
npm install vue3-colorpicker

npm 地址

引用站外链接
vue3-colorpicker
vue3-colorpicker在线体验

在线体验地址

引用站外链接
vue3-colorpicker
vue3-colorpicker在线体验

基本使用

首先先导入 css 样式文件和组件

1
2
import "vue3-colorpicker/style.css";
import { ColorPicker } from "vue3-colorpicker";

然后直接在组件内部使用就好了，例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script setup>
import "vue3-colorpicker/style.css";
import { ColorPicker } from "vue3-colorpicker";
import { ref } from "vue";

const pureColor = ref("#ff0000");

const gradientColor = ref(
  "linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)"
);
</script>

<template>
  <div>
    <ColorPicker
      v-model:pure-color="pureColor"
      v-model:gradient-color="gradientColor"
    ></ColorPicker>
  </div>
</template>

<style scoped></style>

进阶使用

组件的具体使用请参考官网在线体验地址

官方文档写的很明确简洁

引用站外链接
vue3-colorpicker
vue3-colorpicker在线体验

自定义样式

但是组件的默认样式可能满足不了一些特殊需求，比如你需要一个自适应大小的调色板、调整背景啥的

官网的调色板样式是直接定死了的，而不是使用 css 变量，这样微调起来非常方便，直接找到对应元素的类名，然后修改样式就好

比如你想要一个很大的自适应大小的调色板，可以使用以下样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.vc-colorpicker {
  width: 75% !important;
  z-index: 998 !important;
}

@media (min-width: 996px) {
  .vc-saturation {
    height: 300px !important;
  }
}

@media (min-width: 680px) {
  .vc-saturation {
    height: 300px !important;
  }
}

@media (min-width: 1200px) {
  .vc-saturation {
    height: 400px !important;
  }
}

@media (max-width: 680px) {
  .vc-saturation {
    height: 200px !important;
  }
}

@media (max-width: 480px) {
  .vc-saturation {
    height: 120px !important;
  }
}