Commit 4beb8e75b5f7bf6dfc8576b94f708a2541a3a15a
1 parent
47afd12e
ColorPicker add global setting, #5592
Showing
2 changed files
with
43 additions
and
4 deletions
Show diff stats
src/components/color-picker/color-picker.vue
@@ -10,7 +10,7 @@ | @@ -10,7 +10,7 @@ | ||
10 | :name="name" | 10 | :name="name" |
11 | :value="currentValue" | 11 | :value="currentValue" |
12 | type="hidden"> | 12 | type="hidden"> |
13 | - <i :class="arrowClasses"></i> | 13 | + <Icon :type="arrowType" :custom="customArrowType" :size="arrowSize" :class="arrowClasses"></Icon> |
14 | <div | 14 | <div |
15 | ref="input" | 15 | ref="input" |
16 | :tabindex="disabled ? undefined : 0" | 16 | :tabindex="disabled ? undefined : 0" |
@@ -125,6 +125,7 @@ import Hue from './hue.vue'; | @@ -125,6 +125,7 @@ import Hue from './hue.vue'; | ||
125 | import Alpha from './alpha.vue'; | 125 | import Alpha from './alpha.vue'; |
126 | import iInput from '../input/input.vue'; | 126 | import iInput from '../input/input.vue'; |
127 | import iButton from '../button/button.vue'; | 127 | import iButton from '../button/button.vue'; |
128 | +import Icon from '../icon/icon.vue'; | ||
128 | import Locale from '../../mixins/locale'; | 129 | import Locale from '../../mixins/locale'; |
129 | import {oneOf} from '../../utils/assist'; | 130 | import {oneOf} from '../../utils/assist'; |
130 | import Emitter from '../../mixins/emitter'; | 131 | import Emitter from '../../mixins/emitter'; |
@@ -134,7 +135,7 @@ import {changeColor, toRGBAString} from './utils'; | @@ -134,7 +135,7 @@ import {changeColor, toRGBAString} from './utils'; | ||
134 | export default { | 135 | export default { |
135 | name: 'ColorPicker', | 136 | name: 'ColorPicker', |
136 | 137 | ||
137 | - components: {Drop, RecommendColors, Saturation, Hue, Alpha, iInput, iButton}, | 138 | + components: {Drop, RecommendColors, Saturation, Hue, Alpha, iInput, iButton, Icon}, |
138 | 139 | ||
139 | directives: {clickOutside, TransferDom}, | 140 | directives: {clickOutside, TransferDom}, |
140 | 141 | ||
@@ -260,8 +261,6 @@ export default { | @@ -260,8 +261,6 @@ export default { | ||
260 | computed: { | 261 | computed: { |
261 | arrowClasses() { | 262 | arrowClasses() { |
262 | return [ | 263 | return [ |
263 | - this.iconPrefixCls, | ||
264 | - `${this.iconPrefixCls}-ios-arrow-down`, | ||
265 | `${this.inputPrefixCls}-icon`, | 264 | `${this.inputPrefixCls}-icon`, |
266 | `${this.inputPrefixCls}-icon-normal`, | 265 | `${this.inputPrefixCls}-icon-normal`, |
267 | ]; | 266 | ]; |
@@ -352,6 +351,41 @@ export default { | @@ -352,6 +351,41 @@ export default { | ||
352 | [`${this.prefixCls}-confirm-color-editable`]: this.editable | 351 | [`${this.prefixCls}-confirm-color-editable`]: this.editable |
353 | } | 352 | } |
354 | ]; | 353 | ]; |
354 | + }, | ||
355 | + // 3.4.0, global setting customArrow 有值时,arrow 赋值空 | ||
356 | + arrowType () { | ||
357 | + let type = 'ios-arrow-down'; | ||
358 | + | ||
359 | + if (this.$IVIEW) { | ||
360 | + if (this.$IVIEW.colorPicker.customArrow) { | ||
361 | + type = ''; | ||
362 | + } else if (this.$IVIEW.colorPicker.arrow) { | ||
363 | + type = this.$IVIEW.colorPicker.arrow; | ||
364 | + } | ||
365 | + } | ||
366 | + return type; | ||
367 | + }, | ||
368 | + // 3.4.0, global setting | ||
369 | + customArrowType () { | ||
370 | + let type = ''; | ||
371 | + | ||
372 | + if (this.$IVIEW) { | ||
373 | + if (this.$IVIEW.colorPicker.customArrow) { | ||
374 | + type = this.$IVIEW.colorPicker.customArrow; | ||
375 | + } | ||
376 | + } | ||
377 | + return type; | ||
378 | + }, | ||
379 | + // 3.4.0, global setting | ||
380 | + arrowSize () { | ||
381 | + let size = ''; | ||
382 | + | ||
383 | + if (this.$IVIEW) { | ||
384 | + if (this.$IVIEW.colorPicker.arrowSize) { | ||
385 | + size = this.$IVIEW.colorPicker.arrowSize; | ||
386 | + } | ||
387 | + } | ||
388 | + return size; | ||
355 | } | 389 | } |
356 | }, | 390 | }, |
357 | 391 |
src/index.js
@@ -196,6 +196,11 @@ const install = function(Vue, opts = {}) { | @@ -196,6 +196,11 @@ const install = function(Vue, opts = {}) { | ||
196 | itemArrow: opts.cascader ? opts.cascader.itemArrow ? opts.cascader.itemArrow : '' : '', | 196 | itemArrow: opts.cascader ? opts.cascader.itemArrow ? opts.cascader.itemArrow : '' : '', |
197 | customItemArrow: opts.cascader ? opts.cascader.customItemArrow ? opts.cascader.customItemArrow : '' : '', | 197 | customItemArrow: opts.cascader ? opts.cascader.customItemArrow ? opts.cascader.customItemArrow : '' : '', |
198 | itemArrowSize: opts.cascader ? opts.cascader.itemArrowSize ? opts.cascader.itemArrowSize : '' : '' | 198 | itemArrowSize: opts.cascader ? opts.cascader.itemArrowSize ? opts.cascader.itemArrowSize : '' : '' |
199 | + }, | ||
200 | + colorPicker: { | ||
201 | + arrow: opts.colorPicker ? opts.colorPicker.arrow ? opts.colorPicker.arrow : '' : '', | ||
202 | + customArrow: opts.colorPicker ? opts.colorPicker.customArrow ? opts.colorPicker.customArrow : '' : '', | ||
203 | + arrowSize: opts.colorPicker ? opts.colorPicker.arrowSize ? opts.colorPicker.arrowSize : '' : '' | ||
199 | } | 204 | } |
200 | }; | 205 | }; |
201 | 206 |