Commit 595cfa72febd71cc58cb4e880b9c47f151d20347

Authored by 梁灏
1 parent 835b37ff

fixed #1187 #844 #1053

Select add transfer prop
examples/routers/modal.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 - <i-button @click="modal=true">show modal</i-button>  
4 - <Modal v-model="modal" @on-ok="resetForm" @on-cancel="resetForm" title="表单">  
5 - <div>  
6 - <i-select ref="formSelect" filterable remote clearable :remote-method="remoteMethod" :loading="loading">  
7 - <i-option v-for="option in options" :value="option.value" :key="option.value">{{option.label}}</i-option>  
8 - </i-select>  
9 - </div> 3 + <i-button @click="showModal = true">Modal有Tabs</i-button>
  4 + <i-button @click="showModal2 = true">Modal无Tabs</i-button>
  5 + <Modal v-model="showModal" title="弹窗">
  6 + <Tabs>
  7 + <Tab-pane label="演示" style="height: 80px;">
  8 + <i-select transfer>
  9 + <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
  10 + </i-select>
  11 + </Tab-pane>
  12 + </Tabs>
  13 + </Modal>
  14 + <Modal v-model="showModal2" title="弹窗">
  15 + <i-select>
  16 + <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
  17 + </i-select>
10 </Modal> 18 </Modal>
11 </div> 19 </div>
12 </template> 20 </template>
@@ -14,17 +22,32 @@ @@ -14,17 +22,32 @@
14 export default { 22 export default {
15 data () { 23 data () {
16 return { 24 return {
17 - modal: false,  
18 - loading: false,  
19 - options: [],  
20 - cityList: [ 25 + showModal: false,
  26 + showModal2: false,
  27 + options: [
  28 + {
  29 + value: 'beijing',
  30 + label: '北京市'
  31 + },
  32 + {
  33 + value: 'shanghai',
  34 + label: '上海市'
  35 + },
  36 + {
  37 + value: 'shenzhen',
  38 + label: '深圳市'
  39 + },
  40 + {
  41 + value: 'hangzhou',
  42 + label: '杭州市'
  43 + },
21 { 44 {
22 - value: "beijing",  
23 - label: "北京市" 45 + value: 'nanjing',
  46 + label: '南京市'
24 }, 47 },
25 { 48 {
26 - value: "shanghai",  
27 - label: "上海市" 49 + value: 'chongqing',
  50 + label: '重庆市'
28 } 51 }
29 ] 52 ]
30 } 53 }
src/components/select/select.vue
@@ -25,7 +25,13 @@ @@ -25,7 +25,13 @@
25 <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!remote"></Icon> 25 <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!remote"></Icon>
26 </div> 26 </div>
27 <transition :name="transitionName"> 27 <transition :name="transitionName">
28 - <Drop v-show="dropVisible" :placement="placement" ref="dropdown"> 28 + <Drop
  29 + :class="{ [prefixCls + '-dropdown-transfer']: transfer }"
  30 + v-show="dropVisible"
  31 + :placement="placement"
  32 + ref="dropdown"
  33 + :data-transfer="transfer"
  34 + v-transfer-dom>
29 <ul v-show="notFountShow" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul> 35 <ul v-show="notFountShow" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
30 <ul v-show="(!notFound && !remote) || (remote && !loading && !notFound)" :class="[prefixCls + '-dropdown-list']"><slot></slot></ul> 36 <ul v-show="(!notFound && !remote) || (remote && !loading && !notFound)" :class="[prefixCls + '-dropdown-list']"><slot></slot></ul>
31 <ul v-show="loading" :class="[prefixCls + '-loading']">{{ localeLoadingText }}</ul> 37 <ul v-show="loading" :class="[prefixCls + '-loading']">{{ localeLoadingText }}</ul>
@@ -37,6 +43,7 @@ @@ -37,6 +43,7 @@
37 import Icon from '../icon'; 43 import Icon from '../icon';
38 import Drop from './dropdown.vue'; 44 import Drop from './dropdown.vue';
39 import clickoutside from '../../directives/clickoutside'; 45 import clickoutside from '../../directives/clickoutside';
  46 + import TransferDom from '../../directives/transfer-dom';
40 import { oneOf, findComponentDownward } from '../../utils/assist'; 47 import { oneOf, findComponentDownward } from '../../utils/assist';
41 import Emitter from '../../mixins/emitter'; 48 import Emitter from '../../mixins/emitter';
42 import Locale from '../../mixins/locale'; 49 import Locale from '../../mixins/locale';
@@ -47,7 +54,7 @@ @@ -47,7 +54,7 @@
47 name: 'iSelect', 54 name: 'iSelect',
48 mixins: [ Emitter, Locale ], 55 mixins: [ Emitter, Locale ],
49 components: { Icon, Drop }, 56 components: { Icon, Drop },
50 - directives: { clickoutside }, 57 + directives: { clickoutside, TransferDom },
51 props: { 58 props: {
52 value: { 59 value: {
53 type: [String, Number, Array], 60 type: [String, Number, Array],
@@ -111,6 +118,10 @@ @@ -111,6 +118,10 @@
111 return oneOf(value, ['top', 'bottom']); 118 return oneOf(value, ['top', 'bottom']);
112 }, 119 },
113 default: 'bottom' 120 default: 'bottom'
  121 + },
  122 + transfer: {
  123 + type: Boolean,
  124 + default: false
114 } 125 }
115 }, 126 },
116 data () { 127 data () {
src/styles/components/select-dropdown.less
@@ -14,6 +14,9 @@ @@ -14,6 +14,9 @@
14 box-shadow: @shadow-base; 14 box-shadow: @shadow-base;
15 position: absolute; 15 position: absolute;
16 z-index: @zindex-select; 16 z-index: @zindex-select;
  17 + &-transfer{
  18 + z-index: @zindex-transfer;
  19 + }
17 } 20 }
18 .@{modal-prefix-cls} { 21 .@{modal-prefix-cls} {
19 .@{select-dropdown-prefix-cls} { 22 .@{select-dropdown-prefix-cls} {
src/styles/custom.less
@@ -147,6 +147,7 @@ @@ -147,6 +147,7 @@
147 @zindex-message : 1010; 147 @zindex-message : 1010;
148 @zindex-notification : 1010; 148 @zindex-notification : 1010;
149 @zindex-tooltip : 1060; 149 @zindex-tooltip : 1060;
  150 +@zindex-transfer : 1060;
150 @zindex-loading-bar : 2000; 151 @zindex-loading-bar : 2000;
151 152
152 // Animation 153 // Animation