drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixes #4453 #4480 #4462

Browse source
This commit is contained in:
梁灏 2018-09-10 16:10:35 +08:00
parent 16c2b8d26e
commit 7bafe9d94c
15 changed files with 230 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
examples/routers/modal.vue
View file

@ -1,22 +1,150 @@
<template>
<div>
<Button @click="modal12 = true">Open the first modal</Button>
<Button @click="modal13 = true">Open the second modal</Button>
<Modal v-model="modal12" draggable scrollable title="Modal 1">
<div>This is the first modal</div>
</Modal>
<Modal v-model="modal13" draggable scrollable title="Modal 2">
<div>This is the second modal</div>
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<Button @click="openMessage">Message</Button>
<Select v-model="model1" style="width:200px" :transfer="false">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model1" style="width:200px" :transfer="true">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Dropdown transfer>
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<DatePicker type="date" placeholder="Select date" style="width: 200px" transfer></DatePicker>
<Cascader :data="data" v-model="value1" transfer></Cascader>
<Tooltip content="Here is the prompt text" transfer>
A balloon appears when the mouse passes over this text
</Tooltip>
<Poptip trigger="hover" title="Title" content="content" transfer>
<Button>Hover</Button>
</Poptip>
<Button type="primary" @click="handleSpinShow">整页显示，3秒后关闭</Button>
</Modal>
<Select v-model="model1" style="width:200px" :transfer="false">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model1" style="width:200px" :transfer="true">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
</template>
<script>
export default {
data () {
return {
modal12: false,
modal13: false
modal1: false,
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: '',
value1: [],
data: [{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}, {
value: 'jiangsu',
label: '江苏',
children: [
{
value: 'nanjing',
label: '南京',
children: [
{
value: 'fuzimiao',
label: '夫子庙',
}
]
},
{
value: 'suzhou',
label: '苏州',
children: [
{
value: 'zhuozhengyuan',
label: '拙政园',
},
{
value: 'shizilin',
label: '狮子林',
}
]
}
],
}]
}
},
methods: {
ok () {
// this.$Message.info('Clicked ok');
},
cancel () {
// this.$Message.info('Clicked cancel');
},
openMessage () {
this.$Message.info({
content: 'hello world',
duration: 2
});
},
handleSpinShow () {
this.$Spin.show();
},
}
}
</script>

20
src/components/base/notification/notification.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="classes" :style="styles">
<div :class="classes" :style="wrapStyles">
<Notice
v-for="notice in notices"
:key="notice.name"
@ -21,6 +21,8 @@
<script>
import Notice from './notice.vue';
import { transferIndex, transferIncrease } from '../../../utils/transfer-queue';
const prefixCls = 'ivu-notification';
let seed = 0;
const now = Date.now();
@ -54,7 +56,8 @@
},
data () {
return {
notices: []
notices: [],
tIndex: this.handleGetIndex()
};
},
computed: {
@ -65,6 +68,12 @@
[`${this.className}`]: !!this.className
}
];
},
wrapStyles () {
let styles = Object.assign({}, this.styles);
styles['z-index'] = 1010 + this.tIndex;
return styles;
}
},
methods: {
@ -82,6 +91,7 @@
}, notice);
this.notices.push(_notice);
this.tIndex = this.handleGetIndex();
},
close (name) {
const notices = this.notices;
@ -94,7 +104,11 @@
},
closeAll () {
this.notices = [];
}
},
handleGetIndex () {
transferIncrease();
return transferIndex;
},
}
};
</script>

1
src/components/base/popper.js
View file

