1 | <template>
|
2 | <div class="el-color-svpanel"
|
3 | :style="{
|
4 | backgroundColor: background
|
5 | }">
|
6 | <div class="el-color-svpanel__white"></div>
|
7 | <div class="el-color-svpanel__black"></div>
|
8 | <div class="el-color-svpanel__cursor"
|
9 | :style="{
|
10 | top: cursorTop + 'px',
|
11 | left: cursorLeft + 'px'
|
12 | }">
|
13 | <div></div>
|
14 | </div>
|
15 | </div>
|
16 | </template>
|
17 |
|
18 | <script>
|
19 | import draggable from '../draggable';
|
20 |
|
21 | export default {
|
22 | name: 'el-sl-panel',
|
23 |
|
24 | props: {
|
25 | color: {
|
26 | required: true
|
27 | }
|
28 | },
|
29 |
|
30 | computed: {
|
31 | colorValue() {
|
32 | const hue = this.color.get('hue');
|
33 | const value = this.color.get('value');
|
34 | return { hue, value };
|
35 | }
|
36 | },
|
37 |
|
38 | watch: {
|
39 | colorValue() {
|
40 | this.update();
|
41 | }
|
42 | },
|
43 |
|
44 | methods: {
|
45 | update() {
|
46 | const saturation = this.color.get('saturation');
|
47 | const value = this.color.get('value');
|
48 |
|
49 | const el = this.$el;
|
50 | let { clientWidth: width, clientHeight: height } = el;
|
51 |
|
52 | this.cursorLeft = saturation * width / 100;
|
53 | this.cursorTop = (100 - value) * height / 100;
|
54 |
|
55 | this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
|
56 | },
|
57 |
|
58 | handleDrag(event) {
|
59 | const el = this.$el;
|
60 | const rect = el.getBoundingClientRect();
|
61 |
|
62 | let left = event.clientX - rect.left;
|
63 | let top = event.clientY - rect.top;
|
64 | left = Math.max(0, left);
|
65 | left = Math.min(left, rect.width);
|
66 |
|
67 | top = Math.max(0, top);
|
68 | top = Math.min(top, rect.height);
|
69 |
|
70 | this.cursorLeft = left;
|
71 | this.cursorTop = top;
|
72 | this.color.set({
|
73 | saturation: left / rect.width * 100,
|
74 | value: 100 - top / rect.height * 100
|
75 | });
|
76 | }
|
77 | },
|
78 |
|
79 | mounted() {
|
80 | draggable(this.$el, {
|
81 | drag: (event) => {
|
82 | this.handleDrag(event);
|
83 | },
|
84 | end: (event) => {
|
85 | this.handleDrag(event);
|
86 | }
|
87 | });
|
88 |
|
89 | this.update();
|
90 | },
|
91 |
|
92 | data() {
|
93 | return {
|
94 | cursorTop: 0,
|
95 | cursorLeft: 0,
|
96 | background: 'hsl(0, 100%, 50%)'
|
97 | };
|
98 | }
|
99 | };
|
100 | </script>
|