feat: 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>
@@ -33,9 +32,35 @@
 
     <h4>圆角弹框</h4>
     <div>
-      <nut-popup round v-model="showRound" position="bottom" :style="{ height: '20%' }"></nut-popup>
+      <nut-popup round v-model="showRound" 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>
       <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>
@@ -57,14 +82,38 @@ export default {
       showRound: false,
       showIconPosition: false,
       showCloseIcon: false,
-      getContainer: false
+      getContainer: false,
+      showCombination: false,
     };
   },
   methods: {
     show() {
       this.isShow = true;
-    }
-  }
+    },
+  },
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.box {
+  display: flex;
+  height: 136px;
+  margin-top: 48px;
+  border-top: 1px solid #e6e6e6;
+  justify-content: space-around;
+  align-items: center;
+  .icon {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    span {
+      color: #646464;
+      font-size: 13px;
+    }
+    img {
+      width: 60px;
+      height: 60px;
+      margin-bottom: 5px;
+    }
+  }
+}
+</style>

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

src/packages/popup/overlay/overlay.vue

@@ -13,35 +13,35 @@
 const overlayProps = {
   value: {
     type: Boolean,
-    default: false
+    default: false,
   },
   overlay: {
     type: Boolean,
-    default: true
+    default: true,
   },
   lockScroll: {
     type: Boolean,
-    default: true
+    default: true,
   },
   duration: {
     type: Number,
-    default: 0.3
+    default: 0.3,
   },
   closeOnClickOverlay: {
     type: Boolean,
-    default: true
+    default: true,
   },
   overlayClass: {
     type: String,
-    default: ''
+    default: '',
   },
   overlayStyle: {
     type: Object,
-    default: () => {}
+    default: () => {},
   },
   zIndex: {
-    type: Number
-  }
+    type: Number,
+  },
 };
 export { overlayProps };
 export default {
@@ -53,7 +53,7 @@ export default {
       if (this.lockScroll) {
         e.preventDefault();
       }
-    }
-  }
+    },
+  },
 };
 </script>

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