From 89b83b3aa66240da4703df127ad3705316784c86 Mon Sep 17 00:00:00 2001
From: yangkaixuan <439721838@qq.com>
Date: Thu, 13 Aug 2020 15:32:57 +0800
Subject: [PATCH] feat: popup add combination popup
---
src/packages/popup/demo.vue | 22 +++++-
src/packages/popup/overlay/overlay-manager.js | 76 ++++++++++---------
src/packages/popup/popup.vue | 9 ++-
3 files changed, 68 insertions(+), 39 deletions(-)
diff --git a/src/packages/popup/demo.vue b/src/packages/popup/demo.vue
index 6991f252e..004787d7f 100644
--- a/src/packages/popup/demo.vue
+++ b/src/packages/popup/demo.vue
@@ -5,7 +5,6 @@
正文
-
弹出位置
@@ -42,6 +41,26 @@
+ 组合弹框
+
+
+
+ 正文
+
+
+
指定挂载节点
@@ -64,6 +83,7 @@ export default {
showIconPosition: false,
showCloseIcon: false,
getContainer: false,
+ showCombination: false,
};
},
methods: {
diff --git a/src/packages/popup/overlay/overlay-manager.js b/src/packages/popup/overlay/overlay-manager.js
index b480a2b57..4888affd7 100644
--- a/src/packages/popup/overlay/overlay-manager.js
+++ b/src/packages/popup/overlay/overlay-manager.js
@@ -1,52 +1,58 @@
-import Vue from "vue";
-import overlayComponent from "./overlay.vue";
+import Vue from 'vue';
+import overlayComponent from './overlay.vue';
let modalStack = [];
let _zIndex = 2000;
let overlay;
-const overlayManager = {
-
+const overlayManager = {
lockCount: 0,
- get zIndex() {
- return ++_zIndex;
- },
get topStack() {
return modalStack[modalStack.length - 1];
},
+ getZIndex(id) {
+ if (!id) return ++_zIndex;
+ const overlay = modalStack.find((res) => {
+ return res.config.id === id;
+ });
+ if (overlay) {
+ return overlay.config.zIndex;
+ } else {
+ return ++_zIndex;
+ }
+ },
updateOverlay() {
- const { clickHandle, topStack } = overlayManager;
+ const { clickHandle, topStack } = overlayManager;
if (!overlay) {
overlay = mount(overlayComponent, {
nativeOn: {
click: clickHandle,
},
});
- }
-
+ }
+
if (topStack) {
const { vm, config } = topStack;
const el = vm.$el;
- el && el.parentNode && el.parentNode.nodeType !== 11
- ? el.parentNode.appendChild(overlay.$el)
- : document.body.appendChild(overlay.$el);
-
+ el && el.parentNode && el.parentNode.nodeType !== 11 ? el.parentNode.appendChild(overlay.$el) : document.body.appendChild(overlay.$el);
+
Object.assign(overlay, config, {
value: true,
- });
- } else {
+ });
+ } else {
overlay.value = false;
}
},
//打开遮罩层
openModal(vm, config) {
- let { zIndex, duration, overlayClass, overlayStyle} = config;
-
+ let { zIndex, duration, overlayClass, overlayStyle, id } = config;
+
modalStack.push({
vm,
config: {
+ id,
zIndex,
duration,
overlayClass,
@@ -59,10 +65,10 @@ const overlayManager = {
clickHandle() {
const { topStack } = overlayManager;
-
+
//防止多次点击
- if (modalStack.length && topStack.vm.closeOnClickOverlay) {
- topStack.vm.$emit("click-overlay");
+ if (modalStack.length && topStack.vm.closeOnClickOverlay) {
+ topStack.vm.$emit('click-overlay');
topStack.vm.close();
}
},
@@ -102,26 +108,25 @@ const overlayProps = {
},
overlayClass: {
type: String,
- default: "",
+ default: '',
},
overlayStyle: {
type: Object,
default: function () {
- return null
+ return null;
},
},
zIndex: {
- type: Number
+ type: Number,
},
};
function mount(Component, data) {
-
- const instance = new Vue({
+ const instance = new Vue({
props: Component.props,
- render(h) {
+ render(h) {
return h(Component, {
- props:this.$props,
+ props: this.$props,
...data,
});
},
@@ -129,14 +134,13 @@ function mount(Component, data) {
return instance;
}
-function getProps(){
-
- if(!this)return {}
+function getProps() {
+ if (!this) return {};
let obj = {};
- Object.keys(overlayProps).forEach(res=>{
- obj[res] = this[res]
- })
- return obj
+ Object.keys(overlayProps).forEach((res) => {
+ obj[res] = this[res];
+ });
+ return obj;
}
-export {overlayManager ,overlayProps, getProps};
+export { overlayManager, overlayProps, getProps };
diff --git a/src/packages/popup/popup.vue b/src/packages/popup/popup.vue
index 1ac641e7b..268522d07 100644
--- a/src/packages/popup/popup.vue
+++ b/src/packages/popup/popup.vue
@@ -32,6 +32,10 @@ import '../icon/icon.scss';
const overflowScrollReg = /scroll|auto/i;
const popupProps = {
+ id: {
+ type: String | Number,
+ default: '',
+ },
position: {
type: String,
default: 'center',
@@ -139,7 +143,8 @@ export default {
const { duration, overlayClass, overlayStyle, lockScroll, closeOnClickOverlay } = this;
const config = {
- zIndex: this.zIndex ? this.zIndex : overlayManager.zIndex,
+ id: this.id,
+ zIndex: this.zIndex ? this.zIndex : overlayManager.getZIndex(this.id),
duration,
overlayClass,
overlayStyle,
@@ -159,7 +164,7 @@ export default {
overlayManager.lockCount++;
}
- this.$el.style.zIndex = this.zIndex ? this.zIndex + 1 : overlayManager.zIndex;
+ this.$el.style.zIndex = this.zIndex ? this.zIndex + 1 : overlayManager.getZIndex();
},
renderOverlay(config) {
if (!this.value) {
--
GitLab
微信好友
+ 
QQ好友
+ 
微信朋友圈
+