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 1 <template>
2 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 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 48 </div>
12 49 </template>
13 50 <script>
14 51 export default {
15 52 data () {
16 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 150 </script>
... ...
src/components/base/notification/notification.vue
  Show/Hide comments   View file @7bafe9d
1 1 <template>
2   - <div :class="classes" :style="styles">
  2 + <div :class="classes" :style="wrapStyles">
3 3 <Notice
4 4 v-for="notice in notices"
5 5 :key="notice.name"
... ... @@ -21,6 +21,8 @@
21 21 <script>
22 22 import Notice from './notice.vue';
23 23  
  24 + import { transferIndex, transferIncrease } from '../../../utils/transfer-queue';
  25 +
24 26 const prefixCls = 'ivu-notification';
25 27 let seed = 0;
26 28 const now = Date.now();
... ... @@ -54,7 +56,8 @@
54 56 },
55 57 data () {
56 58 return {
57   - notices: []
  59 + notices: [],
  60 + tIndex: this.handleGetIndex()
58 61 };
59 62 },
60 63 computed: {
... ... @@ -65,6 +68,12 @@
65 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 79 methods: {
... ... @@ -82,6 +91,7 @@
82 91 }, notice);
83 92  
84 93 this.notices.push(_notice);
  94 + this.tIndex = this.handleGetIndex();
85 95 },
86 96 close (name) {
87 97 const notices = this.notices;
... ... @@ -94,7 +104,11 @@
94 104 },
95 105 closeAll () {
96 106 this.notices = [];
97   - }
  107 + },
  108 + handleGetIndex () {
  109 + transferIncrease();
  110 + return transferIndex;
  111 + },
98 112 }
99 113 };
100 114 </script>
... ...
src/components/base/popper.js
  Show/Hide comments   View file @7bafe9d
... ... @@ -60,6 +60,7 @@ export default {
60 60 },
61 61 visible(val) {
62 62 if (val) {
  63 + this.handleIndexIncrease(); // just use for Poptip
63 64 this.updatePopper();
64 65 this.$emit('on-popper-show');
65 66 } else {
... ...
src/components/cascader/cascader.vue
  Show/Hide comments   View file @7bafe9d
... ... @@ -26,6 +26,7 @@
26 26 :class="{ [prefixCls + '-transfer']: transfer }"
27 27 ref="drop"
28 28 :data-transfer="transfer"
  29 + :transfer="transfer"
29 30 v-transfer-dom>
30 31 <div>
31 32 <Caspanel
... ...
src/components/color-picker/color-picker.vue
  Show/Hide comments   View file @7bafe9d
... ... @@ -40,6 +40,7 @@
40 40 ref="drop"
41 41 :placement="placement"
42 42 :data-transfer="transfer"
  43 + :transfer="transfer"
43 44 :class="dropClasses"
44 45 >
45 46 <transition name="fade">
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @7bafe9d
... ... @@ -39,6 +39,7 @@
39 39 :placement="placement"
40 40 ref="drop"
41 41 :data-transfer="transfer"
  42 + :transfer="transfer"
42 43 v-transfer-dom>
43 44 <div>
44 45 <component
... ...
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @7bafe9d
... ... @@ -14,6 +14,7 @@
14 14 @mouseenter.native="handleMouseenter"
15 15 @mouseleave.native="handleMouseleave"
16 16 :data-transfer="transfer"
  17 + :transfer="transfer"
17 18 v-transfer-dom><slot name="list"></slot></Drop>
18 19 </transition>
19 20 </div>
... ...
src/components/modal/modal.vue
  Show/Hide comments   View file @7bafe9d
... ... @@ -40,7 +40,7 @@
40 40 import { on, off } from '../../utils/dom';
41 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 45 const prefixCls = 'ivu-modal';
46 46  
... ... @@ -325,7 +325,9 @@
325 325 return modalIndex;
326 326 },
327 327 handleClickModal () {
328   - this.modalIndex = this.handleGetModalIndex();
  328 + if (this.draggable) {
  329 + this.modalIndex = this.handleGetModalIndex();
  330 + }
329 331 }
330 332 },
331 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 0 \ No newline at end of file
src/components/poptip/poptip.vue
  Show/Hide comments   View file @7bafe9d
... ... @@ -52,6 +52,7 @@
52 52 import {directive as clickOutside} from 'v-click-outside-x';
53 53 import TransferDom from '../../directives/transfer-dom';
54 54 import { oneOf } from '../../utils/assist';
  55 + import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
55 56 import Locale from '../../mixins/locale';
56 57  
57 58 const prefixCls = 'ivu-poptip';
... ... @@ -118,6 +119,7 @@
118 119 showTitle: true,
119 120 isInput: false,
120 121 disableCloseUnderTransfer: false, // transfer 模式下，点击 slot 也会触发关闭
  122 + tIndex: this.handleGetIndex()
