fixed #1187 #844 #1053

Select add transfer prop

fixed #1187 #844 #1053
Select add transfer prop
梁灏
1 parent 835b37ff
Showing 4 changed files with 55 additions and 17 deletions Show diff stats
examples/routers/modal.vue
src/components/select/select.vue
src/styles/components/select-dropdown.less
src/styles/custom.less
 <template>
     <div>
-        <i-button @click="modal=true">show modal</i-button>
-        <Modal v-model="modal" @on-ok="resetForm" @on-cancel="resetForm" title="表单">
-            <div>
-                <i-select ref="formSelect" filterable remote clearable :remote-method="remoteMethod" :loading="loading">
-                    <i-option v-for="option in options" :value="option.value" :key="option.value">{{option.label}}</i-option>
-                </i-select>
-            </div>
+        <i-button @click="showModal = true">Modal有Tabs</i-button>
+        <i-button @click="showModal2 = true">Modal无Tabs</i-button>
+        <Modal v-model="showModal" title="弹窗">
+            <Tabs>
+                <Tab-pane label="演示" style="height: 80px;">
+                    <i-select transfer>
+                        <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
+                    </i-select>
+                </Tab-pane>
+            </Tabs>
+        </Modal>
+        <Modal v-model="showModal2" title="弹窗">
+            <i-select>
+                <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
+            </i-select>
         </Modal>
     </div>
 </template>
@@ -14,17 +22,32 @@
     export default {
         data () {
             return {
-                modal: false,
-                loading: false,
-                options: [],
-                cityList: [
+                showModal: false,
+                showModal2: false,
+                options: [
+                    {
+                        value: 'beijing',
+                        label: '北京市'
+                    },
+                    {
+                        value: 'shanghai',
+                        label: '上海市'
+                    },
+                    {
+                        value: 'shenzhen',
+                        label: '深圳市'
+                    },
+                    {
+                        value: 'hangzhou',
+                        label: '杭州市'
+                    },
                     {
-                        value: "beijing",
-                        label: "北京市"
+                        value: 'nanjing',
+                        label: '南京市'
                     },
                     {
-                        value: "shanghai",
-                        label: "上海市"
+                        value: 'chongqing',
+                        label: '重庆市'
                     }
                 ]
             }
@@ -25,7 +25,13 @@
             <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!remote"></Icon>
         </div>
         <transition :name="transitionName">
-            <Drop v-show="dropVisible" :placement="placement" ref="dropdown">
+            <Drop
+                :class="{ [prefixCls + '-dropdown-transfer']: transfer }"
+                v-show="dropVisible"
+                :placement="placement"
+                ref="dropdown"
+                :data-transfer="transfer"
+                v-transfer-dom>
                 <ul v-show="notFountShow" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
                 <ul v-show="(!notFound && !remote) || (remote && !loading && !notFound)" :class="[prefixCls + '-dropdown-list']"><slot></slot></ul>
                 <ul v-show="loading" :class="[prefixCls + '-loading']">{{ localeLoadingText }}</ul>
@@ -37,6 +43,7 @@
     import Icon from '../icon';
     import Drop from './dropdown.vue';
     import clickoutside from '../../directives/clickoutside';
+    import TransferDom from '../../directives/transfer-dom';
     import { oneOf, findComponentDownward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
     import Locale from '../../mixins/locale';
@@ -47,7 +54,7 @@
         name: 'iSelect',
         mixins: [ Emitter, Locale ],
         components: { Icon, Drop },
-        directives: { clickoutside },
+        directives: { clickoutside, TransferDom },
         props: {
             value: {
                 type: [String, Number, Array],
@@ -111,6 +118,10 @@
                     return oneOf(value, ['top', 'bottom']);
                 },
                 default: 'bottom'
+            },
+            transfer: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -14,6 +14,9 @@
     box-shadow: @shadow-base;
     position: absolute;
     z-index: @zindex-select;
+    &-transfer{
+        z-index: @zindex-transfer;
+    }
 }
 .@{modal-prefix-cls} {
     .@{select-dropdown-prefix-cls} {
@@ -147,6 +147,7 @@
 @zindex-message         : 1010;
 @zindex-notification    : 1010;
 @zindex-tooltip         : 1060;
+@zindex-transfer        : 1060;
 @zindex-loading-bar     : 2000;
 // Animation