chenhaodong / mew-iview

Commit 154bb8226efbc006782aab2c75594a4fbe211e58

Authored by 梁灏
1 parent 4beb8e75

DatePicker&TimePicker add global setting, #5592

Showing 2 changed files with 89 additions and 11 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/picker.vue
  Show/Hide comments   View file @154bb82
... ... @@ -22,14 +22,13 @@
22 22 @on-input-change="handleInputChange"
23 23 @on-focus="handleFocus"
24 24 @on-blur="handleBlur"
25   - @on-click="handleIconClick"
26 25 @click.native="handleFocus"
27 26 @keydown.native="handleKeydown"
28 27 @mouseenter.native="handleInputMouseenter"
29 28 @mouseleave.native="handleInputMouseleave"
30   -
31   - :icon="iconType"
32   - ></i-input>
  29 + >
  30 + <Icon @click="handleIconClick" :type="arrowType" :custom="customArrowType" :size="arrowSize" slot="suffix" />
  31 + </i-input>
33 32 </slot>
34 33 </div>
35 34 <transition name="transition-drop">
... ... @@ -80,6 +79,7 @@
80 79  
81 80 import iInput from '../../components/input/input.vue';
82 81 import Drop from '../../components/select/dropdown.vue';
  82 + import Icon from '../../components/icon/icon.vue';
83 83 import {directive as clickOutside} from 'v-click-outside-x';
84 84 import TransferDom from '../../directives/transfer-dom';
85 85 import { oneOf } from '../../utils/assist';
... ... @@ -121,7 +121,7 @@
121 121  
122 122 export default {
123 123 mixins: [ Emitter ],
124   - components: { iInput, Drop },
  124 + components: { iInput, Drop, Icon },
125 125 directives: { clickOutside, TransferDom },
126 126 props: {
127 127 format: {
... ... @@ -268,12 +268,6 @@
268 268 opened () {
269 269 return this.open === null ? this.visible : this.open;
270 270 },
271   - iconType () {
272   - let icon = 'ios-calendar-outline';
273   - if (this.type === 'time' || this.type === 'timerange') icon = 'ios-time-outline';
274   - if (this.showClose) icon = 'ios-close-circle';
275   - return icon;
276   - },
277 271 transition () {
278 272 const bottomPlaced = this.placement.match(/^bottom/);
279 273 return bottomPlaced ? 'slide-up' : 'slide-down';
... ... @@ -283,6 +277,80 @@
283 277 },
284 278 isConfirm(){
285 279 return this.confirm || this.type === 'datetime' || this.type === 'datetimerange' || this.multiple;
  280 + },
  281 + // 3.4.0, global setting customArrow 有值时，arrow 赋值空
  282 + arrowType () {
  283 + let type = '';
  284 +
  285 + if (this.type === 'time' || this.type === 'timerange') {
  286 + type = 'ios-time-outline';
  287 +
  288 + if (this.$IVIEW) {
  289 + if (this.$IVIEW.timePicker.customIcon) {
  290 + type = '';
  291 + } else if (this.$IVIEW.timePicker.icon) {
  292 + type = this.$IVIEW.timePicker.icon;
  293 + }
  294 + }
  295 + } else {
  296 + type = 'ios-calendar-outline';
  297 +
  298 + if (this.$IVIEW) {
  299 + if (this.$IVIEW.datePicker.customIcon) {
  300 + type = '';
  301 + } else if (this.$IVIEW.datePicker.icon) {
  302 + type = this.$IVIEW.datePicker.icon;
  303 + }
  304 + }
  305 + }
  306 +
  307 + if (this.showClose) type = 'ios-close-circle';
  308 +
  309 + return type;
  310 + },
  311 + // 3.4.0, global setting
  312 + customArrowType () {
  313 + let type = '';
  314 +
  315 + if (!this.showClose) {
  316 + if (this.type === 'time' || this.type === 'timerange') {
  317 + if (this.$IVIEW) {
  318 + if (this.$IVIEW.timePicker.customIcon) {
  319 + type = this.$IVIEW.timePicker.customIcon;
  320 + }
  321 + }
  322 + } else {
  323 + if (this.$IVIEW) {
  324 + if (this.$IVIEW.datePicker.customIcon) {
  325 + type = this.$IVIEW.datePicker.customIcon;
  326 + }
  327 + }
  328 + }
  329 + }
  330 +
  331 + return type;
  332 + },
  333 + // 3.4.0, global setting
  334 + arrowSize () {
  335 + let size = '';
  336 +
  337 + if (!this.showClose) {
  338 + if (this.type === 'time' || this.type === 'timerange') {
  339 + if (this.$IVIEW) {
  340 + if (this.$IVIEW.timePicker.iconSize) {
  341 + size = this.$IVIEW.timePicker.iconSize;
  342 + }
  343 + }
  344 + } else {
  345 + if (this.$IVIEW) {
  346 + if (this.$IVIEW.datePicker.iconSize) {
  347 + size = this.$IVIEW.datePicker.iconSize;
  348 + }
  349 + }
  350 + }
  351 + }
  352 +
  353 + return size;
286 354 }
287 355 },
288 356 methods: {
... ...
src/index.js
  Show/Hide comments   View file @154bb82
... ... @@ -201,6 +201,16 @@ const install = function(Vue, opts = {}) {
201 201 arrow: opts.colorPicker ? opts.colorPicker.arrow ? opts.colorPicker.arrow : '' : '',
202 202 customArrow: opts.colorPicker ? opts.colorPicker.customArrow ? opts.colorPicker.customArrow : '' : '',
203 203 arrowSize: opts.colorPicker ? opts.colorPicker.arrowSize ? opts.colorPicker.arrowSize : '' : ''
  204 + },
  205 + datePicker: {
  206 + icon: opts.datePicker ? opts.datePicker.icon ? opts.datePicker.icon : '' : '',
  207 + customIcon: opts.datePicker ? opts.datePicker.customIcon ? opts.datePicker.customIcon : '' : '',
  208 + iconSize: opts.datePicker ? opts.datePicker.iconSize ? opts.datePicker.iconSize : '' : ''
  209 + },
  210 + timePicker: {
  211 + icon: opts.timePicker ? opts.timePicker.icon ? opts.timePicker.icon : '' : '',
  212 + customIcon: opts.timePicker ? opts.timePicker.customIcon ? opts.timePicker.customIcon : '' : '',
  213 + iconSize: opts.timePicker ? opts.timePicker.iconSize ? opts.timePicker.iconSize : '' : ''
204 214 }
205 215 };
206 216  
... ...