121 123 };
122 124 },
123 125 computed: {
... ... @@ -144,6 +146,9 @@
144 146 if (this.width) {
145 147 style.width = `${this.width}px`;
146 148 }
  149 +
  150 + if (this.transfer) style['z-index'] = 1060 + this.tIndex;
  151 +
147 152 return style;
148 153 },
149 154 localeOkText () {
... ... @@ -172,7 +177,7 @@
172 177 const styles = {};
173 178 if (this.padding !== '') styles['padding'] = this.padding;
174 179 return styles;
175   - }
  180 + },
176 181 },
177 182 methods: {
178 183 handleClick () {
... ... @@ -254,6 +259,13 @@
254 259 }
255 260  
256 261 return $children;
  262 + },
  263 + handleGetIndex () {
  264 + transferIncrease();
  265 + return transferIndex;
  266 + },
  267 + handleIndexIncrease () {
  268 + this.tIndex = this.handleGetIndex();
257 269 }
258 270 },
259 271 mounted () {
... ...
src/components/select/dropdown.vue
  Show/Hide comments   View file @7bafe9d
... ... @@ -7,6 +7,8 @@
7 7 import { getStyle } from '../../utils/assist';
8 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 12 export default {
11 13 name: 'Drop',
12 14 props: {
... ... @@ -16,19 +18,26 @@
16 18 },
17 19 className: {
18 20 type: String
  21 + },
  22 + transfer: {
  23 + type: Boolean
19 24 }
20 25 },
21 26 data () {
22 27 return {
23 28 popper: null,
24 29 width: '',
25   - popperStatus: false
  30 + popperStatus: false,
  31 + tIndex: this.handleGetIndex()
26 32 };
27 33 },
28 34 computed: {
29 35 styles () {
30 36 let style = {};
31 37 if (this.width) style.minWidth = `${this.width}px`;
  38 +
  39 + if (this.transfer) style['z-index'] = 1060 + this.tIndex;
  40 +
32 41 return style;
33 42 }
34 43 },
... ... @@ -66,6 +75,7 @@
66 75 if (this.$parent.$options.name === 'iSelect') {
67 76 this.width = parseInt(getStyle(this.$parent.$el, 'width'));
68 77 }
  78 + this.tIndex = this.handleGetIndex();
69 79 },
70 80 destroy () {
71 81 if (this.popper) {
... ... @@ -89,7 +99,11 @@
89 99 if(!leftOrRight){
90 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 108 created () {
95 109 this.$on('on-update-popper', this.update);
... ...
src/components/select/select.vue
  Show/Hide comments   View file @7bafe9d
... ... @@ -54,6 +54,7 @@
54 54 :placement="placement"
55 55 ref="dropdown"
56 56 :data-transfer="transfer"
  57 + :transfer="transfer"
57 58 v-transfer-dom
58 59 >
59 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 1 import Vue from 'vue';
2 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 13 Spin.newInstance = properties => {
5 14 const _props = properties || {};
6 15  
... ... @@ -27,7 +36,10 @@ Spin.newInstance = properties =&gt; {
27 36 });
28 37 }
29 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 43 }, [vnode]);
32 44 }
33 45 });
... ... @@ -39,6 +51,7 @@ Spin.newInstance = properties =&gt; {
39 51 return {
40 52 show () {
41 53 spin.visible = true;
  54 + tIndex = handleGetIndex();
42 55 },
43 56 remove (cb) {
44 57 spin.visible = false;
... ...
src/components/tooltip/tooltip.vue
  Show/Hide comments   View file @7bafe9d
... ... @@ -6,6 +6,7 @@
6 6 <transition name="fade">
7 7 <div
8 8 :class="[prefixCls + '-popper', prefixCls + '-' + theme]"
  9 + :style="dropStyles"
9 10 ref="popper"
10 11 v-show="!disabled && (visible || always)"
11 12 @mouseenter="handleShowPopper"
... ... @@ -24,6 +25,7 @@
24 25 import Popper from '../base/popper';
25 26 import TransferDom from '../../directives/transfer-dom';
26 27 import { oneOf } from '../../utils/assist';
  28 + import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
27 29  
28 30 const prefixCls = 'ivu-tooltip';
29 31  
... ... @@ -76,7 +78,8 @@
76 78 },
77 79 data () {
78 80 return {
79   - prefixCls: prefixCls
  81 + prefixCls: prefixCls,
  82 + tIndex: this.handleGetIndex()
80 83 };
81 84 },
82 85 computed: {
... ... @@ -92,6 +95,12 @@
92 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 106 watch: {
... ... @@ -105,6 +114,7 @@
105 114 this.timeout = setTimeout(() => {
106 115 this.visible = true;
107 116 }, this.delay);
  117 + this.tIndex = this.handleGetIndex();
108 118 },
109 119 handleClosePopper() {
110 120 if (this.timeout) {
... ... @@ -115,7 +125,11 @@
115 125 }, 100);
116 126 }
117 127 }
118   - }
  128 + },
  129 + handleGetIndex () {
  130 + transferIncrease();
  131 + return transferIndex;
  132 + },
119 133 },
120 134 mounted () {
121 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 8 \ No newline at end of file
... ...