diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue index 6cddad1..11a4957 100644 --- a/examples/routers/modal.vue +++ b/examples/routers/modal.vue @@ -1,12 +1,20 @@ <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: '重庆市' } ] } diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 169af13..9871562 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -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 () { diff --git a/src/styles/components/select-dropdown.less b/src/styles/components/select-dropdown.less index 91cc4ec..0964be9 100644 --- a/src/styles/components/select-dropdown.less +++ b/src/styles/components/select-dropdown.less @@ -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} { diff --git a/src/styles/custom.less b/src/styles/custom.less index e197f9e..ab86900 100644 --- a/src/styles/custom.less +++ b/src/styles/custom.less @@ -147,6 +147,7 @@ @zindex-message : 1010; @zindex-notification : 1010; @zindex-tooltip : 1060; +@zindex-transfer : 1060; @zindex-loading-bar : 2000; // Animation -- libgit2 0.21.4