Date add transfer prop

梁灏
1 parent 595cfa72
Showing 6 changed files with 71 additions and 38 deletions Show diff stats
examples/routers/date.vue
examples/routers/modal.vue
examples/routers/select.vue
src/components/date-picker/picker.vue
src/components/select/select.vue
src/styles/components/date-picker.less
 <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: [
 <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: {
 <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} {