@ -60,6 +60,7 @@ export default {
},
visible(val) {
if (val) {
this.handleIndexIncrease(); // just use for Poptip
this.updatePopper();
this.$emit('on-popper-show');
} else {

1
src/components/cascader/cascader.vue
View file

@ -26,6 +26,7 @@
:class="{ [prefixCls + '-transfer']: transfer }"
ref="drop"
:data-transfer="transfer"
:transfer="transfer"
v-transfer-dom>
<div>
<Caspanel

1
src/components/color-picker/color-picker.vue
View file

@ -40,6 +40,7 @@
ref="drop"
:placement="placement"
:data-transfer="transfer"
:transfer="transfer"
:class="dropClasses"
>
<transition name="fade">

1
src/components/date-picker/picker.vue
View file

@ -39,6 +39,7 @@
:placement="placement"
ref="drop"
:data-transfer="transfer"
:transfer="transfer"
v-transfer-dom>
<div>
<component

1
src/components/dropdown/dropdown.vue
View file

@ -14,6 +14,7 @@
@mouseenter.native="handleMouseenter"
@mouseleave.native="handleMouseleave"
:data-transfer="transfer"
:transfer="transfer"
v-transfer-dom><slot name="list"></slot></Drop>
</transition>
</div>

6
src/components/modal/modal.vue
View file

@ -40,7 +40,7 @@
import { on, off } from '../../utils/dom';
import { findComponentsDownward } from '../../utils/assist';
import { modalIndex, modalIncrease } from './q';
import { transferIndex as modalIndex, transferIncrease as modalIncrease } from '../../utils/transfer-queue';
const prefixCls = 'ivu-modal';
@ -325,7 +325,9 @@
return modalIndex;
},
handleClickModal () {
this.modalIndex = this.handleGetModalIndex();
if (this.draggable) {
this.modalIndex = this.handleGetModalIndex();
}
}
},
mounted () {

7
src/components/modal/q.js
View file

@ -1,7 +0,0 @@
let modalIndex = 0;
function modalIncrease() {
modalIndex++;
}
export {modalIndex, modalIncrease};

14
src/components/poptip/poptip.vue
View file

@ -52,6 +52,7 @@
import {directive as clickOutside} from 'v-click-outside-x';
import TransferDom from '../../directives/transfer-dom';
import { oneOf } from '../../utils/assist';
import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
import Locale from '../../mixins/locale';
const prefixCls = 'ivu-poptip';
@ -118,6 +119,7 @@
showTitle: true,
isInput: false,
disableCloseUnderTransfer: false, // transfer 模式下，点击 slot 也会触发关闭
tIndex: this.handleGetIndex()
};
},
computed: {
@ -144,6 +146,9 @@
if (this.width) {
style.width = `${this.width}px`;
}
if (this.transfer) style['z-index'] = 1060 + this.tIndex;
return style;
},
localeOkText () {
@ -172,7 +177,7 @@
const styles = {};
if (this.padding !== '') styles['padding'] = this.padding;
return styles;
}
},
},
methods: {
handleClick () {
@ -254,6 +259,13 @@
}
return $children;
},
handleGetIndex () {
transferIncrease();
return transferIndex;
},
handleIndexIncrease () {
this.tIndex = this.handleGetIndex();
}
},
mounted () {

18
src/components/select/dropdown.vue
View file

@ -7,6 +7,8 @@
import { getStyle } from '../../utils/assist';
const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js'); // eslint-disable-line
import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
export default {
name: 'Drop',
props: {
@ -16,19 +18,26 @@
},
className: {
type: String
},
transfer: {
type: Boolean
}
},
data () {
return {
popper: null,
width: '',
popperStatus: false
popperStatus: false,
tIndex: this.handleGetIndex()
};
},
computed: {
styles () {
let style = {};
if (this.width) style.minWidth = `${this.width}px`;
if (this.transfer) style['z-index'] = 1060 + this.tIndex;
return style;
}
},
@ -66,6 +75,7 @@
if (this.$parent.$options.name === 'iSelect') {
this.width = parseInt(getStyle(this.$parent.$el, 'width'));
}
this.tIndex = this.handleGetIndex();
},
destroy () {
if (this.popper) {
@ -89,7 +99,11 @@
if(!leftOrRight){
this.popper.popper.style.transformOrigin = placementStart==='bottom' || ( placementStart !== 'top' && placementEnd === 'start') ? 'center top' : 'center bottom';
}
}
},
handleGetIndex () {
transferIncrease();
return transferIndex;
},
},
created () {
this.$on('on-update-popper', this.update);

1
src/components/select/select.vue
View file

@ -54,6 +54,7 @@
:placement="placement"
ref="dropdown"
:data-transfer="transfer"
:transfer="transfer"
v-transfer-dom
>
<ul v-show="showNotFoundLabel" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>

15
src/components/spin/spin.js
View file

@ -1,6 +1,15 @@
import Vue from 'vue';
import Spin from './spin.vue';
import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
function handleGetIndex() {
transferIncrease();
return transferIndex;
}
let tIndex = handleGetIndex();
Spin.newInstance = properties => {
const _props = properties || {};
@ -27,7 +36,10 @@ Spin.newInstance = properties => {
});
}
return h('div', {
'class': 'ivu-spin-fullscreen ivu-spin-fullscreen-wrapper'
'class': 'ivu-spin-fullscreen ivu-spin-fullscreen-wrapper',
'style': {
'z-index': 2010 + tIndex
}
}, [vnode]);
}
});
@ -39,6 +51,7 @@ Spin.newInstance = properties => {
return {
show () {
spin.visible = true;
tIndex = handleGetIndex();
},
remove (cb) {
spin.visible = false;

18
src/components/tooltip/tooltip.vue
View file

@ -6,6 +6,7 @@
<transition name="fade">
<div
:class="[prefixCls + '-popper', prefixCls + '-' + theme]"
:style="dropStyles"
ref="popper"
v-show="!disabled && (visible || always)"
@mouseenter="handleShowPopper"
@ -24,6 +25,7 @@
import Popper from '../base/popper';
import TransferDom from '../../directives/transfer-dom';
import { oneOf } from '../../utils/assist';
import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
const prefixCls = 'ivu-tooltip';
@ -76,7 +78,8 @@
},
data () {
return {
prefixCls: prefixCls
prefixCls: prefixCls,
tIndex: this.handleGetIndex()
};
},
computed: {
@ -92,6 +95,12 @@
[`${prefixCls}-inner-with-width`]: !!this.maxWidth
}
];
},
dropStyles () {
let styles = {};
if (this.transfer) styles['z-index'] = 1060 + this.tIndex;
return styles;
}
},
watch: {
@ -105,6 +114,7 @@
this.timeout = setTimeout(() => {
this.visible = true;
}, this.delay);
this.tIndex = this.handleGetIndex();
},
handleClosePopper() {
if (this.timeout) {
@ -115,7 +125,11 @@
}, 100);
}
}
}
},
handleGetIndex () {
transferIncrease();
return transferIndex;
},
},
mounted () {
if (this.always) {

7
src/utils/transfer-queue.js Normal file
View file

@ -0,0 +1,7 @@
let transferIndex = 0;
function transferIncrease() {
transferIndex++;
}
export {transferIndex, transferIncrease};