Date add transfer prop
This commit is contained in:
梁灏
parent
595cfa72fe
commit
ecaf8d51e0
6 changed files with 71 additions and 38 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<Date-picker type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
<Date-picker transfer type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
<Date-picker type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
<Date-picker type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
<Modal v-model="showModal" title="弹窗">
|
||||
<Tabs>
|
||||
<Tab-pane label="演示" style="height: 80px;">
|
||||
<i-select transfer>
|
||||
<Date-picker transfer type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
<i-select transfer multiple v-model="m1">
|
||||
<i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</Tab-pane>
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
m1: [],
|
||||
showModal: false,
|
||||
showModal2: false,
|
||||
options: [
|
||||
|
|
|
|||
|
|
@ -1,39 +1,41 @@
|
|||
<template>
|
||||
<Row>
|
||||
<Col span="12" style="padding-right:10px">
|
||||
<Select
|
||||
v-model="model13"
|
||||
filterable
|
||||
remote
|
||||
:remote-method="remoteMethod1"
|
||||
:loading="loading1">
|
||||
<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<Select
|
||||
v-model="model14"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
:remote-method="remoteMethod2"
|
||||
:loading="loading2">
|
||||
<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
<i-select transfer multiple v-model="m1">
|
||||
<i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
model13: '',
|
||||
loading1: false,
|
||||
options1: [],
|
||||
model14: [],
|
||||
loading2: false,
|
||||
options2: [],
|
||||
list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'],
|
||||
m1: [],
|
||||
showModal: false,
|
||||
showModal2: false,
|
||||
options: [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京市'
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: '上海市'
|
||||
},
|
||||
{
|
||||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州市'
|
||||
},
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京市'
|
||||
},
|
||||
{
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div
|
||||
:class="[prefixCls]"
|
||||
v-clickoutside="handleClose">
|
||||
<div :class="[prefixCls]" v-clickoutside="handleClose">
|
||||
<div ref="reference" :class="[prefixCls + '-rel']">
|
||||
<slot>
|
||||
<i-input
|
||||
|
|
@ -20,7 +18,14 @@
|
|||
</slot>
|
||||
</div>
|
||||
<transition :name="transition">
|
||||
<Drop v-show="opened" :placement="placement" ref="drop">
|
||||
<Drop
|
||||
@click.native="handleTransferClick"
|
||||
v-show="opened"
|
||||
:class="{ [prefixCls + '-transfer']: transfer }"
|
||||
:placement="placement"
|
||||
ref="drop"
|
||||
:data-transfer="transfer"
|
||||
v-transfer-dom>
|
||||
<div ref="picker"></div>
|
||||
</Drop>
|
||||
</transition>
|
||||
|
|
@ -31,6 +36,7 @@
|
|||
import iInput from '../../components/input/input.vue';
|
||||
import Drop from '../../components/select/dropdown.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import TransferDom from '../../directives/transfer-dom';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import { formatDate, parseDate } from './util';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
|
@ -142,7 +148,7 @@
|
|||
name: 'CalendarPicker',
|
||||
mixins: [ Emitter ],
|
||||
components: { iInput, Drop },
|
||||
directives: { clickoutside },
|
||||
directives: { clickoutside, TransferDom },
|
||||
props: {
|
||||
format: {
|
||||
type: String
|
||||
|
|
@ -188,6 +194,10 @@
|
|||
},
|
||||
options: {
|
||||
type: Object
|
||||
},
|
||||
transfer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -198,6 +208,7 @@
|
|||
picker: null,
|
||||
internalValue: '',
|
||||
disableClickOutSide: false, // fixed when click a date,trigger clickoutside to close picker
|
||||
disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭
|
||||
currentValue: this.value
|
||||
};
|
||||
},
|
||||
|
|
@ -258,7 +269,15 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
// 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
|
||||
handleTransferClick () {
|
||||
if (this.transfer) this.disableCloseUnderTransfer = true;
|
||||
},
|
||||
handleClose () {
|
||||
if (this.disableCloseUnderTransfer) {
|
||||
this.disableCloseUnderTransfer = false;
|
||||
return false;
|
||||
}
|
||||
if (this.open !== null) return;
|
||||
// if (!this.disableClickOutSide) this.visible = false;
|
||||
this.visible = false;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
</div>
|
||||
<transition :name="transitionName">
|
||||
<Drop
|
||||
:class="{ [prefixCls + '-dropdown-transfer']: transfer }"
|
||||
:class="dropdownCls"
|
||||
v-show="dropVisible"
|
||||
:placement="placement"
|
||||
ref="dropdown"
|
||||
|
|
@ -157,6 +157,12 @@
|
|||
}
|
||||
];
|
||||
},
|
||||
dropdownCls () {
|
||||
return {
|
||||
[prefixCls + '-dropdown-transfer']: this.transfer,
|
||||
[prefixCls + '-multiple']: this.multiple && this.transfer
|
||||
};
|
||||
},
|
||||
showPlaceholder () {
|
||||
let status = false;
|
||||
|
||||
|
|
|
|||
|
|
@ -191,6 +191,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&-transfer{
|
||||
z-index: @zindex-transfer;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls} {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue