[new feature]Popup: 增加遮罩层overlayClass和overlayStyle属性,以提供遮罩层自定义样式 (#343)

* 增加遮罩层overlayClass和overlayStyle属性,以提供遮罩层自定义样式

* Revert "增加遮罩层overlayClass和overlayStyle属性,以提供遮罩层自定义样式"

This reverts commit 3ae02a0f103595cb0c93e6a0f422c63fe363b129.

* 增加遮罩层overlayClass和overlayStyle属性,以提供遮罩层自定义样式
This commit is contained in:
Mickey 2017-11-23 19:51:20 +08:00 committed by neverland
parent 7e233eebfe
commit 99f739bfee
2 changed files with 24 additions and 2 deletions

View File

@ -28,6 +28,16 @@ export default {
preventScroll: { preventScroll: {
type: Boolean, type: Boolean,
default: false default: false
},
// 遮罩层额外样式
overlayStyle: {
type: String,
default: ''
},
// 遮罩层额外类
overlayClass: {
type: String,
default: ''
} }
}, },
@ -98,7 +108,13 @@ export default {
} }
if (this.overlay) { if (this.overlay) {
manager.openModal(this._popupId, context.plusKeyByOne('zIndex'), this.$el); manager.openModal({
id: this._popupId,
zIndex: context.plusKeyByOne('zIndex'),
dom: this.$el,
extraClass: this.overlayClass,
extraStyle: this.overlayStyle
});
if (this.lockOnScroll) { if (this.lockOnScroll) {
document.body.classList.add('van-overflow-hidden'); document.body.classList.add('van-overflow-hidden');
} }

View File

@ -32,12 +32,18 @@ const PopupManager = {
} }
}, },
openModal(id, zIndex, dom) { openModal({id, zIndex, dom, extraClass, extraStyle}) {
const { modalStack } = context; const { modalStack } = context;
const exist = modalStack.some(item => item.id === id); const exist = modalStack.some(item => item.id === id);
if (!exist) { if (!exist) {
const modal = this.getModal(); const modal = this.getModal();
if (extraClass) {
modal.classList.add(extraClass);
}
if (extraStyle) {
modal.style.cssText = `${modal.style.cssText} ${extraStyle}`;
}
modal.style.zIndex = zIndex; modal.style.zIndex = zIndex;
const parentNode = dom && dom.parentNode && dom.parentNode.nodeType !== 11 ? dom.parentNode : document.body; const parentNode = dom && dom.parentNode && dom.parentNode.nodeType !== 11 ? dom.parentNode : document.body;