diff --git a/examples/routers/date.vue b/examples/routers/date.vue
index 6abf0c3..aad3af9 100644
--- a/examples/routers/date.vue
+++ b/examples/routers/date.vue
@@ -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>
diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 11a4957..b1e3f70 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -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: [
diff --git a/examples/routers/select.vue b/examples/routers/select.vue
index f1fa98d..cf351e7 100644
--- a/examples/routers/select.vue
+++ b/examples/routers/select.vue
@@ -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: {
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index e311723..c61a88d 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -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;
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 9871562..e010a05 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -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;
diff --git a/src/styles/components/date-picker.less b/src/styles/components/date-picker.less
index b50f099..c008b63 100644
--- a/src/styles/components/date-picker.less
+++ b/src/styles/components/date-picker.less
@@ -191,6 +191,10 @@
}
}
}
+ &-transfer{
+ z-index: @zindex-transfer;
+ max-height: none;
+ }
}
.@{picker-prefix-cls} {
--
libgit2 0.21.4