c6faec44
 梁灏
init ColorPicker
|
1
|
<template>
|
|
b6bda1dc
梁灏
update ColorPicker
|
2
3
4
5
6
7
8
9
|
<Dropdown trigger="click" :transfer="transfer" :placement="placement">
<div :class="wrapClasses">
<i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
<div :class="inputClasses">
<div :class="[prefixCls + '-color']" style="background-color: rgb(32, 160, 255);"></div>
</div>
</div>
<Dropdown-menu slot="list">
|
|
9af2f01c
梁灏
update ColorPicker
|
10
11
12
13
14
15
16
17
18
19
20
|
<div :class="[prefixCls + '-picker']">
<div :class="[prefixCls + '-picker-panel']"></div>
<div :class="[prefixCls + '-picker-hue-slider']">
<Slider v-model="hueNumber" :min="0" :max="255"></Slider>
</div>
<div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
<Slider v-model="alphaNumber" :min="0" :max="100"></Slider>
</div>
<recommend-colors v-if="colors.length" :list="colors" :class="[prefixCls + '-picker-colors']"></recommend-colors>
<recommend-colors v-if="!colors.length && recommend" :list="recommendedColor" :class="[prefixCls + '-picker-colors', prefixCls + '-picker-colors-recommended']"></recommend-colors>
<Confirm></Confirm>
|
|
b6bda1dc
梁灏
update ColorPicker
|
21
22
23
|
</div>
</Dropdown-menu>
</Dropdown>
|
|
c6faec44
梁灏
init ColorPicker
|
24
25
|
</template>
<script>
|
|
b6bda1dc
梁灏
update ColorPicker
|
26
27
|
import Dropdown from '../dropdown/dropdown.vue';
import DropdownMenu from '../dropdown/dropdown-menu.vue';
|
|
9af2f01c
梁灏
update ColorPicker
|
28
29
30
|
import Slider from '../slider/slider.vue';
import RecommendColors from './recommend-colors.vue';
import Confirm from '../date-picker/base/confirm.vue';
|
|
b6bda1dc
梁灏
update ColorPicker
|
31
32
33
34
35
|
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-color-picker';
const inputPrefixCls = 'ivu-input';
|
|
c6faec44
梁灏
init ColorPicker
|
36
|
export default {
|
|
b6bda1dc
梁灏
update ColorPicker
|
37
|
name: 'ColorPicker',
|
|
9af2f01c
梁灏
update ColorPicker
|
38
|
components: { Dropdown, DropdownMenu, Slider, Confirm, RecommendColors },
|
|
b6bda1dc
梁灏
update ColorPicker
|
39
40
41
42
43
44
45
46
|
props: {
value: {
type: String
},
alpha: {
type: Boolean,
default: false
},
|
|
9af2f01c
梁灏
update ColorPicker
|
47
48
49
50
|
recommend: {
type: Boolean,
default: false
},
|
|
b6bda1dc
梁灏
update ColorPicker
|
51
52
53
54
55
|
format: {
validator (value) {
return oneOf(value, ['hsl', 'hsv', 'hex', 'rgb']);
}
},
|
|
9af2f01c
梁灏
update ColorPicker
|
56
57
58
59
60
61
|
colors: {
type: Array,
default () {
return [];
}
},
|
|
b6bda1dc
梁灏
update ColorPicker
|
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
disabled: {
type: Boolean,
default: false
},
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
}
},
placement: {
validator (value) {
return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
},
default: 'bottom'
},
transfer: {
type: Boolean,
default: false
}
},
|
|
c6faec44
梁灏
init ColorPicker
|
82
|
data () {
|
|
b6bda1dc
梁灏
update ColorPicker
|
83
84
|
return {
prefixCls: prefixCls,
|
|
9af2f01c
梁灏
update ColorPicker
|
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
currentValue: this.value,
hueNumber: 0,
alphaNumber: 0,
recommendedColor: [
'#2d8cf0',
'#19be6b',
'#ff9900',
'#ed3f14',
'#00b5ff',
'#19c919',
'#f9e31c',
'#ea1a1a',
'#9b1dea',
'#00c2b1',
'#ac7a33',
'#1d35ea',
'#42bd82',
'#f16b62',
'#ea4ca3',
'#0d94aa',
'#febd79',
'#3b90fc',
'#000000',
'#ffffff'
]
|
|
b6bda1dc
梁灏
update ColorPicker
|
110
111
112
113
114
115
|
};
},
computed: {
wrapClasses () {
return [
`${prefixCls}-rel`,
|
|
9673dcb0
梁灏
update ColorPicker
|
116
|
`${prefixCls}-${this.size}`,
|
|
b6bda1dc
梁灏
update ColorPicker
|
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
`${inputPrefixCls}-wrapper`,
`${inputPrefixCls}-wrapper-${this.size}`
];
},
inputClasses () {
return [
`${prefixCls}-input`,
`${inputPrefixCls}`,
`${inputPrefixCls}-${this.size}`,
{
[`${inputPrefixCls}-disabled`]: this.disabled
}
];
}
|
|
c6faec44
梁灏
init ColorPicker
|
131
|
},
|
|
b6bda1dc
梁灏
update ColorPicker
|
132
133
134
|
methods: {
}
|
|
c6faec44
梁灏
init ColorPicker
|
135
136
|
};
</script>
|
