Date add transfer prop

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>

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: [

examples/routers/select.vue

@@ -1,39 +1,41 @@
 <template>
-    <Row>
+    <i-select transfer multiple v-model="m1">
-        <Col span="12" style="padding-right:10px">
+        <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
-        <Select
+    </i-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>
 </template>
 <script>
     export default {
         data () {
             return {
-                model13: '',
+                m1: [],
-                loading1: false,
+                showModal: false,
-                options1: [],
+                showModal2: false,
-                model14: [],
+                options: [
-                loading2: false,
+                    {
-                options2: [],
+                        value: 'beijing',
-                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'],
+                        label: '北京市'
+                    },
+                    {
+                        value: 'shanghai',
+                        label: '上海市'
+                    },
+                    {
+                        value: 'shenzhen',
+                        label: '深圳市'
+                    },
+                    {
+                        value: 'hangzhou',
+                        label: '杭州市'
+                    },
+                    {
+                        value: 'nanjing',
+                        label: '南京市'
+                    },
+                    {
+                        value: 'chongqing',
+                        label: '重庆市'
+                    }
+                ]
             }
         },
         methods: {

src/components/date-picker/picker.vue

@@ -1,7 +1,5 @@
 <template>
-    <div
+    <div :class="[prefixCls]" v-clickoutside="handleClose">
-        :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;

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;
 

src/styles/components/date-picker.less

@@ -191,6 +191,10 @@
             }
         }
     }
+    &-transfer{
+        z-index: @zindex-transfer;
+        max-height: none;
+    }
 }
 
 .@{picker-prefix-cls} {