1 | <template>
|
2 | <div class="el-color-predefine">
|
3 | <div class="el-color-predefine__colors">
|
4 | <div class="el-color-predefine__color-selector"
|
5 | :class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
|
6 | v-for="(item, index) in rgbaColors"
|
7 | :key="colors[index]"
|
8 | @click="handleSelect(index)">
|
9 | <div :style="{'background-color': item.value}">
|
10 | </div>
|
11 | </div>
|
12 | </div>
|
13 | </div>
|
14 | </template>
|
15 |
|
16 | <script>
|
17 | import Color from '../color';
|
18 |
|
19 | export default {
|
20 | props: {
|
21 | colors: { type: Array, required: true },
|
22 | color: { required: true }
|
23 | },
|
24 | data() {
|
25 | return {
|
26 | rgbaColors: this.parseColors(this.colors, this.color)
|
27 | };
|
28 | },
|
29 | methods: {
|
30 | handleSelect(index) {
|
31 | this.color.fromString(this.colors[index]);
|
32 | },
|
33 | parseColors(colors, color) {
|
34 | return colors.map(value => {
|
35 | const c = new Color();
|
36 | c.enableAlpha = true;
|
37 | c.format = 'rgba';
|
38 | c.fromString(value);
|
39 | c.selected = c.value === color.value;
|
40 | return c;
|
41 | });
|
42 | }
|
43 | },
|
44 | watch: {
|
45 | '$parent.currentColor'(val) {
|
46 | const color = new Color();
|
47 | color.fromString(val);
|
48 |
|
49 | this.rgbaColors.forEach(item => {
|
50 | item.selected = color.compare(item);
|
51 | });
|
52 | },
|
53 | colors(newVal) {
|
54 | this.rgbaColors = this.parseColors(newVal, this.color);
|
55 | },
|
56 | color(newVal) {
|
57 | this.rgbaColors = this.parseColors(this.colors, newVal);
|
58 | }
|
59 | }
|
60 | };
|
61 | </script> |
\ | No newline at end of file |