Commit 595cfa72febd71cc58cb4e880b9c47f151d20347
1 parent
835b37ff
fixed #1187 #844 #1053
Select add transfer prop
Showing
4 changed files
with
55 additions
and
17 deletions
Show diff stats
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 |