├── example
    ├── v3-color-picker.png
    └── index.html
├── .editorconfig
├── index.d.ts
├── LICENSE
├── src
    ├── draggable.js
    ├── component
    │   ├── ColorList.vue
    │   ├── ColorStraw.vue
    │   ├── ColorPreview.vue
    │   ├── ColorHue.vue
    │   ├── ColorPanel.vue
    │   ├── ColorAlpha.vue
    │   ├── ColorPicker.vue
    │   └── ColorValue.vue
    ├── index.js
    ├── V3ColorPicker.vue
    └── color.js
├── package.json
├── rollup.config.js
├── .gitignore
└── README.md


/example/v3-color-picker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xfy520/v3-color-picker/HEAD/example/v3-color-picker.png


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # 根目录的配置文件，编辑器会由当前目录向上查找，如果找到 `roor = true` 的文件，则不再查找
 2 | root = true
 3 | # 匹配全部文件
 4 | [*]
 5 | # 设置字符集
 6 | charset = utf-8
 7 | # 结尾换行符，可选"lf"、"cr"、"crlf"
 8 | end_of_line = lf
 9 | # 在文件结尾插入新行
10 | insert_final_newline = true
11 | # 删除一行中的前后空格
12 | trim_trailing_whitespace = true
13 | # 缩进风格，可选"space"、"tab"
14 | indent_style = space
15 | # 缩进的空格数
16 | indent_size = 2
17 | # 单行最大长度
18 | max_line_length = 100
19 | # 大括号不另起一行
20 | curly_bracket_next_line = false
21 | # 运算符两遍都有空格
22 | spaces_around_operators = true
23 | # 条件语句格式是 1tbs
24 | indent_brace_style = 1tbs
25 | 
26 | # 以下匹配，类同
27 | [Makefile]
28 | indent_style = tab
29 | [*.{js,ts}]
30 | # 字符串使用单引号
31 | quote_type = single
32 | [*.{json,vue}]
33 | # 字符串使用双引号
34 | quote_type = double
35 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
 1 | type colorType = {
 2 |   value?: string | null;
 3 |   zIndex?: number;
 4 |   theme?: "dark" | "light";
 5 |   height?: number;
 6 |   width?: number;
 7 |   colors?: Array<string>;
 8 |   btn?: boolean;
 9 | }
10 | 
11 | declare module 'v3-color-picker' {
12 |   export const V3ColorPicker: import('vue').DefineComponent<colorType & {
13 |     size: undefined | "medium" | "small" | "mini"
14 |   }>;
15 | 
16 |   export const colorEvent: (event: MouseEvent, options: colorType & {
17 |     change?: (v: string) => void;
18 |   }) => {
19 |     close: () => void
20 |   };
21 | 
22 |   export const directive: import('vue').Directive;
23 | 
24 |   const install: (app: import('vue').App, options: {
25 |     name: string
26 |   }) => unknown;
27 |   export default install;
28 | }
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 xfy520
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/draggable.js:
--------------------------------------------------------------------------------
 1 | let isDragging = false;
 2 | 
 3 | function on(element, event, handler) {
 4 |   if (element && event && handler) {
 5 |     element?.addEventListener(event, handler, false)
 6 |   }
 7 | }
 8 | 
 9 | function off(element, event, handler) {
10 |   if (element && event && handler) {
11 |     element?.removeEventListener(event, handler, false)
12 |   }
13 | }
14 | 
15 | export default function (element, options) {
16 |   const moveFn = function (event) {
17 |     options.drag?.(event)
18 |   }
19 | 
20 |   const upFn = function (event) {
21 |     off(globalThis.document, "mousemove", moveFn);
22 |     off(globalThis.document, "mouseup", upFn);
23 |     globalThis.document.onselectstart = null;
24 |     globalThis.document.ondragstart = null;
25 |     isDragging = false;
26 |     options.end?.(event);
27 |   }
28 | 
29 |   on(element, "mousedown", function (event) {
30 |     if (isDragging) {
31 |       return;
32 |     }
33 |     globalThis.document.onselectstart = () => false;
34 |     globalThis.document.ondragstart = () => false;
35 |     on(globalThis.document, "mousemove", moveFn);
36 |     on(globalThis.document, "mouseup", upFn);
37 |     isDragging = true;
38 |     options.start?.(event);
39 |   })
40 | }
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "v3-color-picker",
 3 |   "version": "2.0.0",
 4 |   "author": "xufangyi",
 5 |   "private": false,
 6 |   "description": "Vue3.0 颜色选择器",
 7 |   "keywords": [
 8 |     "vue",
 9 |     "vue3",
10 |     "color",
11 |     "vue3-color",
12 |     "color-picker",
13 |     "color picker",
14 |     "vue3-color-picker",
15 |     "vue3 color picker"
16 |   ],
17 |   "main": "dist/v3-color-picker.js",
18 |   "module": "dist/v3-color-picker.es.js",
19 |   "types": "./index.d.ts",
20 |   "files": [
21 |     "package.json",
22 |     "README.md",
23 |     ".gitignore",
24 |     "LICENSE",
25 |     "dist/v3-color-picker.es.js",
26 |     "dist/v3-color-picker.es.min.js",
27 |     "dist/v3-color-picker.js",
28 |     "dist/v3-color-picker.min.js",
29 |     "src",
30 |     "index.d.ts"
31 |   ],
32 |   "license": "MIT",
33 |   "repository": {
34 |     "type": "git",
35 |     "url": "https://github.com/xfy520/v3-color-picker.git"
36 |   },
37 |   "scripts": {
38 |     "build": "rollup -c -w"
39 |   },
40 |   "dependencies": {},
41 |   "devDependencies": {
42 |     "@babel/core": "^7.15.5",
43 |     "@vue/compiler-sfc": "3.0.0",
44 |     "rollup": "^2.57.0",
45 |     "rollup-plugin-babel": "^4.4.0",
46 |     "rollup-plugin-clear": "^2.0.7",
47 |     "rollup-plugin-commonjs": "^10.1.0",
48 |     "rollup-plugin-json": "^4.0.0",
49 |     "rollup-plugin-node-resolve": "^5.2.0",
50 |     "rollup-plugin-postcss": "3.1.8",
51 |     "rollup-plugin-terser": "^7.0.2",
52 |     "rollup-plugin-uglify": "^6.0.4",
53 |     "rollup-plugin-vue": "^6.0.0",
54 |     "vue": "3.0.0"
55 |   }
56 | }


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import resolve from 'rollup-plugin-node-resolve'
 3 | import commonjs from 'rollup-plugin-commonjs'
 4 | import pluginVue from 'rollup-plugin-vue'
 5 | import postcss from 'rollup-plugin-postcss'
 6 | import { terser } from 'rollup-plugin-terser'
 7 | import { uglify } from 'rollup-plugin-uglify'
 8 | import clear from 'rollup-plugin-clear'
 9 | 
