feat: popup add combination popup

src/packages/popup/demo.vue

@@ -5,7 +5,6 @@
       <nut-cell isLink title="展示弹出层" :showIcon="true" @click.native="showBasic = true"> </nut-cell>
     </div>
     <nut-popup :style="{ padding: '30px 50px' }" v-model="showBasic">正文</nut-popup>
-
     <h4>弹出位置</h4>
     <div>
       <nut-cell isLink title="顶部弹出" :showIcon="true" @click.native="showTop = true"> </nut-cell>
@@ -42,6 +41,26 @@
       </nut-popup>
       <nut-cell isLink title="圆角弹框" :showIcon="true" @click.native="showRound = true"> </nut-cell>
     </div>
+    <h4>组合弹框</h4>
+    <div>
+      <nut-cell isLink title="组合弹窗" :showIcon="true" @click.native="showCombination = true"> </nut-cell>
+    </div>
+    <nut-popup id="combination" :style="{ padding: '30px 50px' }" v-model="showCombination">正文</nut-popup>
+    <nut-popup
+      id="combination"
+      round
+      v-model="showCombination"
+      closeable
+      close-icon-position="top-right"
+      position="bottom"
+      :style="{ height: '185px' }"
+    >
+      <div class="box">
+        <div class="icon"> <img src="@/assets/img/wechat-icon.png" /> <span>微信好友</span></div>
+        <div class="icon"> <img src="@/assets/img/QQ-friends-icon.png" /><span>QQ好友</span></div>
+        <div class="icon"> <img src="@/assets/img/circle-friends-icon.png" /><span>微信朋友圈</span></div>
+      </div>
+    </nut-popup>
     <h4>指定挂载节点</h4>
     <div>
       <nut-cell isLink title="指定挂载节点" :showIcon="true" @click.native="getContainer = true"> </nut-cell>
@@ -64,6 +83,7 @@ export default {
       showIconPosition: false,
       showCloseIcon: false,
       getContainer: false,
+      showCombination: false,
     };
   },
   methods: {

src/packages/popup/overlay/overlay-manager.js

-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 };

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) {