DatePicker&TimePicker add global setting, #5592

梁灏
1 parent 4beb8e75
Showing 2 changed files with 89 additions and 11 deletions Show diff stats
src/components/date-picker/picker.vue
src/index.js
@@ -22,14 +22,13 @@
                     @on-input-change="handleInputChange"
                     @on-focus="handleFocus"
                     @on-blur="handleBlur"
-                    @on-click="handleIconClick"
                     @click.native="handleFocus"
                     @keydown.native="handleKeydown"
                     @mouseenter.native="handleInputMouseenter"
                     @mouseleave.native="handleInputMouseleave"
-
-                    :icon="iconType"
-                ></i-input>
+                >
+                    <Icon @click="handleIconClick" :type="arrowType" :custom="customArrowType" :size="arrowSize" slot="suffix" />
+                </i-input>
             </slot>
         </div>
         <transition name="transition-drop">
@@ -80,6 +79,7 @@
     import iInput from '../../components/input/input.vue';
     import Drop from '../../components/select/dropdown.vue';
+    import Icon from '../../components/icon/icon.vue';
     import {directive as clickOutside} from 'v-click-outside-x';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
@@ -121,7 +121,7 @@
     export default {
         mixins: [ Emitter ],
-        components: { iInput, Drop },
+        components: { iInput, Drop, Icon },
         directives: { clickOutside, TransferDom },
         props: {
             format: {
@@ -268,12 +268,6 @@
             opened () {
                 return this.open === null ? this.visible : this.open;
             },
-            iconType () {
-                let icon = 'ios-calendar-outline';
-                if (this.type === 'time' || this.type === 'timerange') icon = 'ios-time-outline';
-                if (this.showClose) icon = 'ios-close-circle';
-                return icon;
-            },
             transition () {
                 const bottomPlaced = this.placement.match(/^bottom/);
                 return bottomPlaced ? 'slide-up' : 'slide-down';
@@ -283,6 +277,80 @@
             },
             isConfirm(){
                 return this.confirm || this.type === 'datetime' || this.type === 'datetimerange' || this.multiple;
+            },
+            // 3.4.0, global setting customArrow 有值时，arrow 赋值空
+            arrowType () {
+                let type = '';
+
+                if (this.type === 'time' || this.type === 'timerange') {
+                    type = 'ios-time-outline';
+
+                    if (this.$IVIEW) {
+                        if (this.$IVIEW.timePicker.customIcon) {
+                            type = '';
+                        } else if (this.$IVIEW.timePicker.icon) {
+                            type = this.$IVIEW.timePicker.icon;
+                        }
+                    }
+                } else {
+                    type = 'ios-calendar-outline';
+
+                    if (this.$IVIEW) {
+                        if (this.$IVIEW.datePicker.customIcon) {
+                            type = '';
+                        } else if (this.$IVIEW.datePicker.icon) {
+                            type = this.$IVIEW.datePicker.icon;
+                        }
+                    }
+                }
+
+                if (this.showClose) type = 'ios-close-circle';
+
+                return type;
+            },
+            // 3.4.0, global setting
+            customArrowType () {
+                let type = '';
+
+                if (!this.showClose) {
+                    if (this.type === 'time' || this.type === 'timerange') {
+                        if (this.$IVIEW) {
+                            if (this.$IVIEW.timePicker.customIcon) {
+                                type = this.$IVIEW.timePicker.customIcon;
+                            }
+                        }
+                    } else {
+                        if (this.$IVIEW) {
+                            if (this.$IVIEW.datePicker.customIcon) {
+                                type = this.$IVIEW.datePicker.customIcon;
+                            }
+                        }
+                    }
+                }
+
+                return type;
+            },
+            // 3.4.0, global setting
+            arrowSize () {
+                let size = '';
+
+                if (!this.showClose) {
+                    if (this.type === 'time' || this.type === 'timerange') {
+                        if (this.$IVIEW) {
+                            if (this.$IVIEW.timePicker.iconSize) {
+                                size = this.$IVIEW.timePicker.iconSize;
+                            }
+                        }
+                    } else {
+                        if (this.$IVIEW) {
+                            if (this.$IVIEW.datePicker.iconSize) {
+                                size = this.$IVIEW.datePicker.iconSize;
+                            }
+                        }
+                    }
+                }
+
+                return size;
             }
         },
         methods: {
@@ -201,6 +201,16 @@ const install = function(Vue, opts = {}) {
             arrow: opts.colorPicker ? opts.colorPicker.arrow ? opts.colorPicker.arrow : '' : '',
             customArrow: opts.colorPicker ? opts.colorPicker.customArrow ? opts.colorPicker.customArrow : '' : '',
             arrowSize: opts.colorPicker ? opts.colorPicker.arrowSize ? opts.colorPicker.arrowSize : '' : ''
+        },
+        datePicker: {
+            icon: opts.datePicker ? opts.datePicker.icon ? opts.datePicker.icon : '' : '',
+            customIcon: opts.datePicker ? opts.datePicker.customIcon ? opts.datePicker.customIcon : '' : '',
+            iconSize: opts.datePicker ? opts.datePicker.iconSize ? opts.datePicker.iconSize : '' : ''
+        },
+        timePicker: {
+            icon: opts.timePicker ? opts.timePicker.icon ? opts.timePicker.icon : '' : '',
+            customIcon: opts.timePicker ? opts.timePicker.customIcon ? opts.timePicker.customIcon : '' : '',
+            iconSize: opts.timePicker ? opts.timePicker.iconSize ? opts.timePicker.iconSize : '' : ''
         }
     };