├── .eslintrc.js
├── .gitignore
├── .npmrc
├── .prettierignore
├── .prettierrc.js
├── README.md
├── build
    └── gh.js
├── demo
    ├── App.vue
    ├── cover.jpg
    ├── index.ejs
    └── index.js
├── env
    ├── gh.js
    └── pro.js
├── package.json
├── postcss.config.js
├── src
    ├── color
    │   ├── Alpha.vue
    │   ├── Box.vue
    │   ├── Colors.vue
    │   ├── Hue.vue
    │   ├── Index.vue
    │   ├── Preview.vue
    │   ├── Saturation.vue
    │   ├── Sucker.vue
    │   └── mixin.js
    ├── img
    │   ├── paypal.png
    │   ├── preview-dark.jpg
    │   ├── preview-light.jpg
    │   ├── sucker.png
    │   └── wechat.jpg
    └── index.js
├── webpack.config.js
└── yarn.lock


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     env: {
 3 |         browser: true,
 4 |         node: true,
 5 |         commonjs: true,
 6 |         es6: true
 7 |     },
 8 |     extends: ['eslint:recommended', 'plugin:vue/recommended'],
 9 |     parserOptions: {
10 |         ecmaVersion: 2018,
11 |         sourceType: 'module'
12 |     },
13 |     plugins: [
14 |         // 'html'
15 |         // 'vue'
16 |     ],
17 |     globals: {
18 |         Vue: true
19 |     },
20 |     rules: {
21 |         indent: [
22 |             'error',
23 |             4,
24 |             {
25 |                 SwitchCase: 1
26 |             }
27 |         ],
28 |         'linebreak-style': ['error', 'unix'],
29 |         quotes: ['error', 'single'],
30 |         semi: ['error', 'never'],
31 |         'vue/html-indent': ['error', 4],
32 |         'vue/object-curly-spacing': ['error', 'always'],
33 |         'object-curly-spacing': ['error', 'always']
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | .vscode/
3 | node_modules/
4 | bower_components/
5 | dist/
6 | zip/
7 | *.log*
8 | env/local*
9 | .DS_Store


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | sass_binary_site=https://npm.taobao.org/mirrors/node-sass/


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # *.js


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     // printWidth: 1000,
3 |     tabWidth: 4,
4 |     singleQuote: true,
5 |     semi: false
6 | }
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-colorpicker
  2 | 
  3 | ## [LiveDemo](https://caohenghu.github.io/vue-colorpicker/)
  4 | 
  5 | ![preview-dark](https://raw.githubusercontent.com/caohenghu/vue-colorpicker/master/src/img/preview-dark.jpg)
  6 | ![preview-light](https://raw.githubusercontent.com/caohenghu/vue-colorpicker/master/src/img/preview-light.jpg)
  7 | 
  8 | ## Install
  9 | 
 10 | ```bash
 11 | $ npm install @caohenghu/vue-colorpicker
 12 | ```
 13 | 
 14 | ```bash
 15 | $ yarn add @caohenghu/vue-colorpicker
 16 | ```
 17 | 
 18 | ```bash
 19 | $ pnpm add @caohenghu/vue-colorpicker
 20 | ```
 21 | 
 22 | ## Example
 23 | 
 24 | ```html
 25 | <template>
 26 |     <div :style="{background: color}">
 27 |         <color-picker
 28 |             theme="light"
 29 |             :color="color"
 30 |             :sucker-hide="false"
 31 |             :sucker-canvas="suckerCanvas"
 32 |             :sucker-area="suckerArea"
 33 |             @changeColor="changeColor"
 34 |             @openSucker="openSucker"
 35 |         />
 36 |     </div>
 37 | </template>
 38 | 
 39 | <script>
 40 |     import colorPicker from '@caohenghu/vue-colorpicker'
 41 | 
 42 |     export default {
 43 |         components: {
 44 |             colorPicker,
 45 |         },
 46 |         data() {
 47 |             return {
 48 |                 color: '#59c7f9',
 49 |                 suckerCanvas: null,
 50 |                 suckerArea: [],
 51 |                 isSucking: false,
 52 |             }
 53 |         },
 54 |         methods: {
 55 |             changeColor(color) {
 56 |                 const { r, g, b, a } = color.rgba
 57 |                 this.color = `rgba(${r}, ${g}, ${b}, ${a})`
 58 |             },
 59 |             openSucker(isOpen) {
 60 |                 if (isOpen) {
 61 |                     // ... canvas be created
 62 |                     // this.suckerCanvas = canvas
 63 |                     // this.suckerArea = [x1, y1, x2, y2]
 64 |                 } else {
 65 |                     // this.suckerCanvas && this.suckerCanvas.remove
 66 |                 }
 67 |             },
 68 |         },
 69 |     }
 70 | </script>
 71 | ```
 72 | 
 73 | ## Options
 74 | 
 75 | | Name               | Type              | Default                                                                                                                                                                                  | Description                             |
 76 | | ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
 77 | | theme              | String            | `dark`                                                                                                                                                                                   | `dark` or `light`                       |
 78 | | color              | String            | `#000000`                                                                                                                                                                                | `rgba` or `hex`                         |
 79 | | 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', ...]`      |
 80 | | colors-history-key | String            | `vue-colorpicker-history`                                                                                                                                                                |
 81 | | sucker-hide        | Boolean           | `true`                                                                                                                                                                                   | `true` or `false`                       |
 82 | | sucker-canvas      | HTMLCanvasElement | `null`                                                                                                                                                                                   | like `document.createElement('canvas')` |
 83 | | sucker-area        | Array             | `[]`                                                                                                                                                                                     | like `[x1, y1, x2, y2]`                 |
 84 | 
 85 | `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.
 86 | 
 87 | ## Events
 88 | 
 89 | | Name        | Type     | Args   | Description                     |
 90 | | ----------- | -------- | ------ | ------------------------------- |
 91 | | changeColor | Function | color  | `{ rgba: {}, hsv: {}, hex: ''}` |
 92 | | openSucker  | Function | isOpen | `true` or `false`               |
 93 | 
 94 | if you want use sucker, then `openSucker`, `sucker-hide`, `sucker-canvas`, `sucker-area` is necessary. when you click sucker button, you can click it again or press key of `esc` to exit.
 95 | 
 96 | ## Donate
 97 | 
 98 | If this project has helped you,
 99 | please have a cup of coffee for the author.
100 | 
101 | [<img src="https://raw.githubusercontent.com/caohenghu/vue-colorpicker/master/src/img/paypal.png"
102 |       alt="Donate with PayPal"
103 |       height="80">](https://paypal.me/caohenghu?country.x=C2&locale.x=zh_XC)
104 | <img src="https://raw.githubusercontent.com/caohenghu/vue-colorpicker/master/src/img/wechat.jpg"
105 | alt="Donate with wechat"
106 | height="300">
107 | 


--------------------------------------------------------------------------------
/build/gh.js:
--------------------------------------------------------------------------------
1 | const ghpages = require('gh-pages')
2 | 
3 | ghpages.publish('dist')


--------------------------------------------------------------------------------
/demo/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="hu-page">
  3 |         <div class="bg" :style="{ background: color }">
  4 |             <div class="title">
  5 |                 vue-colorpicker
  6 |             </div>
  7 |             <div class="cover">
  8 |                 <color-picker
  9 |                     :theme="theme"
 10 |                     :color="color"
 11 |                     :sucker-hide="false"
 12 |                     :sucker-canvas="suckerCanvas"
 13 |                     :sucker-area="suckerArea"
 14 |                     @changeColor="changeColor"
 15 |                     @openSucker="openSucker"
 16 |                 />
 17 |                 <img v-if="isOpenSucker" ref="cover" />
 18 |             </div>
 19 |         </div>
 20 |         <div class="github">
 21 |             <a
 22 |                 href="https://github.com/caohenghu/vue-colorpicker"
 23 |                 target="_blank"
 24 |             >
 25 |                 Fork me on GitHub
 26 |             </a>
 27 |         </div>
 28 |         <div
 29 |             class="switch"
 30 |             :class="{ 'anim-pull': inAnimation }"
 31 |             @animationend="animationEnd"
 32 |             @click="changeTheme"
 33 |         />
 34 |     </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import colorPicker from '../src'
 39 | import imgCover from './cover.jpg'
 40 | 
 41 | export default {
 42 |     components: {
 43 |         colorPicker
 44 |     },
 45 |     data() {
 46 |         return {
 47 |             color: '#59c7f9',
 48 |             suckerCanvas: null,
 49 |             suckerArea: [],
 50 |             isOpenSucker: false,
 51 |             theme: '',
 52 |             inAnimation: false
 53 |         }
 54 |     },
 55 |     methods: {
 56 |         changeColor(color) {
 57 |             const { r, g, b, a } = color.rgba
 58 |             this.color = `rgba(${r}, ${g}, ${b}, ${a})`
 59 |         },
 60 |         openSucker(isOpen) {
 61 |             this.isOpenSucker = isOpen
 62 |             if (isOpen) {
 63 |                 setTimeout(() => {
 64 |                     const cover = this.$refs.cover
 65 |                     cover.onload = () => {
 66 |                         // 如果已经点击取消了才加载完，则不执行
 67 |                         if (!this.isOpenSucker) {
 68 |                             return
 69 |                         }
 70 |                         const coverRect = cover.getBoundingClientRect()
 71 |                         const canvas = this.createCanvas(cover, coverRect)
 72 |                         document.body.appendChild(canvas)
 73 |                         this.suckerCanvas = canvas
 74 |                         this.suckerArea = [
 75 |                             coverRect.left,
 76 |                             coverRect.top,
 77 |                             coverRect.left + coverRect.width,
 78 |                             coverRect.top + coverRect.height
 79 |                         ]
 80 |                     }
 81 |                     cover.setAttribute('crossorigin', 'Anonymous')
 82 |                     cover.src = imgCover
 83 |                 }, 10)
 84 |             } else {
 85 |                 this.suckerCanvas && this.suckerCanvas.remove()
 86 |             }
 87 |         },
 88 |         createCanvas(cover, coverRect) {
 89 |             const canvas = document.createElement('canvas')
 90 |             const ctx = canvas.getContext('2d')
 91 |             canvas.width = coverRect.width
 92 |             canvas.height = coverRect.height
 93 | 
 94 |             ctx.drawImage(cover, 0, 0, coverRect.width, coverRect.height)
 95 |             Object.assign(canvas.style, {
 96 |                 position: 'absolute',
 97 |                 left: coverRect.left + 'px',
 98 |                 top: coverRect.top + 'px',
 99 |                 opacity: 0
100 |             })
101 |             return canvas
102 |         },
103 |         changeTheme() {
104 |             this.theme = this.theme ? '' : 'light'
105 |             this.inAnimation = true
106 |         },
107 |         animationEnd() {
108 |             this.inAnimation = false
109 |         }
110 |     }
111 | }
112 | </script>
113 | 
114 | <style lang="scss">
115 | .hu-page {
116 |     height: 100%;
117 |     .bg {
118 |         // margin-top: 1000px;
119 |         height: 100%;
120 |         display: flex;
121 |         flex-direction: column;
122 |         justify-content: space-around;
123 |         align-items: center;
124 |         .title {
125 |             color: #fff;
126 |             font-size: 48px;
127 |             text-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
128 |         }
129 |         .cover {
130 |             display: flex;
131 |             justify-content: space-around;
132 |             align-items: center;
133 |             width: 100%;
134 |         }
135 |     }
136 |     .github {
137 |         position: fixed;
138 |         right: 0;
139 |         top: 0;
140 |         width: 200px;
141 |         height: 30px;
142 |         line-height: 30px;
143 |         font-size: 14px;
144 |         font-weight: bold;
145 |         background: #a00;
146 |         text-align: center;
147 |         box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
148 |         transform: rotate(45deg) translateX(60px);
149 |         a {
150 |             display: block;
151 |             text-decoration: none;
152 |             color: #fff;
153 |         }
154 |     }
155 |     .switch {
156 |         position: fixed;
157 |         left: 20%;
158 |         top: -100px;
159 |         width: 2px;
160 |         height: 300px;
161 |         background: #ddd;
162 |         cursor: pointer;
163 |         &::after {
164 |             content: '';
165 |             position: absolute;
166 |             left: -10px;
167 |             bottom: -20px;
168 |             width: 22px;
169 |             height: 22px;
170 |             border: 2px solid #ddd;
171 |             border-radius: 50%;
172 |             box-sizing: border-box;
173 |         }
174 |     }
175 | }
176 | @keyframes line {
177 |     0% {
178 |         transform: translateY(0);
179 |     }
180 |     50% {
181 |         transform: translateY(100px);
182 |     }
183 |     100% {
184 |         transform: translateY(0);
185 |     }
186 | }
187 | .anim-pull {
188 |     animation: line 0.6s;
189 | }
190 | </style>
191 | 


--------------------------------------------------------------------------------
/demo/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caohenghu/vue-colorpicker/50c21d1aa53d0ad7795e204c8348a1a2be2deab5/demo/cover.jpg


--------------------------------------------------------------------------------
/demo/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>vue-colorpicker</title>
 8 |         <style>
 9 |             html,
10 |             body {
11 |                 height: 100%;
12 |             }
13 | 
14 |             body {
15 |                 margin: 0;
16 |             }
17 |         </style>
18 |     </head>
19 | 
20 |     <body>
21 |         <div id="app"></div>
22 |         <% for (lib of htmlWebpackPlugin.options.libs) { %> <% if (lib.isAsync)
23 |         { %>
24 |         <script src="<%= lib.url %>" async></script>
25 |         <% } else { %>
26 |         <script src="<%= lib.url %>"></script>
27 |         <% } %> <% } %>
28 |         <script src="https://tajs.qq.com/stats?sId=66164915" async></script>
29 |         <script>
30 |             var _hmt = _hmt || []
31 |             ;(function() {
32 |                 var hm = document.createElement('script')
33 |                 hm.src =
34 |                     'https://hm.baidu.com/hm.js?58605b1010e0ba767ec902fdec191cd7'
35 |                 hm.async = true
36 |                 var s = document.getElementsByTagName('script')[0]
37 |                 s.parentNode.insertBefore(hm, s)
38 |             })()
39 |         </script>
40 |     </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/demo/index.js:
--------------------------------------------------------------------------------
1 | import App from './App.vue'
2 | 
3 | new Vue({
4 |     el: '#app',
5 |     render: h => h(App)
6 | })
7 | 


--------------------------------------------------------------------------------
/env/gh.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     host: {
3 |         cdn: 'caohenghu.github.io'
4 |     }
5 | }
6 | 


--------------------------------------------------------------------------------
/env/pro.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     host: {
3 |         cdn: 'caohenghu.github.io'
4 |     },
5 |     plugin: [
6 |         '//cdn.bootcss.com/vue/2.5.13/vue.runtime.min.js'
7 |     ]
8 | }
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "@caohenghu/vue-colorpicker",
 3 |     "version": "1.2.4",
 4 |     "description": "Colorpicker of Vue Components",
 5 |     "main": "src/index.js",
 6 |     "scripts": {
 7 |         "hot": "webpack-dev-server --env.config local --env.local",
 8 |         "pro": "rm -rf dist && webpack --env.config pro --env.pro",
 9 |         "gh": "node build/gh.js"
10 |     },
11 |     "keywords": [
12 |         "vue",
13 |         "colorpicker",
14 |         "color"
15 |     ],
16 |     "repository": {
17 |         "type": "git",
18 |         "url": "https://github.com/caohenghu/vue-colorpicker"
19 |     },
20 |     "author": "caohenghu <caohenghu@gmail.com>",
21 |     "license": "MIT",
22 |     "files": [
23 |         "src"
24 |     ],
25 |     "devDependencies": {
26 |         "autoprefixer": "^9.7.4",
27 |         "css-loader": "^3.2.0",
28 |         "eslint": "^6.2.2",
29 |         "eslint-plugin-vue": "^6.1.2",
30 |         "file-loader": "^4.2.0",
31 |         "gh-pages": "^2.0.1",
32 |         "html-webpack-plugin": "^3.2.0",
33 |         "mini-css-extract-plugin": "^0.9.0",
34 |         "node-sass": "^4.11.0",
35 |         "optimize-css-assets-webpack-plugin": "^5.0.3",
36 |         "postcss-loader": "^3.0.0",
37 |         "sass-loader": "^7.1.0",
38 |         "url-loader": "^2.1.0",
39 |         "vue-loader": "^15.5.1",
40 |         "vue-template-compiler": "^2.5.22",
41 |         "webpack": "^4.41.6",
42 |         "webpack-cli": "^3.2.1",
43 |         "webpack-dev-server": "^3.1.14"
44 |     }
45 | }
46 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: [require('autoprefixer')]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/color/Alpha.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div
  3 |         class="color-alpha"
  4 |         @mousedown.prevent.stop="selectAlpha"
  5 |     >
  6 |         <canvas ref="canvasAlpha" />
  7 |         <div
  8 |             :style="slideAlphaStyle"
  9 |             class="slide"
 10 |         />
 11 |     </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | import mixin from './mixin'
 16 | export default {
 17 |     mixins: [mixin],
 18 |     props: {
 19 |         color: {
 20 |             type: String,
 21 |             default: '#000000'
 22 |         },
 23 |         rgba: {
 24 |             type: Object,
 25 |             default: null
 26 |         },
 27 |         width: {
 28 |             type: Number,
 29 |             default: 15
 30 |         },
 31 |         height: {
 32 |             type: Number,
 33 |             default: 152
 34 |         }
 35 |     },
 36 |     data() {
 37 |         return {
 38 |             slideAlphaStyle: {},
 39 |             alphaSize: 5
 40 |         }
 41 |     },
 42 |     watch: {
 43 |         color() {
 44 |             this.renderColor()
 45 |         },
 46 |         'rgba.a'() {
 47 |             this.renderSlide()
 48 |         }
 49 |     },
 50 |     mounted() {
 51 |         this.renderColor()
 52 |         this.renderSlide()
 53 |     },
 54 |     methods: {
 55 |         renderColor() {
 56 |             const canvas = this.$refs.canvasAlpha
 57 |             const width = this.width
 58 |             const height = this.height
 59 |             const size = this.alphaSize
 60 |             const canvasSquare = this.createAlphaSquare(size)
 61 | 
 62 |             const ctx = canvas.getContext('2d')
 63 |             canvas.width = width
 64 |             canvas.height = height
 65 | 
 66 |             ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat')
 67 |             ctx.fillRect(0, 0, width, height)
 68 | 
 69 |             this.createLinearGradient('p', ctx, width, height, 'rgba(255,255,255,0)', this.color)
 70 |         },
 71 |         renderSlide() {
 72 |             this.slideAlphaStyle = {
 73 |                 top: this.rgba.a * this.height - 2 + 'px'
 74 |             }
 75 |         },
 76 |         selectAlpha(e) {
 77 |             const { top: hueTop } = this.$el.getBoundingClientRect()
 78 | 
 79 |             const mousemove = e => {
 80 |                 let y = e.clientY - hueTop
 81 | 
 82 |                 if (y < 0) {
 83 |                     y = 0
 84 |                 }
 85 |                 if (y > this.height) {
 86 |                     y = this.height
 87 |                 }
 88 | 
 89 |                 let a = parseFloat((y / this.height).toFixed(2))
 90 |                 this.$emit('selectAlpha', a)
 91 |             }
 92 | 
 93 |             mousemove(e)
 94 | 
 95 |             const mouseup = () => {
 96 |                 document.removeEventListener('mousemove', mousemove)
 97 |                 document.removeEventListener('mouseup', mouseup)
 98 |             }
 99 | 
100 |             document.addEventListener('mousemove', mousemove)
101 |             document.addEventListener('mouseup', mouseup)
102 |         }
103 |     }
104 | }
105 | </script>
106 | 
107 | <style lang="scss">
108 | .color-alpha {
109 |     position: relative;
110 |     margin-left: 8px;
111 |     cursor: pointer;
112 |     .slide {
113 |         position: absolute;
114 |         left: 0;
115 |         top: 100px;
116 |         width: 100%;
117 |         height: 4px;
118 |         background: #fff;
119 |         box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
120 |         pointer-events: none;
121 |     }
122 | }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/color/Box.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="color-type">
 3 |         <span class="name">
 4 |             {{ name }}
 5 |         </span>
 6 |         <input
 7 |             v-model="modelColor"
 8 |             class="value"
 9 |         >
10 |     </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |     props: {
16 |         name: {
17 |             type: String,
18 |             default: ''
19 |         },
20 |         color: {
21 |             type: String,
22 |             default: ''
23 |         }
24 |     },
25 |     computed: {
26 |         modelColor: {
27 |             get() {
28 |                 return this.color
29 |             },
30 |             set(val) {
31 |                 this.$emit('inputColor', val)
32 |             }
33 |         }
34 |     }
35 | }
36 | </script>
37 | 
38 | <style lang="scss">
39 | .color-type {
40 |     display: flex;
41 |     margin-top: 8px;
42 |     font-size: 12px;
43 |     .name {
44 |         width: 60px;
45 |         height: 30px;
46 |         float: left;
47 |         display: flex;
48 |         justify-content: center;
49 |         align-items: center;
50 |         color: #999;
51 |         background: #252930;
52 |     }
53 |     .value {
54 |         flex: 1;
55 |         height: 30px;
56 |         min-width: 100px; // 可以让flex起作用
57 |         padding: 0 12px;
58 |         border: 0;
59 |         color: #fff;
60 |         background: #2e333a;
61 |         box-sizing: border-box;
62 |     }
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/color/Colors.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <ul class="colors">
  4 |             <li
  5 |                 v-for="item in colorsDefault"
  6 |                 :key="item"
  7 |                 class="item"
  8 |                 @click="selectColor(item)"
  9 |             >
 10 |                 <div
 11 |                     :style="{ background: `url(${imgAlphaBase64})` }"
 12 |                     class="alpha"
 13 |                 />
 14 |                 <div
 15 |                     :style="{ background: item }"
 16 |                     class="color"
 17 |                 />
 18 |             </li>
 19 |         </ul>
 20 |         <ul
 21 |             v-if="colorsHistory.length"
 22 |             class="colors history"
 23 |         >
 24 |             <li
 25 |                 v-for="item in colorsHistory"
 26 |                 :key="item"
 27 |                 class="item"
 28 |                 @click="selectColor(item)"
 29 |             >
 30 |                 <div
 31 |                     :style="{ background: `url(${imgAlphaBase64})` }"
 32 |                     class="alpha"
 33 |                 />
 34 |                 <div
 35 |                     :style="{ background: item }"
 36 |                     class="color"
 37 |                 />
 38 |             </li>
 39 |         </ul>
 40 |     </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | import mixin from './mixin'
 45 | export default {
 46 |     mixins: [mixin],
 47 |     props: {
 48 |         color: {
 49 |             type: String,
 50 |             default: '#000000'
 51 |         },
 52 |         colorsDefault: {
 53 |             type: Array,
 54 |             default: () => []
 55 |         },
 56 |         colorsHistoryKey: {
 57 |             type: String,
 58 |             default: ''
 59 |         }
 60 |     },
 61 |     data() {
 62 |         return {
 63 |             imgAlphaBase64: '',
 64 |             colorsHistory: JSON.parse(localStorage.getItem(this.colorsHistoryKey)) || []
 65 |         }
 66 |     },
 67 |     created() {
 68 |         this.imgAlphaBase64 = this.createAlphaSquare(4).toDataURL()
 69 |     },
 70 |     destroyed() {
 71 |         this.setColorsHistory(this.color)
 72 |     },
 73 |     methods: {
 74 |         selectColor(color) {
 75 |             this.$emit('selectColor', color)
 76 |         },
 77 |         setColorsHistory(color) {
 78 |             if (!color) {
 79 |                 return
 80 |             }
 81 |             const colors = this.colorsHistory
 82 |             const index = colors.indexOf(color)
 83 |             if (index >= 0) {
 84 |                 colors.splice(index, 1)
 85 |             }
 86 |             if (colors.length >= 8) {
 87 |                 colors.length = 7
 88 |             }
 89 |             colors.unshift(color)
 90 |             this.colorsHistory = colors
 91 |             localStorage.setItem(this.colorsHistoryKey, JSON.stringify(colors))
 92 |         }
 93 |     }
 94 | }
 95 | </script>
 96 | 
 97 | <style lang="scss">
 98 | .colors {
 99 |     padding: 0;
100 |     margin: 0;
101 |     &.history {
102 |         margin-top: 10px;
103 |         border-top: 1px solid #2e333a;
104 |     }
105 |     .item {
106 |         position: relative;
107 |         width: 16px;
108 |         height: 16px;
109 |         margin: 10px 0 0 10px;
110 |         border-radius: 3px;
111 |         box-sizing: border-box;
112 |         vertical-align: top;
113 |         display: inline-block;
114 |         transition: all 0.1s;
115 |         cursor: pointer;
116 |         &:nth-child(8n + 1) {
117 |             margin-left: 0;
118 |         }
119 |         &:hover {
120 |             transform: scale(1.4);
121 |         }
122 |         .alpha {
123 |             height: 100%;
124 |             border-radius: 4px; // 大一像素，否则四个角会看到白点
125 |         }
126 |         .color {
127 |             position: absolute;
128 |             left: 0;
129 |             top: 0;
130 |             width: 100%;
131 |             height: 100%;
132 |             border-radius: 3px;
133 |         }
134 |     }
135 | }
136 | </style>
137 | 


--------------------------------------------------------------------------------
/src/color/Hue.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div
  3 |         class="hue"
  4 |         @mousedown.prevent.stop="selectHue"
  5 |     >
  6 |         <canvas ref="canvasHue" />
  7 |         <div
  8 |             :style="slideHueStyle"
  9 |             class="slide"
 10 |         />
 11 |     </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | export default {
 16 |     props: {
 17 |         hsv: {
 18 |             type: Object,
 19 |             default: null
 20 |         },
 21 |         width: {
 22 |             type: Number,
 23 |             default: 15
 24 |         },
 25 |         height: {
 26 |             type: Number,
 27 |             default: 152
 28 |         }
 29 |     },
 30 |     data() {
 31 |         return {
 32 |             slideHueStyle: {}
 33 |         }
 34 |     },
 35 |     // 不能监听，否则操作saturation时，这里的slide会抖动
 36 |     // watch: {
 37 |     //     'hsv.h'() {
 38 |     //         this.renderSlide()
 39 |     //     }
 40 |     // },
 41 |     mounted() {
 42 |         this.renderColor()
 43 |         this.renderSlide()
 44 |     },
 45 |     methods: {
 46 |         renderColor() {
 47 |             const canvas = this.$refs.canvasHue
 48 |             const width = this.width
 49 |             const height = this.height
 50 |             const ctx = canvas.getContext('2d')
 51 |             canvas.width = width
 52 |             canvas.height = height
 53 | 
 54 |             const gradient = ctx.createLinearGradient(0, 0, 0, height)
 55 |             gradient.addColorStop(0, '#FF0000') // 红
 56 |             gradient.addColorStop(0.17 * 1, '#FF00FF') // 紫
 57 |             gradient.addColorStop(0.17 * 2, '#0000FF') // 蓝
 58 |             gradient.addColorStop(0.17 * 3, '#00FFFF') // 青
 59 |             gradient.addColorStop(0.17 * 4, '#00FF00') // 绿
 60 |             gradient.addColorStop(0.17 * 5, '#FFFF00') // 黄
 61 |             gradient.addColorStop(1, '#FF0000') // 红
 62 |             ctx.fillStyle = gradient
 63 |             ctx.fillRect(0, 0, width, height)
 64 |         },
 65 |         renderSlide() {
 66 |             this.slideHueStyle = {
 67 |                 top: (1 - this.hsv.h / 360) * this.height - 2 + 'px'
 68 |             }
 69 |         },
 70 |         selectHue(e) {
 71 |             const { top: hueTop } = this.$el.getBoundingClientRect()
 72 |             const ctx = e.target.getContext('2d')
 73 | 
 74 |             const mousemove = e => {
 75 |                 let y = e.clientY - hueTop
 76 | 
 77 |                 if (y < 0) {
 78 |                     y = 0
 79 |                 }
 80 |                 if (y > this.height) {
 81 |                     y = this.height
 82 |                 }
 83 | 
 84 |                 this.slideHueStyle = {
 85 |                     top: y - 2 + 'px'
 86 |                 }
 87 |                 // 如果用最大值，选择的像素会是空的，空的默认是黑色
 88 |                 const imgData = ctx.getImageData(0, Math.min(y, this.height - 1), 1, 1)
 89 |                 const [r, g, b] = imgData.data
 90 |                 this.$emit('selectHue', { r, g, b })
 91 |             }
 92 | 
 93 |             mousemove(e)
 94 | 
 95 |             const mouseup = () => {
 96 |                 document.removeEventListener('mousemove', mousemove)
 97 |                 document.removeEventListener('mouseup', mouseup)
 98 |             }
 99 | 
100 |             document.addEventListener('mousemove', mousemove)
101 |             document.addEventListener('mouseup', mouseup)
102 |         }
103 |     }
104 | }
105 | </script>
106 | 
107 | <style lang="scss">
108 | .hue {
109 |     position: relative;
110 |     margin-left: 8px;
111 |     cursor: pointer;
112 |     .slide {
113 |         position: absolute;
114 |         left: 0;
115 |         top: 100px;
116 |         width: 100%;
117 |         height: 4px;
118 |         background: #fff;
119 |         box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
120 |         pointer-events: none;
121 |     }
122 | }
123 | </style>


--------------------------------------------------------------------------------
/src/color/Index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div
  3 |         class="hu-color-picker"
  4 |         :class="{ light: isLightTheme }"
  5 |         :style="{ width: totalWidth + 'px' }"
  6 |     >
  7 |         <div class="color-set">
  8 |             <Saturation
  9 |                 ref="saturation"
 10 |                 :color="rgbString"
 11 |                 :hsv="hsv"
 12 |                 :size="hueHeight"
 13 |                 @selectSaturation="selectSaturation"
 14 |             />
 15 |             <Hue
 16 |                 ref="hue"
 17 |                 :hsv="hsv"
 18 |                 :width="hueWidth"
 19 |                 :height="hueHeight"
 20 |                 @selectHue="selectHue"
 21 |             />
 22 |             <Alpha
 23 |                 ref="alpha"
 24 |                 :color="rgbString"
 25 |                 :rgba="rgba"
 26 |                 :width="hueWidth"
 27 |                 :height="hueHeight"
 28 |                 @selectAlpha="selectAlpha"
 29 |             />
 30 |         </div>
 31 |         <div
 32 |             :style="{ height: previewHeight + 'px' }"
 33 |             class="color-show"
 34 |         >
 35 |             <Preview
 36 |                 :color="rgbaString"
 37 |                 :width="previewWidth"
 38 |                 :height="previewHeight"
 39 |             />
 40 |             <Sucker
 41 |                 v-if="!suckerHide"
 42 |                 :sucker-canvas="suckerCanvas"
 43 |                 :sucker-area="suckerArea"
 44 |                 @openSucker="openSucker"
 45 |                 @selectSucker="selectSucker"
 46 |             />
 47 |         </div>
 48 |         <Box
 49 |             name="HEX"
 50 |             :color="modelHex"
 51 |             @inputColor="inputHex"
 52 |         />
 53 |         <Box
 54 |             name="RGBA"
 55 |             :color="modelRgba"
 56 |             @inputColor="inputRgba"
 57 |         />
 58 |         <Colors
 59 |             :color="rgbaString"
 60 |             :colors-default="colorsDefault"
 61 |             :colors-history-key="colorsHistoryKey"
 62 |             @selectColor="selectColor"
 63 |         />
 64 |     </div>
 65 | </template>
 66 | 
 67 | <script>
 68 | import mixin from './mixin'
 69 | import Saturation from './Saturation.vue'
 70 | import Hue from './Hue.vue'
 71 | import Alpha from './Alpha.vue'
 72 | import Preview from './Preview.vue'
 73 | import Sucker from './Sucker.vue'
 74 | import Box from './Box.vue'
 75 | import Colors from './Colors.vue'
 76 | export default {
 77 |     components: {
 78 |         Saturation,
 79 |         Hue,
 80 |         Alpha,
 81 |         Preview,
 82 |         Sucker,
 83 |         Box,
 84 |         Colors
 85 |     },
 86 |     mixins: [mixin],
 87 |     props: {
 88 |         color: {
 89 |             type: String,
 90 |             default: '#000000'
 91 |         },
 92 |         theme: {
 93 |             type: String,
 94 |             default: 'dark'
 95 |         },
 96 |         suckerHide: {
 97 |             type: Boolean,
 98 |             default: true
 99 |         },
100 |         suckerCanvas: {
101 |             type: null, // HTMLCanvasElement
102 |             default: null
103 |         },
104 |         suckerArea: {
105 |             type: Array,
106 |             default: () => []
107 |         },
108 |         colorsDefault: {
109 |             type: Array,
110 |             default: () => [
111 |                 '#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1',
112 |                 '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)'
113 |             ]
114 |         },
115 |         colorsHistoryKey: {
116 |             type: String,
117 |             default: 'vue-colorpicker-history'
118 |         }
119 |     },
120 |     data() {
121 |         return {
122 |             hueWidth: 15,
123 |             hueHeight: 152,
124 |             previewHeight: 30,
125 |             modelRgba: '',
126 |             modelHex: '',
127 |             r: 0,
128 |             g: 0,
129 |             b: 0,
130 |             a: 1,
131 |             h: 0,
132 |             s: 0,
133 |             v: 0
134 |         }
135 |     },
136 |     computed: {
137 |         isLightTheme() {
138 |             return this.theme === 'light'
139 |         },
140 |         totalWidth() {
141 |             return this.hueHeight + (this.hueWidth + 8) * 2
142 |         },
143 |         previewWidth() {
144 |             return this.totalWidth - (this.suckerHide ? 0 : this.previewHeight)
145 |         },
146 |         rgba() {
147 |             return {
148 |                 r: this.r,
149 |                 g: this.g,
150 |                 b: this.b,
151 |                 a: this.a
152 |             }
153 |         },
154 |         hsv() {
155 |             return {
156 |                 h: this.h,
157 |                 s: this.s,
158 |                 v: this.v
159 |             }
160 |         },
161 |         rgbString() {
162 |             return `rgb(${this.r}, ${this.g}, ${this.b})`
163 |         },
164 |         rgbaStringShort() {
165 |             return `${this.r}, ${this.g}, ${this.b}, ${this.a}`
166 |         },
167 |         rgbaString() {
168 |             return `rgba(${this.rgbaStringShort})`
169 |         },
170 |         hexString() {
171 |             return this.rgb2hex(this.rgba, true)
172 |         }
173 |     },
174 |     created() {
175 |         Object.assign(this, this.setColorValue(this.color))
176 |         this.setText()
177 | 
178 |         // 避免初始化时，也会触发changeColor事件
179 |         this.$watch('rgba', () => {
180 |             this.$emit('changeColor', {
181 |                 rgba: this.rgba,
182 |                 hsv: this.hsv,
183 |                 hex: this.modelHex
184 |             })
185 |         })
186 |     },
187 |     methods: {
188 |         selectSaturation(color) {
189 |             const { r, g, b, h, s, v } = this.setColorValue(color)
190 |             Object.assign(this, { r, g, b, h, s, v })
191 |             this.setText()
192 |         },
193 |         selectHue(color) {
194 |             const { r, g, b, h, s, v } = this.setColorValue(color)
195 |             Object.assign(this, { r, g, b, h, s, v })
196 |             this.setText()
197 |             this.$nextTick(() => {
198 |                 this.$refs.saturation.renderColor()
199 |                 this.$refs.saturation.renderSlide()
200 |             })
201 |         },
202 |         selectAlpha(a) {
203 |             this.a = a
204 |             this.setText()
205 |         },
206 |         inputHex(color) {
207 |             const { r, g, b, a, h, s, v } = this.setColorValue(color)
208 |             Object.assign(this, { r, g, b, a, h, s, v })
209 |             this.modelHex = color
210 |             this.modelRgba = this.rgbaStringShort
211 |             this.$nextTick(() => {
212 |                 this.$refs.saturation.renderColor()
213 |                 this.$refs.saturation.renderSlide()
214 |                 this.$refs.hue.renderSlide()
215 |             })
216 |         },
217 |         inputRgba(color) {
218 |             const { r, g, b, a, h, s, v } = this.setColorValue(color)
219 |             Object.assign(this, { r, g, b, a, h, s, v })
220 |             this.modelHex = this.hexString
221 |             this.modelRgba = color
222 |             this.$nextTick(() => {
223 |                 this.$refs.saturation.renderColor()
224 |                 this.$refs.saturation.renderSlide()
225 |                 this.$refs.hue.renderSlide()
226 |             })
227 |         },
228 |         setText() {
229 |             this.modelHex = this.hexString
230 |             this.modelRgba = this.rgbaStringShort
231 |         },
232 |         openSucker(isOpen) {
233 |             this.$emit('openSucker', isOpen)
234 |         },
235 |         selectSucker(color) {
236 |             const { r, g, b, a, h, s, v } = this.setColorValue(color)
237 |             Object.assign(this, { r, g, b, a, h, s, v })
238 |             this.setText()
239 |             this.$nextTick(() => {
240 |                 this.$refs.saturation.renderColor()
241 |                 this.$refs.saturation.renderSlide()
242 |                 this.$refs.hue.renderSlide()
243 |             })
244 |         },
245 |         selectColor(color) {
246 |             const { r, g, b, a, h, s, v } = this.setColorValue(color)
247 |             Object.assign(this, { r, g, b, a, h, s, v })
248 |             this.setText()
249 |             this.$nextTick(() => {
250 |                 this.$refs.saturation.renderColor()
251 |                 this.$refs.saturation.renderSlide()
252 |                 this.$refs.hue.renderSlide()
253 |             })
254 |         }
255 |     }
256 | }
257 | </script>
258 | 
259 | <style lang="scss">
260 | .hu-color-picker {
261 |     padding: 10px;
262 |     background: #1d2024;
263 |     border-radius: 4px;
264 |     box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
265 |     z-index: 1;
266 |     &.light {
267 |         background: #f7f8f9;
268 |         .color-show {
269 |             .sucker {
270 |                 background: #eceef0;
271 |             }
272 |         }
273 |         .color-type {
274 |             .name {
275 |                 background: #e7e8e9;
276 |             }
277 |             .value {
278 |                 color: #666;
279 |                 background: #eceef0;
280 |             }
281 |         }
282 |         .colors.history {
283 |             border-top: 1px solid #eee;
284 |         }
285 |     }
286 |     canvas {
287 |         vertical-align: top;
288 |     }
289 |     .color-set {
290 |         display: flex;
291 |     }
292 |     .color-show {
293 |         margin-top: 8px;
294 |         display: flex;
295 |     }
296 | }
297 | </style>
298 | 


--------------------------------------------------------------------------------
/src/color/Preview.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <canvas />
 3 | </template>
 4 | 
 5 | <script>
 6 | import mixin from './mixin'
 7 | export default {
 8 |     mixins: [mixin],
 9 |     props: {
10 |         color: {
11 |             type: String,
12 |             default: '#000000'
13 |         },
14 |         width: {
15 |             type: Number,
16 |             default: 100
17 |         },
18 |         height: {
19 |             type: Number,
20 |             default: 30
21 |         }
22 |     },
23 |     data() {
24 |         return {
25 |             alphaSize: 5
26 |         }
27 |     },
28 |     watch: {
29 |         color() {
30 |             this.renderColor()
31 |         }
32 |     },
33 |     mounted() {
34 |         this.renderColor()
35 |     },
36 |     methods: {
37 |         renderColor() {
38 |             const canvas = this.$el
39 |             const width = this.width
40 |             const height = this.height
41 |             const size = this.alphaSize
42 |             const canvasSquare = this.createAlphaSquare(size)
43 | 
44 |             const ctx = canvas.getContext('2d')
45 |             canvas.width = width
46 |             canvas.height = height
47 | 
48 |             ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat')
49 |             ctx.fillRect(0, 0, width, height)
50 | 
51 |             ctx.fillStyle = this.color
52 |             ctx.fillRect(0, 0, width, height)
53 |         }
54 |     }
55 | }
56 | </script>
57 | 


--------------------------------------------------------------------------------
/src/color/Saturation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div
  3 |         class="saturation"
  4 |         @mousedown.prevent.stop="selectSaturation"
  5 |     >
  6 |         <canvas ref="canvasSaturation" />
  7 |         <div
  8 |             :style="slideSaturationStyle"
  9 |             class="slide"
 10 |         />
 11 |     </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | import mixin from './mixin'
 16 | export default {
 17 |     mixins: [mixin],
 18 |     props: {
 19 |         color: {
 20 |             type: String,
 21 |             default: '#000000'
 22 |         },
 23 |         hsv: {
 24 |             type: Object,
 25 |             default: null
 26 |         },
 27 |         size: {
 28 |             type: Number,
 29 |             default: 152
 30 |         }
 31 |     },
 32 |     data() {
 33 |         return {
 34 |             slideSaturationStyle: {}
 35 |         }
 36 |     },
 37 |     // 不能监听，否则自己改变自己时，颜色也会发生变化
 38 |     // watch: {
 39 |     //     color() {
 40 |     //         this.renderColor()
 41 |     //     }
 42 |     // },
 43 |     mounted() {
 44 |         this.renderColor()
 45 |         this.renderSlide()
 46 |     },
 47 |     methods: {
 48 |         renderColor() {
 49 |             const canvas = this.$refs.canvasSaturation
 50 |             const size = this.size
 51 |             const ctx = canvas.getContext('2d')
 52 |             canvas.width = size
 53 |             canvas.height = size
 54 | 
 55 |             ctx.fillStyle = this.color
 56 |             ctx.fillRect(0, 0, size, size)
 57 | 
 58 |             this.createLinearGradient('l', ctx, size, size, '#FFFFFF', 'rgba(255,255,255,0)')
 59 |             this.createLinearGradient('p', ctx, size, size, 'rgba(0,0,0,0)', '#000000')
 60 |         },
 61 |         renderSlide() {
 62 |             this.slideSaturationStyle = {
 63 |                 left: this.hsv.s * this.size - 5 + 'px',
 64 |                 top: (1 - this.hsv.v) * this.size - 5 + 'px'
 65 |             }
 66 |         },
 67 |         selectSaturation(e) {
 68 |             const { top: saturationTop, left: saturationLeft } = this.$el.getBoundingClientRect()
 69 |             const ctx = e.target.getContext('2d')
 70 | 
 71 |             const mousemove = e => {
 72 |                 let x = e.clientX - saturationLeft
 73 |                 let y = e.clientY - saturationTop
 74 | 
 75 |                 if (x < 0) {
 76 |                     x = 0
 77 |                 }
 78 |                 if (y < 0) {
 79 |                     y = 0
 80 |                 }
 81 |                 if (x > this.size) {
 82 |                     x = this.size
 83 |                 }
 84 |                 if (y > this.size) {
 85 |                     y = this.size
 86 |                 }
 87 | 
 88 |                 // 不通过监听数据变化来修改dom，否则当颜色为#ffffff时，slide会跑到左下角
 89 |                 this.slideSaturationStyle = {
 90 |                     left: x - 5 + 'px',
 91 |                     top: y - 5 + 'px'
 92 |                 }
 93 |                 // 如果用最大值，选择的像素会是空的，空的默认是黑色
 94 |                 const imgData = ctx.getImageData(Math.min(x, this.size - 1), Math.min(y, this.size - 1), 1, 1)
 95 |                 const [r, g, b] = imgData.data
 96 |                 this.$emit('selectSaturation', { r, g, b })
 97 |             }
 98 | 
 99 |             mousemove(e)
100 | 
101 |             const mouseup = () => {
102 |                 document.removeEventListener('mousemove', mousemove)
103 |                 document.removeEventListener('mouseup', mouseup)
104 |             }
105 | 
106 |             document.addEventListener('mousemove', mousemove)
107 |             document.addEventListener('mouseup', mouseup)
108 |         }
109 |     }
110 | }
111 | </script>
112 | 
113 | <style lang="scss">
114 | .saturation {
115 |     position: relative;
116 |     cursor: pointer;
117 |     .slide {
118 |         position: absolute;
119 |         left: 100px;
120 |         top: 0;
121 |         width: 10px;
122 |         height: 10px;
123 |         border-radius: 50%;
124 |         border: 1px solid #fff;
125 |         box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
126 |         pointer-events: none;
127 |     }
128 | }
129 | </style>


--------------------------------------------------------------------------------
/src/color/Sucker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <svg
  4 |             v-if="!isSucking"
  5 |             :class="{ active: isOpenSucker }"
  6 |             class="sucker"
  7 |             xmlns="http://www.w3.org/2000/svg"
  8 |             viewBox="-12 -12 48 48"
  9 |             @click="openSucker"
 10 |         >
 11 |             <path d="M13.1,8.2l5.6,5.6c0.4,0.4,0.5,1.1,0.1,1.5s-1.1,0.5-1.5,0.1c0,0-0.1,0-0.1-0.1l-1.4-1.4l-7.7,7.7C7.9,21.9,7.6,22,7.3,22H3.1C2.5,22,2,21.5,2,20.9l0,0v-4.2c0-0.3,0.1-0.6,0.3-0.8l5.8-5.8C8.5,9.7,9.2,9.6,9.7,10s0.5,1.1,0.1,1.5c0,0,0,0.1-0.1,0.1l-5.5,5.5v2.7h2.7l7.4-7.4L8.7,6.8c-0.5-0.4-0.5-1-0.1-1.5s1.1-0.5,1.5-0.1c0,0,0.1,0,0.1,0.1l1.4,1.4l3.5-3.5c1.6-1.6,4.1-1.6,5.8-0.1c1.6,1.6,1.6,4.1,0.1,5.8L20.9,9l-3.6,3.6c-0.4,0.4-1.1,0.5-1.5,0.1" />
 12 |         </svg>
 13 |         <svg
 14 |             v-if="isSucking"
 15 |             class="sucker"
 16 |             viewBox="-16 -16 68 68"
 17 |             xmlns="http://www.w3.org/2000/svg"
 18 |             stroke="#9099a4"
 19 |         >
 20 |             <g
 21 |                 fill="none"
 22 |                 fill-rule="evenodd"
 23 |             >
 24 |                 <g
 25 |                     transform="translate(1 1)"
 26 |                     stroke-width="4"
 27 |                 >
 28 |                     <circle
 29 |                         stroke-opacity=".5"
 30 |                         cx="18"
 31 |                         cy="18"
 32 |                         r="18"
 33 |                     />
 34 |                     <path d="M36 18c0-9.94-8.06-18-18-18">
 35 |                         <animateTransform
 36 |                             attributeName="transform"
 37 |                             type="rotate"
 38 |                             from="0 18 18"
 39 |                             to="360 18 18"
 40 |                             dur="1s"
 41 |                             repeatCount="indefinite"
 42 |                         />
 43 |                     </path>
 44 |                 </g>
 45 |             </g>
 46 |         </svg>
 47 |     </div>
 48 | </template>
 49 | 
 50 | <script>
 51 | import imgSucker from '../img/sucker.png'
 52 | export default {
 53 |     props: {
 54 |         suckerCanvas: {
 55 |             type: null, // HTMLCanvasElement
 56 |             default: null
 57 |         },
 58 |         suckerArea: {
 59 |             type: Array,
 60 |             default: () => []
 61 |         }
 62 |     },
 63 |     data() {
 64 |         return {
 65 |             isOpenSucker: false, // 是否处于吸管状态
 66 |             suckerPreview: null, // 吸管旁边的预览颜色dom
 67 |             isSucking: false // 是否处于吸管等待状态
 68 |         }
 69 |     },
 70 |     watch: {
 71 |         suckerCanvas(newVal) {
 72 |             this.isSucking = false
 73 |             this.suckColor(newVal)
 74 |             newVal.style.cursor = `url(${imgSucker}) 0 32, default`
 75 |         }
 76 |     },
 77 |     methods: {
 78 |         openSucker() {
 79 |             if (!this.isOpenSucker) {
 80 |                 this.isOpenSucker = true
 81 |                 this.isSucking = true
 82 |                 this.$emit('openSucker', true)
 83 |                 document.addEventListener('keydown', this.keydownHandler)
 84 |             } else {
 85 |                 // 和按下esc键的处理逻辑一样
 86 |                 this.keydownHandler({ keyCode: 27 })
 87 |             }
 88 |         },
 89 |         keydownHandler(e) {
 90 |             // esc
 91 |             if (e.keyCode === 27) {
 92 |                 this.isOpenSucker = false
 93 |                 this.isSucking = false
 94 |                 this.$emit('openSucker', false)
 95 |                 document.removeEventListener('keydown', this.keydownHandler)
 96 |                 document.removeEventListener('mousemove', this.mousemoveHandler)
 97 |                 document.removeEventListener('mouseup', this.mousemoveHandler)
 98 |                 if (this.suckerPreview) {
 99 |                     document.body.removeChild(this.suckerPreview)
100 |                     this.suckerPreview = null
101 |                 }
102 |             }
103 |         },
104 |         mousemoveHandler(e) {
105 |             const { clientX, clientY } = e
106 |             const { top: domTop, left: domLeft, width, height } = this.suckerCanvas.getBoundingClientRect()
107 |             const x = clientX - domLeft
108 |             const y = clientY - domTop
109 |             const ctx = this.suckerCanvas.getContext('2d')
110 |             const imgData = ctx.getImageData(Math.min(x, width - 1), Math.min(y, height - 1), 1, 1)
111 |             let [r, g, b, a] = imgData.data
112 |             a = parseFloat((a / 255).toFixed(2))
113 |             const style = this.suckerPreview.style
114 |             Object.assign(style, {
115 |                 position: 'absolute',
116 |                 left: clientX + 20 + 'px',
117 |                 top: clientY - 36 + 'px',
118 |                 width: '24px',
119 |                 height: '24px',
120 |                 borderRadius: '50%',
121 |                 border: '2px solid #fff',
122 |                 boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0.16)',
123 |                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
124 |                 zIndex: 95 // 吸管的小圆圈预览色的层级不能超过颜色选择器
125 |             })
126 |             if (
127 |                 clientX >= this.suckerArea[0] &&
128 |                 clientY >= this.suckerArea[1] &&
129 |                 clientX <= this.suckerArea[2] &&
130 |                 clientY <= this.suckerArea[3]
131 |             ) {
132 |                 style.display = ''
133 |             } else {
134 |                 style.display = 'none'
135 |             }
136 |         },
137 |         suckColor(dom) {
138 |             if (dom && dom.tagName !== 'CANVAS') {
139 |                 return
140 |             }
141 | 
142 |             this.suckerPreview = document.createElement('div')
143 |             document.body.appendChild(this.suckerPreview)
144 | 
145 |             document.addEventListener('mousemove', this.mousemoveHandler)
146 |             document.addEventListener('mouseup', this.mousemoveHandler)
147 | 
148 |             dom.addEventListener('click', e => {
149 |                 const { clientX, clientY } = e
150 |                 const { top, left, width, height } = dom.getBoundingClientRect()
151 |                 const x = clientX - left
152 |                 const y = clientY - top
153 |                 const ctx = dom.getContext('2d')
154 |                 const imgData = ctx.getImageData(Math.min(x, width - 1), Math.min(y, height - 1), 1, 1)
155 |                 let [r, g, b, a] = imgData.data
156 |                 a = parseFloat((a / 255).toFixed(2))
157 |                 this.$emit('selectSucker', { r, g, b, a })
158 |             })
159 |         }
160 |     }
161 | }
162 | </script>
163 | 
164 | <style lang="scss">
165 | .sucker {
166 |     width: 30px;
167 |     fill: #9099a4;
168 |     background: #2e333a;
169 |     cursor: pointer;
170 |     transition: all 0.3s;
171 |     &:hover,
172 |     &.active {
173 |         fill: #1593ff;
174 |     }
175 | }
176 | </style>
177 | 


--------------------------------------------------------------------------------
/src/color/mixin.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     methods: {
 3 |         setColorValue(color) {
 4 |             let rgba = { r: 0, g: 0, b: 0, a: 1 }
 5 |             if (/#/.test(color)) {
 6 |                 rgba = this.hex2rgb(color)
 7 |             } else if (/rgb/.test(color)) {
 8 |                 rgba = this.rgb2rgba(color)
 9 |             } else if (typeof color === 'string') {
10 |                 rgba = this.rgb2rgba(`rgba(${color})`)
11 |             } else if (Object.prototype.toString.call(color) === '[object Object]') {
12 |                 rgba = color
13 |             }
14 |             const { r, g, b, a } = rgba
15 |             const { h, s, v } = this.rgb2hsv(rgba)
16 |             return { r, g, b, a: a === undefined ? 1 : a, h, s, v }
17 |         },
18 |         createAlphaSquare(size) {
19 |             const canvas = document.createElement('canvas')
20 |             const ctx = canvas.getContext('2d')
21 |             const doubleSize = size * 2
22 |             canvas.width = doubleSize
23 |             canvas.height = doubleSize
24 | 
25 |             ctx.fillStyle = '#ffffff'
26 |             ctx.fillRect(0, 0, doubleSize, doubleSize)
27 |             ctx.fillStyle = '#ccd5db'
28 |             ctx.fillRect(0, 0, size, size)
29 |             ctx.fillRect(size, size, size, size)
30 | 
31 |             return canvas
32 |         },
33 |         createLinearGradient(direction, ctx, width, height, color1, color2) {
34 |             // l 横向 p 纵向
35 |             const isL = direction === 'l'
36 |             const gradient = ctx.createLinearGradient(0, 0, isL ? width : 0, isL ? 0 : height)
37 |             gradient.addColorStop(0.01, color1)
38 |             gradient.addColorStop(0.99, color2)
39 |             ctx.fillStyle = gradient
40 |             ctx.fillRect(0, 0, width, height)
41 |         },
42 |         rgb2hex({ r, g, b }, toUpper) {
43 |             const change = val => ('0' + Number(val).toString(16)).slice(-2)
44 |             const color = `#${change(r)}${change(g)}${change(b)}`
45 |             return toUpper ? color.toUpperCase() : color
46 |         },
47 |         hex2rgb(hex) {
48 |             hex = hex.slice(1)
49 |             const change = val => parseInt(val, 16) || 0 // 避免NaN的情况
50 |             return {
51 |                 r: change(hex.slice(0, 2)),
52 |                 g: change(hex.slice(2, 4)),
53 |                 b: change(hex.slice(4, 6))
54 |             }
55 |         },
56 |         rgb2rgba(rgba) {
57 |             if (typeof rgba === 'string') {
58 |                 rgba = (/rgba?\((.*?)\)/.exec(rgba) || ['', '0,0,0,1'])[1].split(',')
59 |                 return {
60 |                     r: Number(rgba[0]) || 0,
61 |                     g: Number(rgba[1]) || 0,
62 |                     b: Number(rgba[2]) || 0,
63 |                     a: Number(rgba[3] ? rgba[3] : 1) // 避免为0的情况
64 |                 }
65 |             } else {
66 |                 return rgba
67 |             }
68 |         },
69 |         rgb2hsv({ r, g, b }) {
70 |             r = r / 255
71 |             g = g / 255
72 |             b = b / 255
73 |             const max = Math.max(r, g, b)
74 |             const min = Math.min(r, g, b)
75 |             const delta = max - min
76 |             let h = 0
77 |             if (max === min) {
78 |                 h = 0
79 |             } else if (max === r) {
80 |                 if (g >= b) {
81 |                     h = (60 * (g - b)) / delta
82 |                 } else {
83 |                     h = (60 * (g - b)) / delta + 360
84 |                 }
85 |             } else if (max === g) {
86 |                 h = (60 * (b - r)) / delta + 120
87 |             } else if (max === b) {
88 |                 h = (60 * (r - g)) / delta + 240
89 |             }
90 |             h = Math.floor(h)
91 |             let s = parseFloat((max === 0 ? 0 : 1 - min / max).toFixed(2))
92 |             let v = parseFloat(max.toFixed(2))
93 |             return { h, s, v }
94 |         }
95 |     }
96 | }
97 | 


