drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

DatePicker&TimePicker add global setting, #5592

Browse source
This commit is contained in:
梁灏 2019-04-10 11:42:44 +08:00
parent 4beb8e75b5
commit 154bb8226e
2 changed files with 89 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/components/date-picker/picker.vue
View file

@ -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: {

10
src/index.js
View file

@ -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 : '' : ''
}
};