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 | 1 | <template> |
| 2 | 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 | 18 | </Modal> |
| 11 | 19 | </div> |
| 12 | 20 | </template> |
| ... | ... | @@ -14,17 +22,32 @@ |
| 14 | 22 | export default { |
| 15 | 23 | data () { |
| 16 | 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 | 25 | <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!remote"></Icon> |
| 26 | 26 | </div> |
| 27 | 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 | 35 | <ul v-show="notFountShow" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul> |
| 30 | 36 | <ul v-show="(!notFound && !remote) || (remote && !loading && !notFound)" :class="[prefixCls + '-dropdown-list']"><slot></slot></ul> |
| 31 | 37 | <ul v-show="loading" :class="[prefixCls + '-loading']">{{ localeLoadingText }}</ul> |
| ... | ... | @@ -37,6 +43,7 @@ |
| 37 | 43 | import Icon from '../icon'; |
| 38 | 44 | import Drop from './dropdown.vue'; |
| 39 | 45 | import clickoutside from '../../directives/clickoutside'; |
| 46 | + import TransferDom from '../../directives/transfer-dom'; | |
| 40 | 47 | import { oneOf, findComponentDownward } from '../../utils/assist'; |
| 41 | 48 | import Emitter from '../../mixins/emitter'; |
| 42 | 49 | import Locale from '../../mixins/locale'; |
| ... | ... | @@ -47,7 +54,7 @@ |
| 47 | 54 | name: 'iSelect', |
| 48 | 55 | mixins: [ Emitter, Locale ], |
| 49 | 56 | components: { Icon, Drop }, |
| 50 | - directives: { clickoutside }, | |
| 57 | + directives: { clickoutside, TransferDom }, | |
| 51 | 58 | props: { |
| 52 | 59 | value: { |
| 53 | 60 | type: [String, Number, Array], |
| ... | ... | @@ -111,6 +118,10 @@ |
| 111 | 118 | return oneOf(value, ['top', 'bottom']); |
| 112 | 119 | }, |
| 113 | 120 | default: 'bottom' |
| 121 | + }, | |
| 122 | + transfer: { | |
| 123 | + type: Boolean, | |
| 124 | + default: false | |
| 114 | 125 | } |
| 115 | 126 | }, |
| 116 | 127 | data () { | ... | ... |
src/styles/components/select-dropdown.less