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 |