other / mew-iview

Commit 7bafe9d94c839ab811be044b4295ebb0661ab4ea

Authored by 梁灏
1 parent 16c2b8d2

fixes #4453 #4480 #4462

Showing 15 changed files with 230 additions and 27 deletions   Show diff stats
Inline Side-by-side
examples/routers/modal.vue
  Show/Hide comments   View file @7bafe9d
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>
src/components/base/notification/notification.vue
  Show/Hide comments   View file @7bafe9d
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
  Show/Hide comments   View file @7bafe9d
@@ -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
  Show/Hide comments   View file @7bafe9d
@@ -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
  Show/Hide comments   View file @7bafe9d
@@ -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
  Show/Hide comments   View file @7bafe9d
@@ -39,6 +39,7 @@ @@ -39,6 +39,7 @@
39 :placement="placement" 39 :placement="placement"
40 ref="drop" 40 ref="drop"
41 :data-transfer="transfer" 41 :data-transfer="transfer"
  42 + :transfer="transfer"
42 v-transfer-dom> 43 v-transfer-dom>
43 <div> 44 <div>
44 <component 45 <component
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @7bafe9d
@@ -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/modal/modal.vue
  Show/Hide comments   View file @7bafe9d
@@ -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
View file @16c2b8d
1 -let modalIndex = 0;  
2 -  
3 -function modalIncrease() {  
4 - modalIndex++;  
5 -}  
6 -  
7 -export {modalIndex, modalIncrease};  
8 \ No newline at end of file 0 \ No newline at end of file
src/components/poptip/poptip.vue
  Show/Hide comments   View file @7bafe9d
@@ -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
  Show/Hide comments   View file @7bafe9d
@@ -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
  Show/Hide comments   View file @7bafe9d
@@ -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
  Show/Hide comments   View file @7bafe9d
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 =&gt; { @@ -27,7 +36,10 @@ Spin.newInstance = properties =&gt; {
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 =&gt; { @@ -39,6 +51,7 @@ Spin.newInstance = properties =&gt; {
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
  Show/Hide comments   View file @7bafe9d
@@ -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) {
src/utils/transfer-queue.js 0 → 100644
  Show/Hide comments   View file @7bafe9d
  1 +let transferIndex = 0;
  2 +
  3 +function transferIncrease() {
  4 + transferIndex++;
  5 +}
  6 +
  7 +export {transferIndex, transferIncrease};
0 \ No newline at end of file 8 \ No newline at end of file