--------------------------------------------------------------------------------
/src/img/paypal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caohenghu/vue-colorpicker/50c21d1aa53d0ad7795e204c8348a1a2be2deab5/src/img/paypal.png


--------------------------------------------------------------------------------
/src/img/preview-dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caohenghu/vue-colorpicker/50c21d1aa53d0ad7795e204c8348a1a2be2deab5/src/img/preview-dark.jpg


--------------------------------------------------------------------------------
/src/img/preview-light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caohenghu/vue-colorpicker/50c21d1aa53d0ad7795e204c8348a1a2be2deab5/src/img/preview-light.jpg


--------------------------------------------------------------------------------
/src/img/sucker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caohenghu/vue-colorpicker/50c21d1aa53d0ad7795e204c8348a1a2be2deab5/src/img/sucker.png


--------------------------------------------------------------------------------
/src/img/wechat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caohenghu/vue-colorpicker/50c21d1aa53d0ad7795e204c8348a1a2be2deab5/src/img/wechat.jpg


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Color from './color/Index.vue'
2 | export default Color
3 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const webpack = require('webpack')
  2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
  3 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
  4 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
  5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  6 | const path = require('path')
  7 | 
  8 | const minify = {
  9 |     minifyCSS: true,
 10 |     minifyJS: true,
 11 |     removeComments: true, // 删除HTML中的注释
 12 |     collapseWhitespace: true, // 删除空白符与换行符
 13 |     collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
 14 |     removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
 15 |     removeScriptTypeAttributes: true, // 删除script上的type
 16 |     removeStyleLinkTypeAttributes: true // 删除style上的type
 17 | }
 18 | 
 19 | module.exports = options => {
 20 |     const env = require('./env/' + options.config + '.js')
 21 |     const plugin = require('./env/pro.js').plugin
 22 |     const port = env.port || 5555
 23 |     const isLocal = options.local
 24 |     const libs = []
 25 | 
 26 |     const rules = [
 27 |         {
 28 |             test: /\.vue$/,
 29 |             use: 'vue-loader'
 30 |         },
 31 |         // {
 32 |         //     test: /\.js$/,
 33 |         //     use: 'babel-loader'
 34 |         // },
 35 |         {
 36 |             test: /\.scss$/,
 37 |             use: [
 38 |                 isLocal ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
 39 |                 'css-loader',
 40 |                 'postcss-loader',
 41 |                 'sass-loader'
 42 |             ]
 43 |         },
 44 |         {
 45 |             test: /\.(png|jpg|gif|svg|ico)$/,
 46 |             use: [
 47 |                 {
 48 |                     loader: 'url-loader',
 49 |                     options: {
 50 |                         name: 'images/[name]-[hash:8].[ext]',
 51 |                         limit: 1000
 52 |                     }
 53 |                 }
 54 |             ]
 55 |         }
 56 |     ]
 57 |     const plugins = [
 58 |         new VueLoaderPlugin(),
 59 |         new HtmlWebpackPlugin({
 60 |             template: './demo/index.ejs',
 61 |             filename: 'index.html',
 62 |             minify,
 63 |             libs
 64 |         })
 65 |     ]
 66 | 
 67 |     if (isLocal) {
 68 |         plugins.push(new webpack.HotModuleReplacementPlugin())
 69 |     } else {
 70 |         plugins.push(
 71 |             new OptimizeCssAssetsPlugin(),
 72 |             new MiniCssExtractPlugin({
 73 |                 filename: 'css/[name]-[hash:8].min.css'
 74 |             })
 75 |         )
 76 |     }
 77 | 
 78 |     // 如果是本地开发，使用未压缩的插件
 79 |     if (isLocal) {
 80 |         plugin.forEach((item, i) => {
 81 |             plugin[i] = item.replace('.min', '')
 82 |         })
 83 |     }
 84 |     plugin.forEach(item => {
 85 |         libs.push({
 86 |             url: item,
 87 |             isAsync: false
 88 |         })
 89 |     })
 90 | 
 91 |     return {
 92 |         mode: isLocal ? 'development' : 'production',
 93 |         entry: {
 94 |             app: './demo'
 95 |         },
 96 |         output: {
 97 |             publicPath: isLocal
 98 |                 ? ''
 99 |                 : '//' + env.host.cdn + '/vue-colorpicker/',
100 |             path: path.resolve('dist'),
101 |             filename: isLocal ? 'js/[name].js' : 'js/[name]-[hash:8].js'
102 |         },
103 |         module: {
104 |             rules
105 |         },
106 |         plugins,
107 |         externals: {
108 |             vue: 'Vue'
109 |         },
110 |         devtool: options.pro ? false : 'source-map',
111 |         devServer: {
112 |             hot: true,
113 |             port
114 |         }
115 |     }
116 | }
117 | 


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