10 | module.exports = {
11 |   input: path.resolve(__dirname, './src/index.js'),
12 |   output: [
13 |     {
14 |       file: path.resolve(__dirname, './dist/v3-color-picker.js'),
15 |       format: 'umd',
16 |       name: 'V3ColorPicker',
17 |       globals: {
18 |         vue: 'Vue'
19 |       }
20 |     },
21 |     {
22 |       file: path.resolve(__dirname, './dist/v3-color-picker.min.js'),
23 |       format: 'umd',
24 |       name: 'V3ColorPicker',
25 |       globals: {
26 |         vue: 'Vue'
27 |       },
28 |       plugins: [
29 |         uglify(),
30 |         terser()
31 |       ]
32 |     },
33 |     {
34 |       file: path.resolve(__dirname, './dist/v3-color-picker.es.js'),
35 |       format: 'es',
36 |       globals: {
37 |         vue: 'Vue'
38 |       }
39 |     },
40 |     {
41 |       file: path.resolve(__dirname, './dist/v3-color-picker.es.min.js'),
42 |       format: 'es',
43 |       globals: {
44 |         vue: 'Vue'
45 |       },
46 |       plugins: [
47 |         uglify(),
48 |         terser()
49 |       ]
50 |     }
51 |   ],
52 |   plugins: [
53 |     resolve(),
54 |     pluginVue(),
55 |     commonjs(),
56 |     postcss(),
57 |     clear({
58 |       targets: ['./dist'],
59 |       watch: true,
60 |     })
61 |   ],
62 |   external: [
63 |     'vue'
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/src/component/ColorList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="color-list">
 3 |     <div
 4 |       class="color"
 5 |       :style="{ width: `${height}px`, height: `${height}px` }"
 6 |       v-for="(color, index) in rgbaColors"
 7 |       :key="index"
 8 |       @click="handleSelect(index)"
 9 |     >
10 |       <div :class="{ 'is-selected': color.s, 'is-alpha': color._a < 100 }">
11 |         <div :style="{ width: `${height}px`, height: `${height}px`, backgroundColor: color.v }"></div>
12 |       </div>
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import { computed, defineComponent } from "vue";
19 | import Color from "../color";
20 | 
21 | const height = 18;
22 | 
23 | export default defineComponent({
24 |   name: "ColorList",
25 |   props: {
26 |     value: {
27 |       type: Object,
28 |       required: true
29 |     },
30 |     colors: {
31 |       type: Array,
32 |       required: true,
33 |     },
34 |   },
35 |   setup(props) {
36 |     const rgbaColors = computed(() => {
37 |       return props.colors.map((v) => {
38 |         const c = new Color(v);
39 |         c.s = c.hex === props.value.hex;
40 |         return c;
41 |       });
42 |     });
43 |     function handleSelect(index) {
44 |       props.value.format(props.colors[index]);
45 |     }
46 |     return {
47 |       rgbaColors,
48 |       height,
49 |       handleSelect
50 |     }
51 |   }
52 | })
53 | </script>
54 | 
55 | <style>
56 | .color-list {
57 |   margin: 9px 0;
58 |   padding: 0 9px;
59 |   display: flex;
60 |   overflow: hidden;
61 |   flex-wrap: wrap;
62 |   justify-content: space-around;
63 | }
64 | 
65 | .color-list .color {
66 |   padding: 5px;
67 |   border-radius: 10px;
68 |   cursor: pointer;
69 | }
70 | 
71 | .color-list .color:hover {
72 |   transform: scale(1.2);
73 | }
74 | 
75 | .color-list .color .is-alpha {
76 |   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
77 | }
78 | 
79 | .color-list .color .is-selected {
80 |   box-shadow: 0 0 3px 2px #409eff;
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | yarn.lock
 19 | dist
 20 | 
 21 | # Directory for instrumented libs generated by jscoverage/JSCover
 22 | lib-cov
 23 | 
 24 | # Coverage directory used by tools like istanbul
 25 | coverage
 26 | *.lcov
 27 | 
 28 | # nyc test coverage
 29 | .nyc_output
 30 | 
 31 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 32 | .grunt
 33 | 
 34 | # Bower dependency directory (https://bower.io/)
 35 | bower_components
 36 | 
 37 | # node-waf configuration
 38 | .lock-wscript
 39 | 
 40 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 41 | build/Release
 42 | 
 43 | # Dependency directories
 44 | node_modules/
 45 | jspm_packages/
 46 | 
 47 | # TypeScript v1 declaration files
 48 | typings/
 49 | 
 50 | # TypeScript cache
 51 | *.tsbuildinfo
 52 | 
 53 | # Optional npm cache directory
 54 | .npm
 55 | 
 56 | # Optional eslint cache
 57 | .eslintcache
 58 | 
 59 | # Microbundle cache
 60 | .rpt2_cache/
 61 | .rts2_cache_cjs/
 62 | .rts2_cache_es/
 63 | .rts2_cache_umd/
 64 | 
 65 | # Optional REPL history
 66 | .node_repl_history
 67 | 
 68 | # Output of 'npm pack'
 69 | *.tgz
 70 | 
 71 | # Yarn Integrity file
 72 | .yarn-integrity
 73 | 
 74 | # dotenv environment variables file
 75 | .env
 76 | .env.test
 77 | 
 78 | # parcel-bundler cache (https://parceljs.org/)
 79 | .cache
 80 | 
 81 | # Next.js build output
 82 | .next
 83 | 
 84 | # Nuxt.js build / generate output
 85 | .nuxt
 86 | dist
 87 | 
 88 | # Gatsby files
 89 | .cache/
 90 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 91 | # https://nextjs.org/blog/next-9-1#public-directory-support
 92 | # public
 93 | 
 94 | # vuepress build output
 95 | .vuepress/dist
 96 | 
 97 | # Serverless directories
 98 | .serverless/
 99 | 
100 | # FuseBox cache
101 | .fusebox/
102 | 
103 | # DynamoDB Local files
104 | .dynamodb/
105 | 
106 | # TernJS port file
107 | .tern-port
108 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { createVNode, render, watch, createApp } from 'vue';
 2 | 
 3 | import V3ColorPicker from "./V3ColorPicker.vue";
 4 | import ColorPicker from "./component/ColorPicker.vue";
 5 | 
 6 | function _colorEvent(options, event) {
 7 |   const temp = options || {};
 8 |   const change = temp.change && typeof temp.change === "function" ? temp.change : (_v) => { };
 9 |   const props = {
10 |     position: {
11 |       x: event.clientX,
12 |       y: event.clientY
13 |     },
14 |     ...temp,
15 |     value: temp.value || "#fff",
16 |     confirm: (v) => {
17 |       change(v);
18 |       options.color = v;
19 |       close();
20 |     },
21 |     clear: () => {
22 |       change(null);
23 |       options.color = null;
24 |       close();
25 |     },
26 |   }
27 |   const container = document.createElement("div");
28 |   const vNode = createVNode(ColorPicker, props);
29 |   render(vNode, container);
30 |   if (container.firstElementChild) {
31 |     document.body.appendChild(container.firstElementChild);
32 |   }
33 |   watch(options, (opts) => {
34 |     if (opts.value) {
35 |       vNode.component.props.value = opts.value;
36 |     }
37 |   })
38 |   if (!temp.change) {
39 |     watch(vNode.component.ctx.color, (color) => {
40 |       options.value = color.v;
41 |     })
42 |   }
43 |   function close() {
44 |     vNode && vNode.el && document.body.removeChild(vNode.el);
45 |     globalThis.document.removeEventListener("click", close);
46 |     globalThis.document.removeEventListener("contextmenu", close);
47 |   }
48 |   setTimeout(() => {
49 |     globalThis.document.addEventListener("click", close);
50 |     globalThis.document.addEventListener("contextmenu", close);
51 |   }, 0);
52 |   return {
53 |     close
54 |   }
55 | }
56 | 
57 | const directive = {
58 |   mounted(el, { value, instance }) {
59 |     el.addEventListener("click", _colorEvent.bind(instance, value));
60 |   },
61 |   unmounted(el) {
62 |     el.removeEventListener("click", _colorEvent);
63 |   }
64 | }
65 | 
66 | const colorEvent = (event, options) => _colorEvent(options, event);
67 | 
68 | const install = function (app) {
69 |   app.component(V3ColorPicker.name, V3ColorPicker);
70 |   app.directive("color", directive);
71 |   app.config.globalProperties.colorEvent = (event, options) => _colorEvent(options, event);
72 | }
73 | 
74 | 
75 | export default function (app) {
76 |   app.use(install)
77 | }
78 | 
79 | export {
80 |   V3ColorPicker,
81 |   directive,
82 |   colorEvent
83 | }
84 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Vue3 颜色选择器例子</title>
 9 |   <style>
10 |     * {
11 |       margin: 0;
12 |       padding: 0;
13 |     }
14 | 
15 |     html,
16 |     body {
17 |       width: 100%;
18 |       height: 100%;
19 |     }
20 | 
21 |     #app,
22 |     .demo {
23 |       width: 100%;
24 |       height: 300px;
25 |     }
26 | 
27 |     .demo {
28 |       margin-top: 10px;
29 |       cursor: pointer;
30 |     }
31 |   </style>
32 |   <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
33 |   <script src="../dist/v3-color-picker.js"></script>
34 | </head>
35 | 
36 | <body>
37 |   <div id="app">
38 |     <!-- <div style="position: fixed; top: 0; left: 0;">
39 |       <v3-color-picker v-model:value="color" btn></v3-color-picker>
40 |     </div>
41 |     <div style="position: fixed; bottom: 0; right: 0;">
42 |       <v3-color-picker v-model:value="color" size="medium" theme="light"></v3-color-picker>
43 |     </div>
44 |     <div style="position: fixed; bottom: 0; left: 0;">
45 |       <v3-color-picker v-model:value="color" size="small"></v3-color-picker>
46 |     </div>
47 | 
48 |     <div style="position: fixed; top: 0; right: 0;">
49 |       <v3-color-picker v-model:value="color" :width="300"></v3-color-picker>
50 |     </div> -->
51 |     <div class="demo" v-color="colorOptions" :style="{backgroundColor: colorOptions.value}"></div>
52 |     <!-- <div class="demo" @click="onClick" :style="{backgroundColor: colorOptions.value}"></div> -->
53 |   </div>
54 |   <script>
55 | 
56 |     const vue3Composition = {
57 |       name: "V3ColorPickerDemo",
58 |       setup() {
59 |         const color = Vue.ref("rgba(255,0,0,0.5)");
60 | 
61 |         const colorOptions = Vue.ref({
62 |           value: "rgba(255,0,0,0.5)",
63 |           btn: true,
64 |         });
65 | 
66 |         function onClick(event) {
67 |           V3ColorPicker.colorEvent(event, colorOptions.value);
68 |         }
69 | 
70 |         // setTimeout(() => {
71 |         //   colorOptions.value.value = "rgb(0,0,255，0.5)"
72 |         // }, 3000);
73 | 
74 |         return {
75 |           color,
76 |           colorOptions,
77 |           onClick
78 |         }
79 |       }
80 |     };
81 |     const app = Vue.createApp(vue3Composition);
82 |     app.use(V3ColorPicker.default);
83 |     app.mount("#app");
84 |   </script>
85 | </body>
86 | 
87 | </html>


--------------------------------------------------------------------------------
/src/component/ColorStraw.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="color-straw" @click="onEyeDropper">
 3 |     <svg viewBox="0 0 1024 1024" width="16" height="16">
 4 |       <path
 5 |         d="M861.098667 439.424c-0.426667 0.426667-2.346667-0.768-4.266667-2.688l-267.52-267.562667c-1.962667-1.92-3.157333-3.84-2.730667-4.266666l60.288-60.245334c0.426667-0.426667 2.346667 0.768 4.266667 2.688l267.52 267.52c1.92 1.92 3.114667 3.84 2.688 4.266667l-60.245333 60.288z m131.925333-283.690667L868.992 31.701333C837.76 0.426667 792.746667-7.168 759.04 10.154667a77.653333 77.653333 0 0 0-19.541333 14.208l-36.992 36.949333c-2.645333 2.688-5.077333 5.546667-7.253334 8.448 0.426667 0.597333 0.938667 1.194667 1.536 1.792l256.512 256.512a17.578667 17.578667 0 0 0 1.664 1.450667c2.944-2.218667 5.802667-4.608 8.448-7.253334l36.992-36.992c5.845333-5.888 10.538667-12.458667 14.208-19.584 17.28-33.706667 9.642667-78.72-21.589333-109.952zM380.885333 917.930667c-1.664 6.016 433.749333-430.08 433.749334-430.08 3.072-3.114667 5.248-5.973333 4.864-6.357334L762.88 424.874667c-0.426667-0.426667-3.242667 1.792-6.314667 4.864L329.642667 857.258667c-0.170667 0.170667-9.728 5.717333-9.898667 5.888 0 0-164.309333 47.786667-168.448 48-3.413333 0.256-20.906667-19.541333-20.906667-19.541334s-16.384-14.506667-16.384-18.048c0-3.541333 52.224-179.413333 52.224-179.413333l424.874667-427.52c3.072-3.072 5.290667-5.888 4.906667-6.272l-52.949334-52.906667c-0.384-0.426667-3.2 1.792-6.272 4.864L104.32 644.778667c-0.426667 0.426667-6.016 6.144-6.698667 8.362666l-90.88 306.688a41.130667 41.130667 0 0 0 55.808 57.301334c0.682667 0.128 2.090667 0 3.626667-0.469334 0 0 293.930667-86.144 298.624-89.941333l16.085333-8.789333z m332.288-542.549334l-70.442666-70.485333c-0.512-0.469333-3.413333 1.578667-6.4 4.608l-427.093334 427.093333a21.674667 21.674667 0 0 0-4.565333 5.802667l57.770667 12.970667a9.557333 9.557333 0 0 1 6.058666 8.021333l7.68 49.834667a26.709333 26.709333 0 0 0 5.376-4.394667L708.565333 381.866667c3.072-3.072 5.12-5.973333 4.608-6.442667z"
 6 |         p-id="4133"></path>
 7 |     </svg>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import { defineComponent } from "vue";
13 | 
14 | export default defineComponent({
15 |   name: "ColorStraw",
16 |   emits: ['updateColor'],
17 |   setup(_, { emit }) {
18 |     const onEyeDropper = (event) => {
19 |       event.stopPropagation();
20 |       const eyeDropper = new EyeDropper();
21 |       eyeDropper
22 |         .open()
23 |         .then((result) => {
24 |           emit('updateColor', result.sRGBHex);
25 |         })
26 |         .catch((e) => {
27 |           console.error(e);
28 |         });
29 |     }
30 |     return {
31 |       onEyeDropper
32 |     };
33 |   }
34 | })
35 | </script>
36 | 
37 | <style>
38 | .color-straw {
39 |   width: 20px;
40 |   height: 32px;
41 |   padding: 0 3px;
42 |   display: flex;
43 |   justify-content: flex-start;
44 |   align-items: center;
45 |   fill: #9099a4;
46 |   cursor: pointer;
47 |   transition: all 0.3s;
48 | }
49 | 
50 | .color-picker-light .color-straw {
51 |   fill: #555555;
52 | }
53 | 
54 | .color-straw:hover,
55 | .color-straw:active {
56 |   fill: #1593ff;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/component/ColorPreview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="color-preview"
  4 |     @mouseenter="onMouseenter"
  5 |     @mouseleave="onMouseleave"
  6 |     @mouseup="onMouseup"
  7 |   >
  8 |     <div :style="{ background }">
  9 |       <svg width="25" height="25" v-show="copy" viewBox="0 0 1024 1024">
 10 |         <path
 11 |           fill="#f8f8f8"
 12 |           d="M679.827 780.524h-402.786v-469.916h402.786v469.916zM646.261 344.173h-335.655v402.786h335.655v-402.786zM411.304 243.476h-33.564v67.131h33.564v-67.131zM579.131 444.869h-201.394v33.564h201.394v-33.564zM579.131 545.564h-201.394v33.564h201.394v-33.564zM579.131 646.261h-201.394v33.564h201.394v-33.564zM746.959 243.476h-335.655v33.564h335.655v-33.564zM746.959 277.041h-33.564v402.786h33.564v-402.786zM713.394 646.261h-33.564v33.564h33.564v-33.564z"
 13 |         />
 14 |       </svg>
 15 |       <svg width="20" height="20" v-show="success" viewBox="0 0 1024 1024">
 16 |         <path
 17 |           fill="#f8f8f8"
 18 |           d="M870.4 332.8l-89.6-89.6L416 601.6 243.2 435.2l-89.6 89.6 262.4 256z"
 19 |         />
 20 |       </svg>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import { defineComponent, ref, computed } from "vue";
 27 | export default defineComponent({
 28 |   name: "ColorPreview",
 29 |   props: {
 30 |     value: {
 31 |       type: Object,
 32 |       required: true
 33 |     }
 34 |   },
 35 |   setup(props) {
 36 |     const copy = ref(false);
 37 |     const success = ref(false);
 38 |     const background = computed(() => `rgba(${props.value.rgba.r},${props.value.rgba.g},${props.value.rgba.b},${props.value.rgba.a})`);
 39 |     function onMouseenter() {
 40 |       copy.value = true;
 41 |     }
 42 |     function onMouseleave() {
 43 |       copy.value = false;
 44 |       success.value = false;
 45 |     }
 46 |     function onMouseup() {
 47 |       copy.value = false;
 48 |       navigator.clipboard.writeText(props.value.v)
 49 |         .then(() => {
 50 |           success.value = true;
 51 |         })
 52 |         .catch(err => {
 53 |           console.error(err);
 54 |         });
 55 |     }
 56 |     function onCopy() {
 57 | 
 58 |     }
 59 | 
 60 |     return {
 61 |       onMouseenter,
 62 |       onMouseleave,
 63 |       onMouseup,
 64 |       success,
 65 |       copy,
 66 |       background,
 67 |       onCopy,
 68 |     }
 69 |   }
 70 | })
 71 | </script>
 72 | 
 73 | <style>
 74 | .color-preview {
 75 |   width: 32px;
 76 |   height: 32px;
 77 |   margin-right: 9px;
 78 |   border-radius: 50%;
 79 |   box-sizing: border-box;
 80 |   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
 81 |   cursor: pointer;
 82 | }
 83 | 
 84 | .color-preview:hover {
 85 |   background: transparent;
 86 | }
 87 | 
 88 | .color-preview > div {
 89 |   position: relative;
 90 |   display: flex;
 91 |   width: 32px;
 92 |   height: 32px;
 93 |   justify-content: center;
 94 |   align-items: center;
 95 |   border-radius: 50%;
 96 |   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
 97 | }
 98 | 
 99 | .color-preview > div:hover {
100 |   background: rgba(0, 0, 0, 0.3) !important;
101 | }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/src/component/ColorHue.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     ref="hueRef"
  4 |     :style="{ width: `${width}px`, height: `${height}px`, padding: `0 ${height / 2}px` }"
  5 |     class="color-hue"
  6 |   >
  7 |     <div ref="barRef" :style="{ height: `${height}px` }"></div>
  8 |     <div
  9 |       ref="thumbRef"
 10 |       :style="{
 11 |         width: `${height}px`,
 12 |         height: `${height}px`,
 13 |         top: `${top}px`,
 14 |         left: `${left}px`,
 15 |       }"
 16 |       @mousedown.prevent.stop="onMousedown"
 17 |     ></div>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import { defineComponent, watch, ref, onMounted, nextTick } from "vue";
 23 | import draggable from "../draggable";
 24 | 
 25 | const height = 12;
 26 | 
 27 | export default defineComponent({
 28 |   name: "ColorHue",
 29 |   props: {
 30 |     value: {
 31 |       type: Object,
 32 |       required: true
 33 |     },
 34 |     width: {
 35 |       type: Number,
 36 |       required: true
 37 |     }
 38 |   },
 39 |   setup(props) {
 40 |     const hueRef = ref(null);
 41 |     const barRef = ref(null);
 42 |     const thumbRef = ref(null);
 43 |     const top = ref(0);
 44 |     const left = ref(0);
 45 | 
 46 |     function onMousedown(event) {
 47 |       const rect = hueRef.value.getBoundingClientRect();
 48 |       let _left = event.clientX - rect.left
 49 |       _left = Math.min(_left, rect.width - thumbRef.value.offsetWidth / 2)
 50 |       _left = Math.max(thumbRef.value.offsetWidth / 2, _left);
 51 |       const h = Math.round(
 52 |         ((_left - thumbRef.value.offsetWidth / 2) /
 53 |           (rect.width - thumbRef.value.offsetWidth)) *
 54 |         360
 55 |       );
 56 |       props.value.set("h", h);
 57 |     }
 58 | 
 59 |     function update() {
 60 |       const h = props.value.get("h");
 61 |       if (!hueRef.value) {
 62 |         left.value = 0;
 63 |       }
 64 |       left.value = Math.round((h * (hueRef.value.offsetWidth - thumbRef.value.offsetWidth / 2)) / 360);
 65 |     }
 66 | 
 67 |     watch(
 68 |       () => props.value.get("h"),
 69 |       () => update()
 70 |     )
 71 | 
 72 |     onMounted(() => {
 73 |       nextTick(() => {
 74 |         const config = {
 75 |           drag: (event) => {
 76 |             onMousedown(event);
 77 |           },
 78 |           end: (event) => {
 79 |             onMousedown(event);
 80 |           },
 81 |         }
 82 |         draggable(barRef.value, config);
 83 |         draggable(thumbRef.value, config);
 84 |         update();
 85 |       })
 86 |     });
 87 | 
 88 |     return {
 89 |       hueRef,
 90 |       barRef,
 91 |       thumbRef,
 92 |       onMousedown,
 93 |       left,
 94 |       top,
 95 |       height
 96 |     }
 97 |   },
 98 | })
 99 | </script>
100 | 
101 | <style>
102 | .color-hue {
103 |   position: relative;
104 |   margin-bottom: 3px;
105 |   box-sizing: border-box;
106 |   background-color: red;
107 | }
108 | 
109 | .color-hue > div:first-child {
110 |   position: relative;
111 |   background: linear-gradient(
112 |     to right,
113 |     #f00 0%,
114 |     #ff0 17%,
115 |     #0f0 33%,
116 |     #0ff 50%,
117 |     #00f 67%,
118 |     #f0f 83%,
119 |     #f00 100%
120 |   );
121 |   width: 100%;
122 | }
123 | 
124 | .color-hue > div:last-child {
125 |   position: absolute;
126 |   border-radius: 50%;
127 |   background-color: #fff;
128 |   box-shadow: 0 0 1px 1px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.5);
129 |   cursor: pointer;
130 | }
131 | 
132 | .color-picker-light .color-hue > div:last-child {
133 |   background-color: #ddd;
134 |   box-shadow: 0 0 1px 1px #ddd inset, 0 1px 0 rgba(0, 0, 0, 0.5);
135 | }
136 | </style>
137 | 


--------------------------------------------------------------------------------
/src/component/ColorPanel.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="color-panel"
  4 |     ref="colorPanelRef"
  5 |     :style="{
  6 |       backgroundColor: background,
  7 |       width: `${width}px`,
  8 |       height: `${height}px`
  9 |     }"
 10 |     @mousedown="onMousedown"
 11 |   >
 12 |     <div class="color-panel-white"></div>
 13 |     <div class="color-panel-black"></div>
 14 |     <div :style="{ left: `${left}px`, top: `${top}px` }" class="color-slider">
 15 |       <div></div>
 16 |     </div>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | import { computed, defineComponent, nextTick, onMounted, ref, watch } from "vue";
 22 | import draggable from "../draggable";
 23 | 
 24 | export default defineComponent({
 25 |   name: "ColorPanel",
 26 |   props: {
 27 |     value: {
 28 |       type: Object,
 29 |       required: true
 30 |     },
 31 |     height: {
 32 |       type: Number,
 33 |       default: 150,
 34 |     },
 35 |     width: {
 36 |       type: Number,
 37 |       default: 210,
 38 |     },
 39 |   },
 40 |   emits: ['update:value'],
 41 |   setup(props) {
 42 |     const colorPanelRef = ref(null);
 43 |     const left = ref(0);
 44 |     const top = ref(0);
 45 | 
 46 |     const background = computed(() => `hsl(${props.value.get('h')}, 100%, 50%)`);
 47 | 
 48 |     function update() {
 49 |       const s = props.value.get("s");
 50 |       const v = props.value.get("v");
 51 |       const { clientWidth, clientHeight } = colorPanelRef.value;
 52 |       left.value = (s * clientWidth) / 100;
 53 |       top.value = ((100 - v) * clientHeight) / 100;
 54 |     }
 55 | 
 56 |     function onMousedown(event) {
 57 |       let rect = colorPanelRef.value.getBoundingClientRect();
 58 |       let _left = event.clientX - rect.left;
 59 |       let _top = event.clientY - rect.top;
 60 |       _left = Math.max(0, _left);
 61 |       _left = Math.min(_left, rect.width);
 62 | 
 63 |       _top = Math.max(0, _top);
 64 |       _top = Math.min(_top, rect.height);
 65 | 
 66 |       left.value = _left;
 67 |       top.value = top;
 68 |       props.value.set("s", (_left / rect.width) * 100);
 69 |       props.value.set("v", 100 - (_top / rect.height) * 100);
 70 |     }
 71 | 
 72 |     watch(
 73 |       [() => props.value.get("h"), () => props.value.get("v")],
 74 |       () => update()
 75 |     )
 76 | 
 77 |     onMounted(() => {
 78 |       nextTick(() => {
 79 |         draggable(colorPanelRef.value, {
 80 |           drag: (event) => {
 81 |             onMousedown(event)
 82 |           },
 83 |           end: (event) => {
 84 |             onMousedown(event)
 85 |           },
 86 |         })
 87 |         update();
 88 |       })
 89 |     })
 90 | 
 91 |     return {
 92 |       colorPanelRef,
 93 |       background,
 94 |       onMousedown,
 95 |       left,
 96 |       top
 97 |     }
 98 |   }
 99 | })
100 | </script>
101 | 
102 | <style>
103 | .color-panel {
104 |   position: relative;
105 |   box-sizing: border-box;
106 | }
107 | 
108 | .color-panel-white,
109 | .color-panel-black {
110 |   position: absolute;
111 |   box-sizing: border-box;
112 |   top: 0;
113 |   left: 0;
114 |   right: 0;
115 |   bottom: 0;
116 | }
117 | 
118 | .color-panel-white {
119 |   background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
120 | }
121 | 
122 | .color-panel-black {
123 |   background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
124 | }
125 | 
126 | .color-panel .color-slider {
127 |   position: absolute;
128 |   cursor: pointer;
129 | }
130 | 
131 | .color-panel .color-slider > div {
132 |   width: 6px;
133 |   height: 6px;
134 |   border-radius: 50%;
135 |   box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006;
136 |   transform: translate(-3px, -3px);
137 | }
138 | </style>
139 | 
140 | 


--------------------------------------------------------------------------------
/src/component/ColorAlpha.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     ref="alphaRef"
  4 |     class="color-alpha"
  5 |     :style="{
  6 |       width: `${width}px`,
  7 |       height: `${height}px`,
  8 |     }"
  9 |   >
 10 |     <div ref="barRef" :style="{
 11 |       height: `${height}px`,
 12 |       background,
 13 |     }"></div>
 14 |     <div
 15 |       ref="thumbRef"
 16 |       :style="{
 17 |         width: `${height}px`,
 18 |         height: `${height}px`,
 19 |         top: `${top}px`,
 20 |         left: `${left}px`,
 21 |       }"
 22 |     ></div>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 | import { defineComponent, ref, computed, watch, onMounted, nextTick } from "vue";
 28 | import draggable from "../draggable";
 29 | 
 30 | const height = 12;
 31 | 
 32 | export default defineComponent({
 33 |   name: "ColorAlpha",
 34 |   props: {
 35 |     value: {
 36 |       type: Object,
 37 |       required: true
 38 |     },
 39 |     width: {
 40 |       type: Number,
 41 |       default: 100
 42 |     }
 43 |   },
 44 |   setup(props) {
 45 |     const alphaRef = ref(null);
 46 |     const barRef = ref(null);
 47 |     const thumbRef = ref(null);
 48 |     const top = ref(0);
 49 |     const left = ref(0);
 50 | 
 51 |     const background = computed(() => {
 52 |       if (props.value && props.value.v) {
 53 |         const { r, g, b } = props.value.rgba;
 54 |         return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`
 55 |       }
 56 |       return null
 57 |     })
 58 | 
 59 |     function update() {
 60 |       const a = props.value.get("a");
 61 |       if (!alphaRef.value) {
 62 |         left.value = 0;
 63 |         return 0;
 64 |       }
 65 |       left.value = Math.round((a * (alphaRef.value.offsetWidth - thumbRef.value.offsetWidth / 2)) / 100);
 66 |     }
 67 | 
 68 |     watch(
 69 |       () => props.value.get("a"),
 70 |       () => update()
 71 |     )
 72 | 
 73 |     function onMousedown(event) {
 74 |       const rect = alphaRef.value.getBoundingClientRect();
 75 |       let _left = event.clientX - rect.left
 76 |       _left = Math.max(thumbRef.value.offsetWidth / 2, _left);
 77 |       _left = Math.min(_left, rect.width - thumbRef.value.offsetWidth / 2);
 78 |       props.value.set("a",
 79 |         Math.round(
 80 |           ((_left - thumbRef.value.offsetWidth / 2) /
 81 |             (rect.width - thumbRef.value.offsetWidth)) *
 82 |           100
 83 |         )
 84 |       )
 85 |     }
 86 | 
 87 |     onMounted(() => {
 88 |       nextTick(() => {
 89 |         const dragConfig = {
 90 |           drag: (event) => {
 91 |             onMousedown(event);
 92 |           },
 93 |           end: (event) => {
 94 |             onMousedown(event);
 95 |           },
 96 |         }
 97 |         draggable(barRef.value, dragConfig);
 98 |         draggable(thumbRef.value, dragConfig);
 99 |         update();
100 |       })
101 |     });
102 | 
103 |     return {
104 |       alphaRef,
105 |       barRef,
106 |       thumbRef,
107 |       height,
108 |       onMousedown,
109 |       top,
110 |       left,
111 |       background
112 |     }
113 |   },
114 | })
115 | </script>
116 | 
117 | <style>
118 | .color-alpha {
119 |   position: relative;
120 |   margin-top: 3px;
121 |   box-sizing: border-box;
122 |   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
123 | }
124 | 
125 | .color-alpha > div:first-child {
126 |   position: relative;
127 |   background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
128 |   width: 100%;
129 | }
130 | 
131 | .color-alpha > div:last-child {
132 |   position: absolute;
133 |   border-radius: 50%;
134 |   background-color: #fff;
135 |   box-shadow: 0 0 1px 1px rgb(255, 255, 255) inset, 0 1px 0 rgba(0, 0, 0, 0.5);
136 |   cursor: pointer;
137 | }
138 | 
139 | .color-picker-light .color-alpha > div:last-child {
140 |   background-color: #ddd;
141 |   box-shadow: 0 0 1px 1px #ddd inset, 0 1px 0 rgba(0, 0, 0, 0.5);
142 | }
143 | </style>
144 | 
145 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # v3-color-picker
  2 | 
  3 | Vue3.0 原生颜色选择器，与浏览器自带几乎一样，支持 Vite2.0，[npm地址](https://www.npmjs.com/package/v3-color-picker)
  4 | 
  5 | ![演示](./example/v3-color-picker.png)
  6 | 
  7 | ## [在线文档](https://doc.wssio.com/opensource/v3-color-picker/)
  8 | 
  9 | ## 安装
 10 | 
 11 | ### NPM
 12 | 
 13 | ```shell
 14 | npm install v3-color-picker
 15 | ```
 16 | 
 17 | 或
 18 | 
 19 | ```shell
 20 | yarn add v3-color-picker
 21 | ```
 22 | 
 23 | ### CDN
 24 | 
 25 | ```html
 26 | <script src="https://unpkg.com/v3-color-picker/dist/v3-color-picker.umd.min.js">
 27 | ```
 28 | 
 29 | ## 使用（Vite 情况下同样使用）
 30 | 
 31 | ```js
 32 | // 全局注册组件、指令、方法
 33 | import { createApp } from 'vue';
 34 | import V3ColorPicker from 'v3-color-picker';
 35 | import App from './App.vue';
 36 | const app = createApp(App);
 37 | app.use(V3ColorPicker);
 38 | app.mount('#app');
 39 | // 单个注册某个，以下三种方式均可在单个文件内使用
 40 | import { createApp } from 'vue';
 41 | import { directive, colorEvent, V3ColorPicker } from 'v3-color-picker';
 42 | import App from './App.vue';
 43 | const app = createApp(App);
 44 | app.component('v3-color-picker', V3ColorPicker); // 只注册组件
 45 | app.directive('color', directive); // 只注册指令
 46 | app.config.globalProperties.colorEvent = colorEvent; // 只绑定方法
 47 | app.mount('#app');
 48 | ```
 49 | 
 50 | ```html
 51 | <template>
 52 |   <div>
 53 |     <v3-color-picker v-model:value="color"></v3-color-picker>
 54 |     <div class="demo" v-color="colorOptions" :style="{backgroundColor: colorOptions.value}"></div>
 55 |     <div class="demo" @click="(event) => colorEvent(event, colorOptions)" :style="{backgroundColor: colorOptions.value}"></div>
 56 |   </div>
 57 | </template>
 58 | <script>
 59 | import { defineComponent, ref } from "vue";
 60 | 
 61 | export default defineComponent({
 62 |   name: "App",
 63 |   setup() {
 64 |     const color = Vue.ref("rgba(255,0,0,0.5)");
 65 |     const colorOptions = ref({
 66 |       value: "rgba(255,0,0,0.5)",
 67 |       btn: true,
 68 |       theme: "light"
 69 |     });
 70 |     return { color, colorOptions }
 71 |   },
 72 | });
 73 | </script>
 74 | 
 75 | <style>
 76 | .demo {
 77 |   height: 100px;
 78 |   width: 100%;
 79 | }
 80 | </style>
 81 | ```
 82 | 
 83 | ```css
 84 | 
 85 | ```
 86 | 
 87 | ### 指令方式使用
 88 | 
 89 | ```html
 90 | <template>
 91 |   <div class="demo" v-color="colorOptions" :style="{backgroundColor: colorOptions.value}">指令方式使用</div>
 92 | </template>
 93 | <script>
 94 | import { defineComponent, shallowRef } from "vue";
 95 | 
 96 | export default defineComponent({
 97 |   name: "App",
 98 |   directives: {
 99 |     color: directive
100 |   },
101 |   setup() {
102 |     const colorOptions = ref({
103 |       value: "rgba(255,0,0,0.5)",
104 |       btn: true,
105 |       theme: "light"
106 |     });
107 |     return { colorOptions }
108 |   },
109 | });
110 | </script>
111 | <style>
112 | .demo {
113 |   height: 100px;
114 |   width: 100%;
115 | }
116 | </style>
117 | ```
118 | 
119 | ### 方法方式使用
120 | 
121 | ```html
122 | <template>
123 |   <div class="demo" @click="onClick" :style="{backgroundColor: colorOptions.value}"></div>
124 | </template>
125 | <script>
126 | import { defineComponent, shallowRef } from "vue";
127 | import { colorEvent } from 'v3-color-picker';
128 | 
129 | export default defineComponent({
130 |   name: "App",
131 |   setup() {
132 |     const colorOptions = ref({
133 |       value: "rgba(255,0,0,0.5)",
134 |       btn: true,
135 |       theme: "light"
136 |     });
137 |     function onClick(event) {
138 |       colorEvent(event, colorOptions.value);
139 |       event.preventDefault();
140 |     }
141 |     return { onClick }
142 |   },
143 | });
144 | </script>
145 | ```
146 | 
147 | ### 组件方式使用
148 | 
149 | ```html
150 | <template>
151 |   <v3-color-picker v-model:value="color" btn></v3-color-picker>
152 |   <v3-color-picker v-model:value="color" size="medium" theme="light"></v3-color-picker>
153 |   <v3-color-picker v-model:value="color" size="small"></v3-color-picker>
154 |   <v3-color-picker v-model:value="color" :width="300"></v3-color-picker>
155 | </template>
156 | <script>
157 | import { defineComponent, nextTick, ref, shallowRef } from "vue";
158 | import { V3ColorPicker } from 'v3-color-picker';
159 | 
160 | export default defineComponent({
161 |   name: "App",
162 |   components: {
163 |     V3ColorPicker
164 |   },
165 |   setup() {
166 |     const color = ref("rgba(255,0,0,0.5)");
167 |     return { color }
168 |   },
169 | });
170 | </script>
171 | ```
172 | 
173 | ## 参数说明
174 | 
175 | ### 方法使用参数
176 | 
177 | colorEvent(event, options)，`event`：事件对象，`options`：公共参数与方法参数
178 | 
179 | ### 公共参数
180 | 
181 | |  属性  |        描述        |            类型            | 是否必填 | 默认值  |
182 | | :----: | :----------------: | :------------------------: | :------: | :-----: |
183 | | value  |     初始颜色值     | `string` \| `rbg` \| `hsl` | `false`  | `#fff`  |
184 | | theme  |        主题        |     `dark` \| `light`      | `false`  | `dark`  |
185 | | height | 颜色选择器区域高度 |          `number`          | `false`  |  `150`  |
186 | | width  | 颜色选择器区域宽度 |          `number`          | `false`  |  `233`  |
187 | | colors |    预选颜色列表    |         `[string]`         | `false`  |  `[]`   |
188 | |  btn   |  是否显示按钮按钮  |         `boolean`          | `false`  | `false` |
189 | | zIndex |      菜单层级      |          `number`          | `false`  |   `2`   |
190 | 
191 | ### 组件参数
192 | 
193 | | 属性  |   描述   |                     类型                     | 是否必填 |   默认值    |
194 | | :---: | :------: | :------------------------------------------: | :------: | :---------: |
195 | | size  | 组件大小 | `undefined` \| `medium` \| `small` \| `mini` | `false`  | `undefined` |
196 | 
197 | ### 指令、方法参数
198 | 
199 | |  属性  |           描述           |    类型    | 是否必填 | 默认值 |
200 | | :----: | :----------------------: | :--------: | :------: | :----: |
201 | | change | 颜色值发生改变时触发事件 | `Function` | `false`  | `none` |
202 | 


--------------------------------------------------------------------------------
/src/component/ColorPicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div ref="colorRef" class="color-picker" :class="`color-picker-${theme}`"
  3 |     :style="{ width: `${width}px`, zIndex, top: `${style.top}px`, left: `${style.left}px` }" @click.stop
  4 |     @contextmenu.prevent.stop>
  5 |     <ColorPanel v-model:value="color" :height="height" :width="width" />
  6 |     <div class="color-tool">
  7 |       <ColorStraw v-if="isEyeDropper" @updateColor="updateColorStraw"/>
  8 |       <ColorPreview v-model:value="color" />
  9 |       <div>
 10 |         <ColorHue :width="hueWidth" v-model:value="color" />
 11 |         <ColorAlpha :width="hueWidth" v-model:value="color" />
 12 |       </div>
 13 |     </div>
 14 |     <ColorValue v-model:value="color" :width="width" />
 15 |     <ColorList :colors="colors" v-model:value="color" />
 16 |     <div v-if="btn" class="color-btns">
 17 |       <button class="color-btn" @click="clear">
 18 |         <span>Clear</span>
 19 |       </button>
 20 |       <button class="color-btn" @click="confirm">
 21 |         <span>OK</span>
 22 |       </button>
 23 |     </div>
 24 |   </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | import {
 29 |   computed,
 30 |   defineComponent,
 31 |   onMounted,
 32 |   reactive,
 33 |   watch,
 34 |   ref,
 35 |   nextTick
 36 | } from "vue";
 37 | 
 38 | import ColorPanel from "./ColorPanel.vue";
 39 | import ColorStraw from "./ColorStraw.vue";
 40 | import ColorHue from "./ColorHue.vue";
 41 | import ColorAlpha from "./ColorAlpha.vue";
 42 | import ColorList from "./ColorList.vue";
 43 | import ColorValue from "./ColorValue.vue";
 44 | import ColorPreview from "./ColorPreview.vue";
 45 | import Color from "../color";
 46 | 
 47 | const windowWidth = globalThis.document.documentElement.clientWidth;
 48 | const windowHeight = globalThis.document.documentElement.clientHeight;
 49 | 
 50 | export default defineComponent({
 51 |   name: "ColorPicker",
 52 |   components: {
 53 |     ColorPanel,
 54 |     ColorStraw,
 55 |     ColorPreview,
 56 |     ColorHue,
 57 |     ColorAlpha,
 58 |     ColorValue,
 59 |     ColorList
 60 |   },
 61 |   props: {
 62 |     value: {
 63 |       type: [String, null],
 64 |       default: "#fff"
 65 |     },
 66 |     zIndex: {
 67 |       type: Number,
 68 |       default: 2
 69 |     },
 70 |     position: {
 71 |       type: Object,
 72 |       required: true
 73 |     },
 74 |     theme: {
 75 |       type: String,
 76 |       default: "dark"
 77 |     },
 78 |     height: {
 79 |       type: Number,
 80 |       default: 150,
 81 |     },
 82 |     width: {
 83 |       type: Number,
 84 |       default: 233,
 85 |     },
 86 |     colors: {
 87 |       type: Array,
 88 |       default: ["#ff4500", "#ff8c00", "#ffd700", "#90ee9003", "#00ced1", "#1e90ff", "#c71585",
 89 |         "#ff4500ad", "#ff7800", "#fad400", "#90f09080", "#00babd", "#1f93ffba", "#c7158575"],
 90 |     },
 91 |     btn: {
 92 |       type: Boolean,
 93 |       default: false
 94 |     },
 95 |     change: {
 96 |       type: Function
 97 |     },
 98 |     confirm: {
 99 |       type: Function,
100 |     },
101 |     clear: {
102 |       type: Function,
103 |     }
104 |   },
105 |   emits: ["update:value", "confirm", "clear"],
106 |   setup(props, { emit }) {
107 |     const isEyeDropper = ref(false);
108 |     if (window.EyeDropper) {
109 |       isEyeDropper.value = true;
110 |     }
111 | 
112 |     const colorRef = ref(null);
113 |     const style = ref({
114 |       left: props.position.x || 0,
115 |       top: props.position.y || 0
116 |     });
117 |     const color = reactive(new Color(props.value));
118 |     watch(() => props.value, (newVal) => {
119 |       if (newVal && newVal !== color.v) {
120 |         color.format(newVal);
121 |       }
122 |     });
123 |     const hueWidth = computed(() => props.width - (isEyeDropper.value ? 63 : 40));
124 |     watch(
125 |       () => color.v,
126 |       () => {
127 |         emit("update:value", color.v);
128 |         props.change && props.change(color.v);
129 |       }
130 |     )
131 |     function confirm() {
132 |       emit("confirm");
133 |       props.confirm && props.confirm(color.v);
134 |     }
135 |     function clear() {
136 |       emit("clear");
137 |       props.clear && props.clear();
138 |     }
139 |     onMounted(() => {
140 |       nextTick(() => {
141 |         const colorWidth = colorRef.value.offsetWidth;
142 |         const colorHeight = colorRef.value.offsetHeight;
143 |         if (style.value.left + colorWidth > windowWidth) {
144 |           style.value.left = windowWidth - colorWidth;
145 |         }
146 |         if (style.value.top + colorHeight > windowHeight) {
147 |           style.value.top = style.value.top - colorHeight;
148 |         }
149 |       })
150 |     })
151 | 
152 |     const updateColorStraw = (c) => {
153 |       color.format(c, color._f)
154 |     }
155 | 
156 |     return {
157 |       colorRef,
158 |       style,
159 |       color,
160 |       hueWidth,
161 |       isEyeDropper,
162 |       clear,
163 |       confirm,
164 |       updateColorStraw
165 |     };
166 |   },
167 | });
168 | </script>
169 | 
170 | <style>
171 | .color-picker {
172 |   position: fixed;
173 |   border-radius: 5px;
174 |   box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.16);
175 |   user-select: none;
176 |   padding: 9px;
177 | }
178 | 
179 | .color-tool {
180 |   height: 50px;
181 |   display: flex;
182 |   align-items: center;
183 | }
184 | 
185 | .color-picker-dark {
186 |   background: #2e333a;
187 | }
188 | 
189 | .color-picker-light {
190 |   background: #f9f9f9;
191 |   box-shadow: 1px #f9f9f9;
192 | }
193 | 
194 | .color-btns {
195 |   display: flex;
196 |   justify-content: space-around;
197 | }
198 | 
199 | .color-btn {
200 |   display: inline-block;
201 |   line-height: 1;
202 |   cursor: pointer;
203 |   border: 1px solid #dcdfe6;
204 |   transition: 0.1s;
205 |   border-color: transparent;
206 |   color: #409eff;
207 |   background: transparent;
208 |   font-size: 12px;
209 | }
210 | </style>
211 | 


--------------------------------------------------------------------------------
/src/V3ColorPicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div ref="colorRef" class="v3-c-p" :class="size ? `v3-c-p-${size}` : null" @click="onClick">
  3 |     <div class="c-p-t">
  4 |       <span class="c-p-c">
  5 |         <span class="c-p-c-i" :style="{ backgroundColor: isClear ? 'transparent' : color }"></span>
  6 |       </span>
  7 |       <span class="c-p-i">
  8 |         <svg v-if="!isClear" class="icon" viewBox="0 0 1024 1024">
  9 |           <path
 10 |             d="M511.711 671.589l-270.188-270.23c-0.287-0.264-0.573-0.531-0.851-0.809-10.935-10.935-10.935-28.663 0-39.598 10.935-10.935 28.663-10.935 39.598 0 0.278 0.278 0.545 0.564 0.809 0.851l0.021-0.021 230.691 230.69 231.94-231.94c10.935-10.935 28.663-10.935 39.598 0s10.935 28.663 0 39.598l-271.617 271.459z"
 11 |           />
 12 |         </svg>
 13 |         <svg v-else class="icon" viewBox="0 0 1024 1024">
 14 |           <path
 15 |             d="M704.28672 309.20704l28.95872 28.9792L334.6432 736.78848l-28.95872-28.9792z"
 16 |             fill="#999"
 17 |           />
 18 |           <path
 19 |             d="M341.03296 315.5968l398.60224 398.60224-28.95872 28.95872-398.60224-398.60224z"
 20 |             fill="#999"
 21 |           />
 22 |         </svg>
 23 |       </span>
 24 |     </div>
 25 |   </div>
 26 |   <Teleport to="body">
 27 |     <transition name="color-fade">
 28 |       <ColorPicker
 29 |         v-if="open"
 30 |         v-model:value="color"
 31 |         :zIndex="zIndex"
 32 |         :position="position"
 33 |         :theme="theme"
 34 |         :width="width"
 35 |         :height="height"
 36 |         :colors="colors"
 37 |         :btn="btn"
 38 |         @confirm="confirm"
 39 |         @clear="clear"
 40 |       />
 41 |     </transition>
 42 |   </Teleport>
 43 | </template>
 44 | 
 45 | <script>
 46 | import {
 47 |   nextTick,
 48 |   defineComponent,
 49 |   ref,
 50 |   watch
 51 | } from "vue";
 52 | import ColorPicker from "./component/ColorPicker.vue";
 53 | 
 54 | export default defineComponent({
 55 |   name: "V3ColorPicker",
 56 |   components: {
 57 |     ColorPicker
 58 |   },
 59 |   props: {
 60 |     value: {
 61 |       type: [String, null],
 62 |       default: "#fff"
 63 |     },
 64 |     zIndex: {
 65 |       type: Number,
 66 |       default: 2
 67 |     },
 68 |     theme: {
 69 |       type: String,
 70 |       default: "dark"
 71 |     },
 72 |     height: {
 73 |       type: Number,
 74 |       default: 150,
 75 |     },
 76 |     width: {
 77 |       type: Number,
 78 |       default: 233,
 79 |     },
 80 |     colors: {
 81 |       type: Array,
 82 |       default: ["#ff4500", "#ff8c00", "#ffd700", "#90ee9003", "#00ced1", "#1e90ff", "#c71585",
 83 |         "#ff4500ad", "#ff7800", "#fad400", "#90f09080", "#00babd", "#1f93ffba", "#c7158575"],
 84 |     },
 85 |     size: {
 86 |       type: String,
 87 |     },
 88 |     btn: {
 89 |       type: Boolean,
 90 |       default: false
 91 |     },
 92 |   },
 93 |   emits: ["update:value", "change"],
 94 |   setup(props, { emit }) {
 95 |     const colorRef = ref(null);
 96 |     const position = ref({
 97 |       x: 0,
 98 |       y: 0
 99 |     });
100 |     const isClear = ref(false);
101 |     const color = ref(props.value);
102 |     watch(color, (newVal) => {
103 |       isClear.value = false;
104 |       !props.btn && emit("update:value", newVal);
105 |       emit("change", newVal);
106 |     });
107 |     watch(() => props.value, (newVal) => {
108 |       if (newVal !== null || !props.btn) {
109 |         isClear.value = false;
110 |         color.value = props.value;
111 |       }
112 |       if (newVal === null) {
113 |         isClear.value = true;
114 |       }
115 |     })
116 |     const open = ref(false);
117 |     function onClick(e) {
118 |       open.value = false;
119 |       nextTick(() => {
120 |         position.value = {
121 |           x: e.clientX,
122 |           y: e.clientY
123 |         };
124 |         open.value = true;
125 |       });
126 |     }
127 |     function close(event) {
128 |       if (colorRef.value !== event.target) {
129 |         open.value = false;
130 |       }
131 |     }
132 |     function confirm() {
133 |       emit("update:value", color.value);
134 |       emit("change", color.value);
135 |       open.value = false;
136 |     }
137 |     function clear() {
138 |       emit("update:value", null);
139 |       emit("change", null);
140 |       isClear.value = true;
141 |       open.value = false;
142 |     }
143 |     watch(open, (newVal) => {
144 |       if (newVal) {
145 |         globalThis.document.addEventListener("click", close);
146 |         globalThis.document.addEventListener("contextmenu", close);
147 |       } else {
148 |         globalThis.document.removeEventListener("click", close);
149 |         globalThis.document.removeEventListener("contextmenu", close);
150 |       }
151 |     })
152 |     return {
153 |       onClick,
154 |       position,
155 |       open,
156 |       color,
157 |       confirm,
158 |       clear,
159 |       isClear,
160 |       colorRef
161 |     };
162 |   },
163 | });
164 | </script>
165 | 
166 | <style>
167 | .v3-c-p {
168 |   display: inline-block;
169 |   position: relative;
170 |   height: 40px;
171 |   line-height: normal;
172 |   cursor: pointer;
173 | }
174 | 
175 | .v3-c-p-medium {
176 |   height: 35px;
177 | }
178 | 
179 | .v3-c-p.v3-c-p-medium .c-p-t {
180 |   height: 35px;
181 |   width: 35px;
182 |   pointer-events: none;
183 | }
184 | 
185 | .v3-c-p.v3-c-p-small {
186 |   height: 30px;
187 | }
188 | 
189 | .v3-c-p.v3-c-p-small .c-p-t {
190 |   height: 30px;
191 |   width: 30px;
192 |   pointer-events: none;
193 | }
194 | 
195 | .v3-c-p.v3-c-p-mini {
196 |   height: 26px;
197 | }
198 | 
199 | .v3-c-p.v3-c-p-mini .c-p-t {
200 |   height: 26px;
201 |   width: 26px;
202 |   pointer-events: none;
203 | }
204 | 
205 | .v3-c-p .c-p-t {
206 |   display: inline-block;
207 |   box-sizing: border-box;
208 |   height: 40px;
209 |   width: 40px;
210 |   padding: 5px;
211 |   border: 1px solid #e6e6e6;
212 |   border-radius: 5px;
213 |   font-size: 0;
214 |   position: relative;
215 |   cursor: pointer;
216 |   pointer-events: none;
217 | }
218 | 
219 | .v3-c-p .c-p-c {
220 |   position: relative;
221 |   display: block;
222 |   box-sizing: border-box;
223 |   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
224 |   border: 1px solid #909399;
225 |   border-radius: 3px;
226 |   width: 100%;
227 |   height: 100%;
228 |   text-align: center;
229 |   pointer-events: none;
230 | }
231 | 
232 | .v3-c-p .c-p-c-i {
233 |   position: absolute;
234 |   left: 0;
235 |   top: 0;
236 |   right: 0;
237 |   bottom: 0;
238 |   pointer-events: none;
239 | }
240 | 
241 | .v3-c-p .c-p-i {
242 |   display: inline-block;
243 |   position: absolute;
244 |   width: 100%;
245 |   top: 50%;
246 |   left: 50%;
247 |   transform: translate(-50%, -50%);
248 |   text-align: center;
249 |   pointer-events: none;
250 | }
251 | 
252 | .c-p-i .icon {
253 |   fill: #fff;
254 |   width: 22px;
255 |   height: 22px;
256 | }
257 | 
258 | .color-fade-enter-active,
259 | .color-fade-leave-active {
260 |   transition: opacity 0.15s ease-in-out;
261 | }
262 | .color-fade-enter-from,
263 | .color-fade-leave-to {
264 |   opacity: 0;
265 | }
266 | </style>
267 | 


--------------------------------------------------------------------------------
/src/component/ColorValue.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="color-value">
  3 |     <div :style="{ width: `${valueWidth}px` }">
  4 |       <div v-if="format === 'hex'">
  5 |         <input
  6 |           type="text"
  7 |           :style="{ width: `${inputWidth}px` }"
  8 |           @input="onHexInput"
  9 |           v-model="hexValue"
 10 |         />
 11 |       </div>
 12 |       <div v-else-if="format === 'rgb'">
 13 |         <input
 14 |           type="text"
 15 |           :style="{ width: `${inputWidth}px` }"
 16 |           @input="onRgbaInput"
 17 |           v-model="rgbaValue.r"
 18 |         />
 19 |         <input
 20 |           type="text"
 21 |           :style="{ width: `${inputWidth}px` }"
 22 |           @input="onRgbaInput"
 23 |           v-model="rgbaValue.g"
 24 |         />
 25 |         <input
 26 |           type="text"
 27 |           :style="{ width: `${inputWidth}px` }"
 28 |           @input="onRgbaInput"
 29 |           v-model="rgbaValue.b"
 30 |         />
 31 |         <input
 32 |           type="text"
 33 |           :style="{ width: `${inputWidth}px` }"
 34 |           @input="onRgbaInput"
 35 |           v-model="rgbaValue.a"
 36 |         />
 37 |       </div>
 38 |       <div v-else>
 39 |         <input
 40 |           type="text"
 41 |           :style="{ width: `${inputWidth}px` }"
 42 |           @input="onHslaInput"
 43 |           v-model="hslaValue.h"
 44 |         />
 45 |         <input
 46 |           type="text"
 47 |           :style="{ width: `${inputWidth}px` }"
 48 |           @input="onHslaInput"
 49 |           v-model="hslaValue.s"
 50 |         />
 51 |         <input
 52 |           type="text"
 53 |           :style="{ width: `${inputWidth}px` }"
 54 |           @input="onHslaInput"
 55 |           v-model="hslaValue.l"
 56 |         />
 57 |         <input
 58 |           type="text"
 59 |           :style="{ width: `${inputWidth}px` }"
 60 |           @input="onHslaInput"
 61 |           v-model="hslaValue.a"
 62 |         />
 63 |       </div>
 64 |       <div v-if="format === 'hex'">
 65 |         <span>十六进制</span>
 66 |       </div>
 67 |       <div v-else>
 68 |         <span>{{ format === "rgb" ? "R" : "H" }}</span>
 69 |         <span>{{ format === "rgb" ? "G" : "S %" }}</span>
 70 |         <span>{{ format === "rgb" ? "B" : "L %" }}</span>
 71 |         <span>A</span>
 72 |       </div>
 73 |     </div>
 74 |     <svg class="icon" viewBox="0 0 1024 1024" @click.stop="onClick">
 75 |       <path
 76 |         d="M718.73545078 589.39849389H305.26454922c-20.36802471 0-32.58883953 13.23921607-22.40482717 23.42322842 15.27601854 16.29441978 197.56983966 206.73545078 206.73545077 215.90106188 11.20241359 12.22081482 35.64404324 10.18401235 45.8280556 0C542.55203706 821.59397555 729.93786436 624.02413589 741.14027795 612.82172231c10.18401235-11.20241359-3.05520371-22.40482718-22.40482718-23.42322842zM305.26454922 434.60150611h413.47090156c19.34962348 0 32.58883953-12.22081482 22.40482717-23.42322842-11.20241359-11.20241359-198.5882409-208.77225325-206.73545077-216.91946312-9.16561112-10.18401235-33.60724077-11.20241359-45.8280556 0C480.42956171 204.44282693 298.13574057 394.88385793 282.85972205 411.17827769c-10.18401235 10.18401235 2.03680247 23.42322842 22.40482718 23.42322842z"
 77 |       />
 78 |     </svg>
 79 |   </div>
 80 | </template>
 81 | 
 82 | <script>
 83 | import { computed, defineComponent, ref, watch } from "vue";
 84 | 
 85 | const formatList = ["hex", "rgb", "hsl"];
 86 | 
 87 | export default defineComponent({
 88 |   name: "ColorValue",
 89 |   props: {
 90 |     value: {
 91 |       type: Object,
 92 |       required: true
 93 |     },
 94 |     width: {
 95 |       type: Number,
 96 |       default: 230,
 97 |     },
 98 |   },
 99 |   setup(props) {
100 |     const format = computed(() => props.value.get("f"));
101 |     const formatIndex = ref(formatList.indexOf(format.value));
102 |     const valueWidth = computed(() => props.width - 21);
103 |     const inputWidth = computed(() => (format.value === "hex" ? valueWidth.value - 15 : valueWidth.value / 4) - 15);
104 | 
105 |     const hexValue = ref(props.value.hex);
106 |     const rgbaValue = ref(props.value.rgba);
107 |     const hslaValue = ref(props.value.hsla);
108 |     function onClick() {
109 |       formatIndex.value = (formatIndex.value + 1) % 3;
110 |       props.value.set("f", formatList[formatIndex.value]);
111 |     }
112 | 
113 |     function onHexInput() {
114 |       if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{8}$/.test(hexValue.value.replace("#", "").trim())) {
115 |         return;
116 |       }
117 |       props.value.format(hexValue.value);
118 |     }
119 | 
120 |     function onRgbaInput() {
121 |       const n = rgbaValue.value;
122 |       const isNull = n.r === "" || n.g === "" || n.b === "" || n.a === "";
123 |       const isNumber = !isNaN(n.r) && !isNaN(n.g) && !isNaN(n.b) && !isNaN(n.a);
124 |       if (isNull || !isNumber) {
125 |         return;
126 |       }
127 |       let r = Math.max(parseInt(n.r), 0);
128 |       r = Math.min(r, 255);
129 |       let g = Math.max(parseInt(n.g), 0);
130 |       g = Math.min(g, 255);
131 |       let b = Math.max(parseInt(n.b), 0);
132 |       b = Math.min(b, 255);
133 |       let a = Math.max(parseFloat(n.a), 0);
134 |       a = Math.min(a, 1);
135 |       props.value.format(`rgba(${r},${g},${b},${a})`);
136 |     }
137 | 
138 |     function onHslaInput() {
139 |       const n = hslaValue.value;
140 |       const isNull = n.h === "" || n.s === "" || n.l === "" || n.a === "";
141 |       const isNumber = !isNaN(n.h) && !isNaN(n.s) && !isNaN(n.l) && !isNaN(n.a);
142 |       if (isNull || !isNumber) {
143 |         return;
144 |       }
145 |       let h = Math.max(parseInt(n.h), 0);
146 |       h = Math.min(h, 360);
147 |       let s = Math.max(parseInt(n.s), 0);
148 |       s = Math.min(s, 100);
149 |       let l = Math.max(parseInt(n.l), 0);
150 |       l = Math.min(l, 100);
151 |       let a = Math.max(parseFloat(n.a), 0);
152 |       a = Math.min(a, 1);
153 |       props.value.format(`hsla(${h},${s},${l},${a})`)
154 |     }
155 | 
156 |     watch(() => props.value.v, () => {
157 |       if (format.value === "hex") {
158 |         hexValue.value = props.value.hex;
159 |       }
160 |       if (format.value === "rgb") {
161 |         rgbaValue.value = props.value.rgba;
162 |       }
163 |       if (format.value === "hsl") {
164 |         hslaValue.value = props.value.hsla;
165 |       }
166 |     })
167 | 
168 |     return {
169 |       format,
170 |       valueWidth,
171 |       inputWidth,
172 |       hexValue,
173 |       onHexInput,
174 |       rgbaValue,
175 |       onRgbaInput,
176 |       hslaValue,
177 |       onHslaInput,
178 |       onClick
179 |     }
180 |   }
181 | })
182 | </script>
183 | 
184 | <style>
185 | .color-value {
186 |   padding: 3px 0;
187 |   display: flex;
188 | }
189 | 
190 | .color-value > div > div:first-child,
191 | .color-value > div > div:last-child {
192 |   display: flex;
193 |   justify-content: space-around;
194 | }
195 | 
196 | .color-value > div input {
197 |   font-size: 12px;
198 |   height: 15px;
199 |   line-height: 15px;
200 |   text-align: center;
201 | }
202 | 
203 | .color-value > div > div:last-child > span {
204 |   margin-top: 3px;
205 |   font-size: 12px;
206 |   color: #fff;
207 | }
208 | 
209 | .color-value .icon {
210 |   margin-top: -2px;
211 |   fill: #eee;
212 |   width: 21px;
213 |   height: 21px;
214 |   cursor: pointer;
215 | }
216 | 
217 | .color-value .icon:hover {
218 |   fill: #1593ff;
219 | }
220 | 
221 | .color-value > div input:focus {
222 |   outline: none;
223 | }
224 | 
225 | .color-picker-light .color-value .icon {
226 |   fill: #555;
227 | }
228 | 
229 | .color-picker-light .color-value > div > div:last-child > span {
230 |   color: #555;
231 | }
232 | </style>
233 | 


--------------------------------------------------------------------------------
/src/color.js:
--------------------------------------------------------------------------------
  1 | export default class Color {
  2 |   _h = 0;
  3 |   _s = 100;
  4 |   _v = 100;
  5 |   _a = 100;
  6 |   _f = "hex";
  7 |   v = "#fff";
  8 |   s = false;
  9 | 
 10 |   constructor (color) {
 11 |     if (color) {
 12 |       this._f = checkIsColor(wordToRgb(color));
 13 |       this.format(color);
 14 |     }
 15 |   }
 16 | 
 17 |   format(color, _f) {
 18 |     if (!color) {
 19 |       this._h = 0
 20 |       this._s = 100
 21 |       this._v = 100
 22 |       this.update();
 23 |     } else {
 24 |       const fromHsv = (h, s, v) => {
 25 |         this._h = Math.max(0, Math.min(360, h));
 26 |         this._s = Math.max(0, Math.min(100, s));
 27 |         this._v = Math.max(0, Math.min(100, v));
 28 |         this.update();
 29 |       }
 30 |       switch (checkIsColor(wordToRgb(color))) {
 31 |         case "hex":
 32 |           this._hex(color, fromHsv);
 33 |           break;
 34 |         case "rgb":
 35 |           this._rgba(color, fromHsv);
 36 |           break;
 37 |         case "hsl":
 38 |           this._hsla(color, fromHsv);
 39 |           break;
 40 |         default:
 41 |           throw Error(`非法颜色值--->${color}`);
 42 |       }
 43 |     }
 44 |   }
 45 | 
 46 |   _hsla(hsla, fromHsv) {
 47 |     hsla = strToArry(hsla, /hsla|hsl|\(|\)/gm);
 48 |     if (hsla.length === 4) {
 49 |       this._a = Math.floor(parseFloat(hsla[3]) * 100);
 50 |     } else if (hsla.length === 3) {
 51 |       this._a = 100;
 52 |     }
 53 |     if (hsla.length >= 3) {
 54 |       const { h, s, v } = hslToHsv(hsla[0], hsla[1], hsla[2]);
 55 |       fromHsv(h, s, v);
 56 |     }
 57 |   }
 58 | 
 59 |   _rgba(rgba, fromHsv) {
 60 |     rgba = strToArry(rgba, /rgba|rgb|\(|\)/gm);
 61 |     if (rgba.length === 4) {
 62 |       this._a = Math.floor(parseFloat(rgba[3]) * 100);
 63 |     } else if (rgba.length === 3) {
 64 |       this._a = 100;
 65 |     }
 66 |     if (rgba.length >= 3) {
 67 |       const { h, s, v } = rgbToHsv(rgba[0], rgba[1], rgba[2]);
 68 |       fromHsv(h, s, v);
 69 |     }
 70 |   }
 71 | 
 72 |   _hex(hex, fromHsv) {
 73 |     hex = hex.replace("#", "").trim();
 74 |     let { r, g, b } = hexToRgb(hex);
 75 |     if (hex.length === 8) {
 76 |       this._a = Math.floor(parseInt(hex.substring(6), 16) / 255 * 100);
 77 |     } else if (hex.length === 3 || hex.length === 6) {
 78 |       this._a = 100;
 79 |     }
 80 |     const { h, s, v } = rgbToHsv(r, g, b);
 81 |     fromHsv(h, s, v);
 82 |   }
 83 | 
 84 |   set(k, v) {
 85 |     this[`_${k}`] = v;
 86 |     this.update();
 87 |   }
 88 | 
 89 |   get(k) {
 90 |     return this[`_${k}`];
 91 |   }
 92 | 
 93 |   update() {
 94 |     const { _h, _s, _v, _a, _f } = this;
 95 |     switch (_f) {
 96 |       case "rgb": {
 97 |         const { r, g, b } = hsvToRgb(_h, _s, _v);
 98 |         this.v = _a === 100 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${_a / 100})`;
 99 |         break;
100 |       }
101 |       case "hsl": {
102 |         const hsl = hsvToHsl(_h, _s / 100, _v / 100);
103 |         this.v = _a === 100 ? `hsl(${Math.round(_h)}, ${Math.round(hsl[0] * 100)}%, ${Math.round(hsl[1] * 100)}%)` :
104 |           `hsla(${Math.round(_h)}, ${Math.round(hsl[0] * 100)}%, ${Math.round(hsl[1] * 100)}%, ${_a / 100})`;
105 |         break;
106 |       }
107 |       default: {
108 |         const hex = rgbToHex(hsvToRgb(_h, _s, _v));
109 |         const alpha = Math.round(this._a / 100 * 255);
110 |         this.v = _a === 100 ? hex : `${hex}${alpha <= 16 ? "0" : ""}${alpha.toString(16)}`;
111 |         break;
112 |       }
113 |     }
114 |   }
115 | 
116 |   get hsla() {
117 |     const { _h, _s, _v, _a } = this;
118 |     const hsl = hsvToHsl(_h, _s / 100, _v / 100);
119 |     return {
120 |       h: Math.round(_h), s: Math.round(hsl[0] * 100), l: Math.round(hsl[1] * 100), a: _a / 100
121 |     }
122 |   }
123 | 
124 |   get rgba() {
125 |     const { _h, _s, _v, _a } = this;
126 |     const { r, g, b } = hsvToRgb(_h, _s, _v);
127 |     return {
128 |       r, g, b, a: _a / 100
129 |     };
130 |   }
131 | 
132 |   get hex() {
133 |     const { _h, _s, _v, _a } = this;
134 |     const hex = rgbToHex(hsvToRgb(_h, _s, _v));
135 |     const alpha = Math.round(this._a / 100 * 255);
136 |     return _a === 100 ? hex : `${hex}${alpha <= 16 ? "0" : ""}${alpha.toString(16)}`;
137 |   }
138 | }
139 | 
140 | function strToArry(color, reg) {
141 |   return color
142 |     .replace(reg, "")
143 |     .split(/\s|,/g)
144 |     .filter((v) => v !== "")
145 |     .map((v, i) => (i > 2 ? parseFloat(v) : parseInt(v, 10)))
146 | }
147 | 
148 | const hsvToHsl = function (h, s, v) {
149 |   return [(s * v) / ((h = (2 - s) * v) < 1 ? h : 2 - h) || 0, h / 2];
150 | }
151 | 
152 | function hslToHsv(h, s, l) {
153 |   s = s / 100;
154 |   l = l / 100;
155 |   let smin = s;
156 |   const lmin = Math.max(l, 0.01);
157 |   l *= 2;
158 |   s *= l <= 1 ? l : 2 - l
159 |   smin *= lmin <= 1 ? lmin : 2 - lmin;
160 |   const v = (l + s) / 2;
161 |   const sv = s === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
162 |   return {
163 |     h,
164 |     s: sv * 100,
165 |     v: v * 100,
166 |   }
167 | }
168 | 
169 | function hsvToRgb(h, s, v) {
170 |   h = limit(h, 360) * 6;
171 |   s = limit(s, 100);
172 |   v = limit(v, 100);
173 |   const i = Math.floor(h);
174 |   const f = h - i;
175 |   const p = v * (1 - s);
176 |   const q = v * (1 - f * s);
177 |   const t = v * (1 - (1 - f) * s);
178 |   const mod = i % 6;
179 |   const r = [v, q, p, p, t, v][mod];
180 |   const g = [t, v, v, q, p, p][mod];
181 |   const b = [p, p, t, v, v, q][mod];
182 |   return {
183 |     r: Math.round(r * 255),
184 |     g: Math.round(g * 255),
185 |     b: Math.round(b * 255),
186 |   }
187 | }
188 | 
189 | function rgbToHsv(r, g, b) {
190 |   r = limit(r, 255);
191 |   g = limit(g, 255);
192 |   b = limit(b, 255);
193 |   const v = Math.max(r, g, b);
194 |   let h, s;
195 |   const diff = v - Math.min(r, g, b);
196 |   if (diff === 0) {
197 |     h = s = 0;
198 |   } else {
199 |     s = diff / v;
200 |     const diffc = function (c) {
201 |       return (v - c) / 6 / diff + 1 / 2;
202 |     };
203 |     switch (v) {
204 |       case r: {
205 |         h = diffc(b) - diffc(g);
206 |         break
207 |       }
208 |       case g: {
209 |         h = (1 / 3) + diffc(r) - diffc(b);
210 |         break
211 |       }
212 |       case b: {
213 |         h = (2 / 3) + diffc(g) - diffc(r);
214 |         break
215 |       }
216 |     }
217 |     h < 0 ? h += 1 : h > 1 ? h -= 1 : h;
218 |   }
219 |   return { h: h * 360, s: s * 100, v: v * 100 }
220 | }
221 | 
222 | function limit(v, max) {
223 |   v = typeof v === "string" && v.indexOf('.') !== -1 && parseFloat(v) === 1 ? "100%" : v;
224 |   v = Math.min(max, Math.max(0, parseFloat(`${v}`)))
225 |   v = typeof n === "string" && n.indexOf('%') !== -1 ? parseInt(`${v * (max)}`, 10) / 100 : v;
226 |   return Math.abs(v - (max)) < 0.000001 ? 1 : (v % (max)) / parseFloat(max);
227 | }
228 | 
229 | function hexToRgb(hex) {
230 |   if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{8}$/.test(hex)) {
231 |     throw Error(`非法颜色值--->${hex}`);
232 |   }
233 |   let r, g, b;
234 |   if (hex.length === 3) {
235 |     r = parseInt(hex[0] + hex[0], 16);
236 |     g = parseInt(hex[1] + hex[1], 16);
237 |     b = parseInt(hex[2] + hex[2], 16);
238 |   } else if (hex.length === 6 || hex.length === 8) {
239 |     r = parseInt(hex.substring(0, 2), 16);
240 |     g = parseInt(hex.substring(2, 4), 16);
241 |     b = parseInt(hex.substring(4, 6), 16);
242 |   }
243 |   return {
244 |     r, g, b
245 |   };
246 | }
247 | 
248 | function rgbToHex({ r, g, b }) {
249 |   function hex(x) {
250 |     return ("0" + parseInt(x).toString(16)).slice(-2);
251 |   }
252 |   return (isNaN(r) || isNaN(g) || isNaN(b)) ? "" : `#${hex(r)}${hex(g)}${hex(b)}`.toUpperCase();
253 | }
254 | 
255 | function checkIsColor(color) {
256 |   if (/^#/.test(color)) {
257 |     return "hex";
258 |   } else if (/^rgb\(/.test(color) || /^rgba\(/.test(color)) {
259 |     return "rgb";
260 |   } else if (/^hsl\(/.test(color) || /^hsla\(/.test(color)) {
261 |     return "hsl";
262 |   }
263 |   throw Error(`错误的颜色参数--->${color}`);
264 | }
265 | 
266 | function wordToRgb(color) {
267 |   const colors = {
268 |     red: "rgba(255, 0, 0, 1)",
269 |     green: "rgba(0, 128, 0, 1)",
270 |     blue: "rgba(0, 0, 255, 1)",
271 |     magenta: "rgba(255, 0, 255, 1)",
272 |     yellow: "rgba(255, 255, 0, 1)",
273 |     chocolate: "rgba(210, 105, 30, 1)",
274 |     black: "rgba(0, 0, 0, 1)",
275 |     aquamarine: "rgba(127, 255, 212, 1)",
276 |     lime: "rgba(0, 255, 0, 1)",
277 |     fuchsia: "rgba(255, 0, 255, 1)",
278 |     brass: "rgba(176, 160, 0, 1)",
279 |     azure: "rgba(240, 255, 255, 1)",
280 |     brown: "rgba(255, 127, 80, 1)",
281 |     bronze: "rgba(254, 208, 160, 1)",
282 |     deeppink: "rgba(255, 20, 147, 1)",
283 |     aliceblue: "rgba(240, 248, 255, 1)",
284 |     gray: "rgba(128, 128, 128, 1)",
285 |     copper: "rgba(192, 0, 224, 1)",
286 |     coral: "rgba(255, 127, 80, 1)",
287 |     feldspar: "rgba(254, 208, 160, 1)",
288 |     orange: "rgba(255, 165, 0, 1)",
289 |     orchid: "rgba(255, 165, 0, 1)",
290 |     pink: "rgba(255, 165, 0, 1)",
291 |     plum: "rgba(221, 160, 221, 1)",
292 |     quartz: "rgba(0, 160, 0, 1)",
293 |     purple: "rgba(128, 0, 128, 1)",
294 |     aliceblue: "rgba(240, 248, 255, 1)",
295 |     antiquewith: "rgba(160, 0, 0, 1)",
296 |     blanchedalmond: "rgba(255, 235, 205, 1)",
297 |     blueviolet: "rgba(138, 43, 226, 1)",
298 |     beige: "rgba(245, 245, 220, 1)",
299 |     burlywood: "rgba(222, 184, 135, 1)",
300 |     bisque: "rgba(255, 228, 196, 1)",
301 |     cadetblue: "rgba(95, 158, 160, 1)",
302 |     pink: "rgba(255, 192, 203, 1)",
303 |     saddlebrown: "rgba(139, 69, 19, 1)",
304 |     royalblue: "rgba(65, 105, 225, 1)",
305 |     rosybrown: "rgba(188, 143, 143, 1)",
306 |     purple: "rgba(128, 0, 128, 1)",
307 |     orengered: "rgba(14, 14, 237, 1)",
308 |     olivedrab: "rgba(107, 142, 35, 1)",
309 |     powderblue: "rgba(176, 224, 230, 1)",
310 |     peachpuff: "rgba(255, 218, 185, 1)",
311 |     papayawhip: "rgba(255, 239, 213, 1)",
312 |     paleturquoise: "rgba(175, 238, 238, 1)",
313 |     palevioletred: "rgba(219, 112, 147, 1)",
314 |     palegreen: "rgba(152, 251, 152, 1)",
315 |     navyblue: "rgba(160, 176, 224, 1)",
316 |     navajowhite: "rgba(255, 222, 173, 1)",
317 |     palegodenrod: "rgba(160, 13, 0, 1)",
318 |     violetred: "rgba(0, 224, 237, 1)",
319 |     yellowgreen: "rgba(154, 205, 50, 1)",
320 |     tomato: "rgba(255, 99, 71, 1)",
321 |     turquoise: "rgba(64, 224, 208, 1)",
322 |     thistle: "rgba(216, 191, 216, 1)",
323 |     springgreen: "rgba(0, 255, 127, 1)",
324 |     steelblue: "rgba(70, 130, 180, 1)",
325 |     salmon: "rgba(250, 128, 114, 1)",
326 |     scarlet: "rgba(202, 14, 0, 1)",
327 |     sienna: "rgba(160, 82, 45, 1)",
328 |     silver: "rgba(192, 192, 192, 1)",
329 |     tan: "rgba(210, 180, 140, 1)",
330 |     thistle: "rgba(216, 191, 216, 1)",
331 |     turquoise: "rgba(64, 224, 208, 1)",
332 |     violet: "rgba(238, 130, 238, 1)",
333 |     snow: "rgba(255, 250, 250, 1)",
334 |     salmon: "rgba(250, 128, 114, 1)",
335 |     scarlet: "rgba(202, 14, 0, 1)",
336 |     sienna: "rgba(160, 82, 45, 1)",
337 |     silver: "rgba(192, 192, 192, 1)",
338 |     thistle: "rgba(216, 191, 216, 1)",
339 |     turquoise: "rgba(64, 224, 208, 1)",
340 |     violet: "rgba(238, 130, 238, 1)",
341 |     chartreuse: "rgba(127, 255, 0, 1)",
342 |     firebrick: "rgba(178, 34, 34, 1)",
343 |     gold: "rgba(255, 215, 0, 1)",
344 |     khaki: "rgba(240, 230, 140, 1)",
345 |     mediumslateblue: "rgba(123, 104, 238, 1)",
346 |     mediumvioletred: "rgba(199, 21, 133, 1)",
347 |     oldlace: "rgba(253, 245, 230, 1)",
348 |     maroom: "rgba(10, 0, 0, 1)",
349 |     goldenrod: "rgba(218, 165, 32, 1)",
350 |     wheat: "rgba(245, 222, 179, 1)",
351 |     whitesmoke: "rgba(245, 245, 245, 1)",
352 |     orange: "rgba(255, 165, 0, 1)",
353 |     moccasin: "rgba(255, 228, 181, 1)",
354 |     mistyrose: "rgba(255, 228, 225, 1)",
355 |     mintcream: "rgba(245, 255, 250, 1)",
356 |     midnightblue: "rgba(25, 25, 112, 1)",
357 |     dimgray: "rgba(105, 105, 105, 1)",
358 |     darksalmon: "rgba(233, 150, 122, 1)",
359 |     slategray: "rgba(112, 128, 144, 1)",
360 |     skyblue: "rgba(135, 206, 235, 1)",
361 |     sienna: "rgba(160, 82, 45, 1)",
362 |     seashell: "rgba(255, 245, 238, 1)",
363 |     salmon: "rgba(250, 128, 114, 1)",
364 |     seagreen: "rgba(46, 139, 87, 1)",
365 |     sandybrown: "rgba(244, 164, 96, 1)",
366 |     firebrick: "rgba(178, 34, 34, 1)",
367 |     gold: "rgba(255, 215, 0, 1)",
368 |     khaki: "rgba(240, 230, 140, 1)",
369 |     maroom: "rgba(10, 0, 0, 1)",
370 |     goldenrod: "rgba(218, 165, 32, 1)",
371 |     wheat: "rgba(245, 222, 179, 1)",
372 |     whitesmoke: "rgba(245, 245, 245, 1)",
373 |     mediumturquoise: "rgba(72, 209, 204, 1)",
374 |     navy: "rgba(0, 0, 128, 1)",
375 |     mediumspringgreen: "rgba(0, 250, 154, 1)",
376 |     mediumseagreen: "rgba(60, 179, 113, 1)",
377 |     mediumpurpul: "rgba(237, 0, 0, 1)",
378 |     peru: "rgba(205, 133, 63, 1)",
379 |     mediumorchid: "rgba(186, 85, 211, 1)",
380 |     mediumblue: "rgba(0, 0, 205, 1)",
381 |     mediumaquamarine: "rgba(102, 205, 170, 1)",
382 |     maroon: "rgba(128, 0, 0, 1)",
383 |     limegreen: "rgba(50, 205, 50, 1)",
384 |     lightyellow: "rgba(255, 255, 224, 1)",
385 |     lightsteelblue: "rgba(176, 196, 222, 1)",
386 |     magenta: "rgba(255, 0, 255, 1)",
387 |     lightslateblue: "rgba(0, 0, 176, 1)",
388 |     lightslategray: "rgba(119, 136, 153, 1)",
389 |     lightskyblue: "rgba(135, 206, 250, 1)",
390 |     inen: "rgba(0, 224, 0, 1)",
391 |     lightseagreen: "rgba(32, 178, 170, 1)",
392 |     lightsalmon: "rgba(255, 160, 122, 1)",
393 |     lightpink: "rgba(255, 182, 193, 1)",
394 |     plum: "rgba(221, 160, 221, 1)",
395 |     lightgray: "rgba(0, 0, 160, 1)",
396 |     lightgreen: "rgba(144, 238, 144, 1)",
397 |     lightgodenrodyellow: "rgba(0, 222, 224, 1)",
398 |     indianred: "rgba(205, 92, 92, 1)",
399 |     lavender: "rgba(230, 230, 250, 1)",
400 |     lightblue: "rgba(173, 216, 230, 1)",
401 |     lavenderblush: "rgba(255, 240, 245, 1)",
402 |     lightcoral: "rgba(240, 128, 128, 1)",
403 |     lightcyan: "rgba(224, 255, 255, 1)",
404 |     lightgodenrod: "rgba(0, 222, 208, 1)",
405 |     hotpink: "rgba(255, 105, 180, 1)",
406 |     greenyellow: "rgba(173, 255, 47, 1)",
407 |     lemonchiffon: "rgba(255, 250, 205, 1)",
408 |     lawngreen: "rgba(124, 252, 0, 1)",
409 |     khaki: "rgba(240, 230, 140, 1)",
410 |     deepskyblue: "rgba(0, 191, 255, 1)",
411 |     honeydew: "rgba(240, 255, 240, 1)",
412 |     golenrod: "rgba(0, 224, 13, 1)",
413 |     forestgreen: "rgba(34, 139, 34, 1)",
414 |     gostwhite: "rgba(0, 0, 14, 1)",
415 |     greenyellow: "rgba(173, 255, 47, 1)",
416 |     gainsboro: "rgba(220, 220, 220, 1)",
417 |     firebrick: "rgba(178, 34, 34, 1)",
418 |     dodgerblue: "rgba(30, 144, 255, 1)",
419 |     darkturquoise: "rgba(0, 206, 209, 1)",
420 |     darkslateblue: "rgba(72, 61, 139, 1)",
421 |     darkslategray: "rgba(47, 79, 79, 1)",
422 |     darkseagreen: "rgba(143, 188, 143, 1)",
423 |     darkred: "rgba(139, 0, 0, 1)",
424 |     darkorchid: "rgba(153, 50, 204, 1)",
425 |     darkorenge: "rgba(218, 0, 14, 1)",
426 |     darkslateblue: "rgba(72, 61, 139, 1)",
427 |     darkviolet: "rgba(148, 0, 211, 1)",
428 |     floralwhite: "rgba(255, 250, 240, 1)",
429 |     cyan: "rgba(0, 255, 255, 1)",
430 |     'bisque darkgray': "rgba(255, 228, 196, 1)",
431 |     cornsilk: "rgba(255, 248, 220, 1)",
432 |     darkolivegreen: "rgba(255, 248, 220, 1)",
433 |     darkgoldenrod: "rgba(184, 134, 11, 1)",
434 |     darkblue: "rgba(0, 0, 139, 1)",
435 |     darkcyan: "rgba(0, 139, 139, 1)",
436 |     darkgreen: "rgba(0, 100, 0, 1)",
437 |     darkhaki: "rgba(218, 0, 0, 1)",
438 |     ivory: "rgba(255, 255, 240, 1)",
439 |     darkmagenta: "rgba(139, 0, 139, 1)",
440 |     darkgray: "rgba(169, 169, 169, 1)",
441 |     cornfloewrblue: "rgba(192, 0, 176, 1)",
442 |     cornfloewrblue: "rgba(192, 0, 176, 1)",
443 |     darkviolet: "rgba(148, 0, 211, 1)",
444 |     floralwhite: "rgba(255, 250, 240, 1)",
445 |     darkslategray: "rgba(47, 79, 79, 1)",
446 |     darkseagreen: "rgba(143, 188, 143, 1)",
447 |     darkred: "rgba(139, 0, 0, 1)",
448 |     darkorchid: "rgba(153, 50, 204, 1)",
449 |     darkorenge: "rgba(218, 0, 14, 1)",
450 |     darkslateblue: "rgba(72, 61, 139, 1)",
451 |   }
452 |   if (colors[color]) {
453 |     color = colors[color];
454 |   }
455 |   return color;
456 | }
457 | 


--------------------------------------------------------------------------------