Commit ca928d83e5149d5605d66672bd3855224a328eeb
Committed by
GitHub

Merge pull request #11 from iview/2.0
合并
Showing
19 changed files
with
241 additions
and
36 deletions
Show diff stats
examples/routers/modal.vue
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div> |
3 | - <Button @click="modal12 = true">Open the first modal</Button> | ||
4 | - <Button @click="modal13 = true">Open the second modal</Button> | ||
5 | - <Modal v-model="modal12" draggable scrollable title="Modal 1"> | ||
6 | - <div>This is the first modal</div> | ||
7 | - </Modal> | ||
8 | - <Modal v-model="modal13" draggable scrollable title="Modal 2"> | ||
9 | - <div>This is the second modal</div> | 3 | + <Button type="primary" @click="modal1 = true">Display dialog box</Button> |
4 | + <Modal | ||
5 | + v-model="modal1" | ||
6 | + title="Common Modal dialog box title" | ||
7 | + @on-ok="ok" | ||
8 | + @on-cancel="cancel"> | ||
9 | + <p>Content of dialog</p> | ||
10 | + <p>Content of dialog</p> | ||
11 | + <p>Content of dialog</p> | ||
12 | + <Button @click="openMessage">Message</Button> | ||
13 | + <Select v-model="model1" style="width:200px" :transfer="false"> | ||
14 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | ||
15 | + </Select> | ||
16 | + <Select v-model="model1" style="width:200px" :transfer="true"> | ||
17 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | ||
18 | + </Select> | ||
19 | + <Dropdown transfer> | ||
20 | + <a href="javascript:void(0)"> | ||
21 | + 下拉菜单 | ||
22 | + <Icon type="ios-arrow-down"></Icon> | ||
23 | + </a> | ||
24 | + <DropdownMenu slot="list"> | ||
25 | + <DropdownItem>驴打滚</DropdownItem> | ||
26 | + <DropdownItem>炸酱面</DropdownItem> | ||
27 | + <DropdownItem disabled>豆汁儿</DropdownItem> | ||
28 | + <DropdownItem>冰糖葫芦</DropdownItem> | ||
29 | + <DropdownItem divided>北京烤鸭</DropdownItem> | ||
30 | + </DropdownMenu> | ||
31 | + </Dropdown> | ||
32 | + <DatePicker type="date" placeholder="Select date" style="width: 200px" transfer></DatePicker> | ||
33 | + <Cascader :data="data" v-model="value1" transfer></Cascader> | ||
34 | + <Tooltip content="Here is the prompt text" transfer> | ||
35 | + A balloon appears when the mouse passes over this text | ||
36 | + </Tooltip> | ||
37 | + <Poptip trigger="hover" title="Title" content="content" transfer> | ||
38 | + <Button>Hover</Button> | ||
39 | + </Poptip> | ||
40 | + <Button type="primary" @click="handleSpinShow">整页显示,3秒后关闭</Button> | ||
10 | </Modal> | 41 | </Modal> |
42 | + <Select v-model="model1" style="width:200px" :transfer="false"> | ||
43 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | ||
44 | + </Select> | ||
45 | + <Select v-model="model1" style="width:200px" :transfer="true"> | ||
46 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | ||
47 | + </Select> | ||
11 | </div> | 48 | </div> |
12 | </template> | 49 | </template> |
13 | <script> | 50 | <script> |
14 | export default { | 51 | export default { |
15 | data () { | 52 | data () { |
16 | return { | 53 | return { |
17 | - modal12: false, | ||
18 | - modal13: false | 54 | + modal1: false, |
55 | + cityList: [ | ||
56 | + { | ||
57 | + value: 'New York', | ||
58 | + label: 'New York' | ||
59 | + }, | ||
60 | + { | ||
61 | + value: 'London', | ||
62 | + label: 'London' | ||
63 | + }, | ||
64 | + { | ||
65 | + value: 'Sydney', | ||
66 | + label: 'Sydney' | ||
67 | + }, | ||
68 | + { | ||
69 | + value: 'Ottawa', | ||
70 | + label: 'Ottawa' | ||
71 | + }, | ||
72 | + { | ||
73 | + value: 'Paris', | ||
74 | + label: 'Paris' | ||
75 | + }, | ||
76 | + { | ||
77 | + value: 'Canberra', | ||
78 | + label: 'Canberra' | ||
79 | + } | ||
80 | + ], | ||
81 | + model1: '', | ||
82 | + value1: [], | ||
83 | + data: [{ | ||
84 | + value: 'beijing', | ||
85 | + label: '北京', | ||
86 | + children: [ | ||
87 | + { | ||
88 | + value: 'gugong', | ||
89 | + label: '故宫' | ||
90 | + }, | ||
91 | + { | ||
92 | + value: 'tiantan', | ||
93 | + label: '天坛' | ||
94 | + }, | ||
95 | + { | ||
96 | + value: 'wangfujing', | ||
97 | + label: '王府井' | ||
98 | + } | ||
99 | + ] | ||
100 | + }, { | ||
101 | + value: 'jiangsu', | ||
102 | + label: '江苏', | ||
103 | + children: [ | ||
104 | + { | ||
105 | + value: 'nanjing', | ||
106 | + label: '南京', | ||
107 | + children: [ | ||
108 | + { | ||
109 | + value: 'fuzimiao', | ||
110 | + label: '夫子庙', | ||
111 | + } | ||
112 | + ] | ||
113 | + }, | ||
114 | + { | ||
115 | + value: 'suzhou', | ||
116 | + label: '苏州', | ||
117 | + children: [ | ||
118 | + { | ||
119 | + value: 'zhuozhengyuan', | ||
120 | + label: '拙政园', | ||
121 | + }, | ||
122 | + { | ||
123 | + value: 'shizilin', | ||
124 | + label: '狮子林', | ||
125 | + } | ||
126 | + ] | ||
127 | + } | ||
128 | + ], | ||
129 | + }] | ||
19 | } | 130 | } |
131 | + }, | ||
132 | + methods: { | ||
133 | + ok () { | ||
134 | +// this.$Message.info('Clicked ok'); | ||
135 | + }, | ||
136 | + cancel () { | ||
137 | +// this.$Message.info('Clicked cancel'); | ||
138 | + }, | ||
139 | + openMessage () { | ||
140 | + this.$Message.info({ | ||
141 | + content: 'hello world', | ||
142 | + duration: 2 | ||
143 | + }); | ||
144 | + }, | ||
145 | + handleSpinShow () { | ||
146 | + this.$Spin.show(); | ||
147 | + }, | ||
20 | } | 148 | } |
21 | } | 149 | } |
22 | </script> | 150 | </script> |
package.json
src/components/base/notification/notification.vue
1 | <template> | 1 | <template> |
2 | - <div :class="classes" :style="styles"> | 2 | + <div :class="classes" :style="wrapStyles"> |
3 | <Notice | 3 | <Notice |
4 | v-for="notice in notices" | 4 | v-for="notice in notices" |
5 | :key="notice.name" | 5 | :key="notice.name" |
@@ -21,6 +21,8 @@ | @@ -21,6 +21,8 @@ | ||
21 | <script> | 21 | <script> |
22 | import Notice from './notice.vue'; | 22 | import Notice from './notice.vue'; |
23 | 23 | ||
24 | + import { transferIndex, transferIncrease } from '../../../utils/transfer-queue'; | ||
25 | + | ||
24 | const prefixCls = 'ivu-notification'; | 26 | const prefixCls = 'ivu-notification'; |
25 | let seed = 0; | 27 | let seed = 0; |
26 | const now = Date.now(); | 28 | const now = Date.now(); |
@@ -54,7 +56,8 @@ | @@ -54,7 +56,8 @@ | ||
54 | }, | 56 | }, |
55 | data () { | 57 | data () { |
56 | return { | 58 | return { |
57 | - notices: [] | 59 | + notices: [], |
60 | + tIndex: this.handleGetIndex() | ||
58 | }; | 61 | }; |
59 | }, | 62 | }, |
60 | computed: { | 63 | computed: { |
@@ -65,6 +68,12 @@ | @@ -65,6 +68,12 @@ | ||
65 | [`${this.className}`]: !!this.className | 68 | [`${this.className}`]: !!this.className |
66 | } | 69 | } |
67 | ]; | 70 | ]; |
71 | + }, | ||
72 | + wrapStyles () { | ||
73 | + let styles = Object.assign({}, this.styles); | ||
74 | + styles['z-index'] = 1010 + this.tIndex; | ||
75 | + | ||
76 | + return styles; | ||
68 | } | 77 | } |
69 | }, | 78 | }, |
70 | methods: { | 79 | methods: { |
@@ -82,6 +91,7 @@ | @@ -82,6 +91,7 @@ | ||
82 | }, notice); | 91 | }, notice); |
83 | 92 | ||
84 | this.notices.push(_notice); | 93 | this.notices.push(_notice); |
94 | + this.tIndex = this.handleGetIndex(); | ||
85 | }, | 95 | }, |
86 | close (name) { | 96 | close (name) { |
87 | const notices = this.notices; | 97 | const notices = this.notices; |
@@ -94,7 +104,11 @@ | @@ -94,7 +104,11 @@ | ||
94 | }, | 104 | }, |
95 | closeAll () { | 105 | closeAll () { |
96 | this.notices = []; | 106 | this.notices = []; |
97 | - } | 107 | + }, |
108 | + handleGetIndex () { | ||
109 | + transferIncrease(); | ||
110 | + return transferIndex; | ||
111 | + }, | ||
98 | } | 112 | } |
99 | }; | 113 | }; |
100 | </script> | 114 | </script> |
src/components/base/popper.js
@@ -60,6 +60,7 @@ export default { | @@ -60,6 +60,7 @@ export default { | ||
60 | }, | 60 | }, |
61 | visible(val) { | 61 | visible(val) { |
62 | if (val) { | 62 | if (val) { |
63 | + this.handleIndexIncrease(); // just use for Poptip | ||
63 | this.updatePopper(); | 64 | this.updatePopper(); |
64 | this.$emit('on-popper-show'); | 65 | this.$emit('on-popper-show'); |
65 | } else { | 66 | } else { |
src/components/cascader/cascader.vue
@@ -26,6 +26,7 @@ | @@ -26,6 +26,7 @@ | ||
26 | :class="{ [prefixCls + '-transfer']: transfer }" | 26 | :class="{ [prefixCls + '-transfer']: transfer }" |
27 | ref="drop" | 27 | ref="drop" |
28 | :data-transfer="transfer" | 28 | :data-transfer="transfer" |
29 | + :transfer="transfer" | ||
29 | v-transfer-dom> | 30 | v-transfer-dom> |
30 | <div> | 31 | <div> |
31 | <Caspanel | 32 | <Caspanel |
src/components/color-picker/color-picker.vue
@@ -40,6 +40,7 @@ | @@ -40,6 +40,7 @@ | ||
40 | ref="drop" | 40 | ref="drop" |
41 | :placement="placement" | 41 | :placement="placement" |
42 | :data-transfer="transfer" | 42 | :data-transfer="transfer" |
43 | + :transfer="transfer" | ||
43 | :class="dropClasses" | 44 | :class="dropClasses" |
44 | > | 45 | > |
45 | <transition name="fade"> | 46 | <transition name="fade"> |
src/components/date-picker/picker.vue
src/components/date-picker/util.js
@@ -174,7 +174,10 @@ const RANGE_PARSER = function(text, format) { | @@ -174,7 +174,10 @@ const RANGE_PARSER = function(text, format) { | ||
174 | const range1 = array[0]; | 174 | const range1 = array[0]; |
175 | const range2 = array[1]; | 175 | const range2 = array[1]; |
176 | 176 | ||
177 | - return [parseDate(range1, format), parseDate(range2, format)]; | 177 | + return [ |
178 | + range1 instanceof Date ? range1 : parseDate(range1, format), | ||
179 | + range2 instanceof Date ? range2 : parseDate(range2, format), | ||
180 | + ]; | ||
178 | } | 181 | } |
179 | return []; | 182 | return []; |
180 | }; | 183 | }; |
src/components/dropdown/dropdown.vue
@@ -14,6 +14,7 @@ | @@ -14,6 +14,7 @@ | ||
14 | @mouseenter.native="handleMouseenter" | 14 | @mouseenter.native="handleMouseenter" |
15 | @mouseleave.native="handleMouseleave" | 15 | @mouseleave.native="handleMouseleave" |
16 | :data-transfer="transfer" | 16 | :data-transfer="transfer" |
17 | + :transfer="transfer" | ||
17 | v-transfer-dom><slot name="list"></slot></Drop> | 18 | v-transfer-dom><slot name="list"></slot></Drop> |
18 | </transition> | 19 | </transition> |
19 | </div> | 20 | </div> |
src/components/input-number/input-number.vue
@@ -80,9 +80,9 @@ | @@ -80,9 +80,9 @@ | ||
80 | type: Number, | 80 | type: Number, |
81 | default: 1 | 81 | default: 1 |
82 | }, | 82 | }, |
83 | - activeChange:{ | ||
84 | - type:Boolean, | ||
85 | - default:true | 83 | + activeChange: { |
84 | + type: Boolean, | ||
85 | + default: true | ||
86 | }, | 86 | }, |
87 | value: { | 87 | value: { |
88 | type: Number, | 88 | type: Number, |
@@ -314,7 +314,6 @@ | @@ -314,7 +314,6 @@ | ||
314 | }, | 314 | }, |
315 | changeVal (val) { | 315 | changeVal (val) { |
316 | val = Number(val); | 316 | val = Number(val); |
317 | - //this.setValue(val); | ||
318 | if (!isNaN(val)) { | 317 | if (!isNaN(val)) { |
319 | const step = this.step; | 318 | const step = this.step; |
320 | 319 |
src/components/modal/modal.vue
1 | <template> | 1 | <template> |
2 | <div v-transfer-dom :data-transfer="transfer"> | 2 | <div v-transfer-dom :data-transfer="transfer"> |
3 | <transition :name="transitionNames[1]"> | 3 | <transition :name="transitionNames[1]"> |
4 | - <div :class="maskClasses" v-show="visible" v-if="showMask" @click="handleMask"></div> | 4 | + <div :class="maskClasses" :style="wrapStyles" v-show="visible" v-if="showMask" @click="handleMask"></div> |
5 | </transition> | 5 | </transition> |
6 | <div :class="wrapClasses" :style="wrapStyles" @click="handleWrapClick"> | 6 | <div :class="wrapClasses" :style="wrapStyles" @click="handleWrapClick"> |
7 | <transition :name="transitionNames[0]" @after-leave="animationFinish"> | 7 | <transition :name="transitionNames[0]" @after-leave="animationFinish"> |
@@ -40,7 +40,7 @@ | @@ -40,7 +40,7 @@ | ||
40 | import { on, off } from '../../utils/dom'; | 40 | import { on, off } from '../../utils/dom'; |
41 | import { findComponentsDownward } from '../../utils/assist'; | 41 | import { findComponentsDownward } from '../../utils/assist'; |
42 | 42 | ||
43 | - import { modalIndex, modalIncrease } from './q'; | 43 | + import { transferIndex as modalIndex, transferIncrease as modalIncrease } from '../../utils/transfer-queue'; |
44 | 44 | ||
45 | const prefixCls = 'ivu-modal'; | 45 | const prefixCls = 'ivu-modal'; |
46 | 46 | ||
@@ -325,7 +325,9 @@ | @@ -325,7 +325,9 @@ | ||
325 | return modalIndex; | 325 | return modalIndex; |
326 | }, | 326 | }, |
327 | handleClickModal () { | 327 | handleClickModal () { |
328 | - this.modalIndex = this.handleGetModalIndex(); | 328 | + if (this.draggable) { |
329 | + this.modalIndex = this.handleGetModalIndex(); | ||
330 | + } | ||
329 | } | 331 | } |
330 | }, | 332 | }, |
331 | mounted () { | 333 | mounted () { |
src/components/modal/q.js deleted
src/components/poptip/poptip.vue
@@ -52,6 +52,7 @@ | @@ -52,6 +52,7 @@ | ||
52 | import {directive as clickOutside} from 'v-click-outside-x'; | 52 | import {directive as clickOutside} from 'v-click-outside-x'; |
53 | import TransferDom from '../../directives/transfer-dom'; | 53 | import TransferDom from '../../directives/transfer-dom'; |
54 | import { oneOf } from '../../utils/assist'; | 54 | import { oneOf } from '../../utils/assist'; |
55 | + import { transferIndex, transferIncrease } from '../../utils/transfer-queue'; | ||
55 | import Locale from '../../mixins/locale'; | 56 | import Locale from '../../mixins/locale'; |
56 | 57 | ||
57 | const prefixCls = 'ivu-poptip'; | 58 | const prefixCls = 'ivu-poptip'; |
@@ -118,6 +119,7 @@ | @@ -118,6 +119,7 @@ | ||
118 | showTitle: true, | 119 | showTitle: true, |
119 | isInput: false, | 120 | isInput: false, |
120 | disableCloseUnderTransfer: false, // transfer 模式下,点击 slot 也会触发关闭 | 121 | disableCloseUnderTransfer: false, // transfer 模式下,点击 slot 也会触发关闭 |
122 | + tIndex: this.handleGetIndex() | ||
121 | }; | 123 | }; |
122 | }, | 124 | }, |
123 | computed: { | 125 | computed: { |
@@ -144,6 +146,9 @@ | @@ -144,6 +146,9 @@ | ||
144 | if (this.width) { | 146 | if (this.width) { |
145 | style.width = `${this.width}px`; | 147 | style.width = `${this.width}px`; |
146 | } | 148 | } |
149 | + | ||
150 | + if (this.transfer) style['z-index'] = 1060 + this.tIndex; | ||
151 | + | ||
147 | return style; | 152 | return style; |
148 | }, | 153 | }, |
149 | localeOkText () { | 154 | localeOkText () { |
@@ -172,7 +177,7 @@ | @@ -172,7 +177,7 @@ | ||
172 | const styles = {}; | 177 | const styles = {}; |
173 | if (this.padding !== '') styles['padding'] = this.padding; | 178 | if (this.padding !== '') styles['padding'] = this.padding; |
174 | return styles; | 179 | return styles; |
175 | - } | 180 | + }, |
176 | }, | 181 | }, |
177 | methods: { | 182 | methods: { |
178 | handleClick () { | 183 | handleClick () { |
@@ -254,6 +259,13 @@ | @@ -254,6 +259,13 @@ | ||
254 | } | 259 | } |
255 | 260 | ||
256 | return $children; | 261 | return $children; |
262 | + }, | ||
263 | + handleGetIndex () { | ||
264 | + transferIncrease(); | ||
265 | + return transferIndex; | ||
266 | + }, | ||
267 | + handleIndexIncrease () { | ||
268 | + this.tIndex = this.handleGetIndex(); | ||
257 | } | 269 | } |
258 | }, | 270 | }, |
259 | mounted () { | 271 | mounted () { |
src/components/select/dropdown.vue
@@ -7,6 +7,8 @@ | @@ -7,6 +7,8 @@ | ||
7 | import { getStyle } from '../../utils/assist'; | 7 | import { getStyle } from '../../utils/assist'; |
8 | const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js'); // eslint-disable-line | 8 | const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js'); // eslint-disable-line |
9 | 9 | ||
10 | + import { transferIndex, transferIncrease } from '../../utils/transfer-queue'; | ||
11 | + | ||
10 | export default { | 12 | export default { |
11 | name: 'Drop', | 13 | name: 'Drop', |
12 | props: { | 14 | props: { |
@@ -16,19 +18,26 @@ | @@ -16,19 +18,26 @@ | ||
16 | }, | 18 | }, |
17 | className: { | 19 | className: { |
18 | type: String | 20 | type: String |
21 | + }, | ||
22 | + transfer: { | ||
23 | + type: Boolean | ||
19 | } | 24 | } |
20 | }, | 25 | }, |
21 | data () { | 26 | data () { |
22 | return { | 27 | return { |
23 | popper: null, | 28 | popper: null, |
24 | width: '', | 29 | width: '', |
25 | - popperStatus: false | 30 | + popperStatus: false, |
31 | + tIndex: this.handleGetIndex() | ||
26 | }; | 32 | }; |
27 | }, | 33 | }, |
28 | computed: { | 34 | computed: { |
29 | styles () { | 35 | styles () { |
30 | let style = {}; | 36 | let style = {}; |
31 | if (this.width) style.minWidth = `${this.width}px`; | 37 | if (this.width) style.minWidth = `${this.width}px`; |
38 | + | ||
39 | + if (this.transfer) style['z-index'] = 1060 + this.tIndex; | ||
40 | + | ||
32 | return style; | 41 | return style; |
33 | } | 42 | } |
34 | }, | 43 | }, |
@@ -66,6 +75,7 @@ | @@ -66,6 +75,7 @@ | ||
66 | if (this.$parent.$options.name === 'iSelect') { | 75 | if (this.$parent.$options.name === 'iSelect') { |
67 | this.width = parseInt(getStyle(this.$parent.$el, 'width')); | 76 | this.width = parseInt(getStyle(this.$parent.$el, 'width')); |
68 | } | 77 | } |
78 | + this.tIndex = this.handleGetIndex(); | ||
69 | }, | 79 | }, |
70 | destroy () { | 80 | destroy () { |
71 | if (this.popper) { | 81 | if (this.popper) { |
@@ -89,7 +99,11 @@ | @@ -89,7 +99,11 @@ | ||
89 | if(!leftOrRight){ | 99 | if(!leftOrRight){ |
90 | this.popper.popper.style.transformOrigin = placementStart==='bottom' || ( placementStart !== 'top' && placementEnd === 'start') ? 'center top' : 'center bottom'; | 100 | this.popper.popper.style.transformOrigin = placementStart==='bottom' || ( placementStart !== 'top' && placementEnd === 'start') ? 'center top' : 'center bottom'; |
91 | } | 101 | } |
92 | - } | 102 | + }, |
103 | + handleGetIndex () { | ||
104 | + transferIncrease(); | ||
105 | + return transferIndex; | ||
106 | + }, | ||
93 | }, | 107 | }, |
94 | created () { | 108 | created () { |
95 | this.$on('on-update-popper', this.update); | 109 | this.$on('on-update-popper', this.update); |
src/components/select/select.vue
@@ -54,6 +54,7 @@ | @@ -54,6 +54,7 @@ | ||
54 | :placement="placement" | 54 | :placement="placement" |
55 | ref="dropdown" | 55 | ref="dropdown" |
56 | :data-transfer="transfer" | 56 | :data-transfer="transfer" |
57 | + :transfer="transfer" | ||
57 | v-transfer-dom | 58 | v-transfer-dom |
58 | > | 59 | > |
59 | <ul v-show="showNotFoundLabel" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul> | 60 | <ul v-show="showNotFoundLabel" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul> |
src/components/spin/spin.js
1 | import Vue from 'vue'; | 1 | import Vue from 'vue'; |
2 | import Spin from './spin.vue'; | 2 | import Spin from './spin.vue'; |
3 | 3 | ||
4 | +import { transferIndex, transferIncrease } from '../../utils/transfer-queue'; | ||
5 | + | ||
6 | +function handleGetIndex() { | ||
7 | + transferIncrease(); | ||
8 | + return transferIndex; | ||
9 | +} | ||
10 | + | ||
11 | +let tIndex = handleGetIndex(); | ||
12 | + | ||
4 | Spin.newInstance = properties => { | 13 | Spin.newInstance = properties => { |
5 | const _props = properties || {}; | 14 | const _props = properties || {}; |
6 | 15 | ||
@@ -27,7 +36,10 @@ Spin.newInstance = properties => { | @@ -27,7 +36,10 @@ Spin.newInstance = properties => { | ||
27 | }); | 36 | }); |
28 | } | 37 | } |
29 | return h('div', { | 38 | return h('div', { |
30 | - 'class': 'ivu-spin-fullscreen ivu-spin-fullscreen-wrapper' | 39 | + 'class': 'ivu-spin-fullscreen ivu-spin-fullscreen-wrapper', |
40 | + 'style': { | ||
41 | + 'z-index': 2010 + tIndex | ||
42 | + } | ||
31 | }, [vnode]); | 43 | }, [vnode]); |
32 | } | 44 | } |
33 | }); | 45 | }); |
@@ -39,6 +51,7 @@ Spin.newInstance = properties => { | @@ -39,6 +51,7 @@ Spin.newInstance = properties => { | ||
39 | return { | 51 | return { |
40 | show () { | 52 | show () { |
41 | spin.visible = true; | 53 | spin.visible = true; |
54 | + tIndex = handleGetIndex(); | ||
42 | }, | 55 | }, |
43 | remove (cb) { | 56 | remove (cb) { |
44 | spin.visible = false; | 57 | spin.visible = false; |
src/components/tooltip/tooltip.vue
@@ -6,6 +6,7 @@ | @@ -6,6 +6,7 @@ | ||
6 | <transition name="fade"> | 6 | <transition name="fade"> |
7 | <div | 7 | <div |
8 | :class="[prefixCls + '-popper', prefixCls + '-' + theme]" | 8 | :class="[prefixCls + '-popper', prefixCls + '-' + theme]" |
9 | + :style="dropStyles" | ||
9 | ref="popper" | 10 | ref="popper" |
10 | v-show="!disabled && (visible || always)" | 11 | v-show="!disabled && (visible || always)" |
11 | @mouseenter="handleShowPopper" | 12 | @mouseenter="handleShowPopper" |
@@ -24,6 +25,7 @@ | @@ -24,6 +25,7 @@ | ||
24 | import Popper from '../base/popper'; | 25 | import Popper from '../base/popper'; |
25 | import TransferDom from '../../directives/transfer-dom'; | 26 | import TransferDom from '../../directives/transfer-dom'; |
26 | import { oneOf } from '../../utils/assist'; | 27 | import { oneOf } from '../../utils/assist'; |
28 | + import { transferIndex, transferIncrease } from '../../utils/transfer-queue'; | ||
27 | 29 | ||
28 | const prefixCls = 'ivu-tooltip'; | 30 | const prefixCls = 'ivu-tooltip'; |
29 | 31 | ||
@@ -76,7 +78,8 @@ | @@ -76,7 +78,8 @@ | ||
76 | }, | 78 | }, |
77 | data () { | 79 | data () { |
78 | return { | 80 | return { |
79 | - prefixCls: prefixCls | 81 | + prefixCls: prefixCls, |
82 | + tIndex: this.handleGetIndex() | ||
80 | }; | 83 | }; |
81 | }, | 84 | }, |
82 | computed: { | 85 | computed: { |
@@ -92,6 +95,12 @@ | @@ -92,6 +95,12 @@ | ||
92 | [`${prefixCls}-inner-with-width`]: !!this.maxWidth | 95 | [`${prefixCls}-inner-with-width`]: !!this.maxWidth |
93 | } | 96 | } |
94 | ]; | 97 | ]; |
98 | + }, | ||
99 | + dropStyles () { | ||
100 | + let styles = {}; | ||
101 | + if (this.transfer) styles['z-index'] = 1060 + this.tIndex; | ||
102 | + | ||
103 | + return styles; | ||
95 | } | 104 | } |
96 | }, | 105 | }, |
97 | watch: { | 106 | watch: { |
@@ -105,6 +114,7 @@ | @@ -105,6 +114,7 @@ | ||
105 | this.timeout = setTimeout(() => { | 114 | this.timeout = setTimeout(() => { |
106 | this.visible = true; | 115 | this.visible = true; |
107 | }, this.delay); | 116 | }, this.delay); |
117 | + this.tIndex = this.handleGetIndex(); | ||
108 | }, | 118 | }, |
109 | handleClosePopper() { | 119 | handleClosePopper() { |
110 | if (this.timeout) { | 120 | if (this.timeout) { |
@@ -115,7 +125,11 @@ | @@ -115,7 +125,11 @@ | ||
115 | }, 100); | 125 | }, 100); |
116 | } | 126 | } |
117 | } | 127 | } |
118 | - } | 128 | + }, |
129 | + handleGetIndex () { | ||
130 | + transferIncrease(); | ||
131 | + return transferIndex; | ||
132 | + }, | ||
119 | }, | 133 | }, |
120 | mounted () { | 134 | mounted () { |
121 | if (this.always) { | 135 | if (this.always) { |
types/iview.components.d.ts
@@ -65,8 +65,8 @@ export { Upload } from './upload'; | @@ -65,8 +65,8 @@ export { Upload } from './upload'; | ||
65 | 65 | ||
66 | declare const API: { | 66 | declare const API: { |
67 | version: string; | 67 | version: string; |
68 | - locale: (l) => void; | ||
69 | - i18n: (fn) => void; | 68 | + locale: (l:any) => void; |
69 | + i18n: (fn:any) => void; | ||
70 | install: ( | 70 | install: ( |
71 | Vue: Vue, | 71 | Vue: Vue, |
72 | opts: { | 72 | opts: { |