Commit 4beb8e75b5f7bf6dfc8576b94f708a2541a3a15a

Authored by 梁灏
1 parent 47afd12e

ColorPicker add global setting, #5592

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 &#39;./hue.vue&#39;; @@ -125,6 +125,7 @@ import Hue from &#39;./hue.vue&#39;;
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 &#39;./utils&#39;; @@ -134,7 +135,7 @@ import {changeColor, toRGBAString} from &#39;./utils&#39;;
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
@@ -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