feat(popup): support muti stacks

src/packages/__VUE/popup/demo.vue

@@ -50,6 +50,12 @@
     <h2>{{ translate('teleport') }}</h2>
     <nut-cell :title="translate('teleport')" is-link @click="state.showTeleport = true"></nut-cell>
     <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" v-model:visible="state.showTeleport">app</nut-popup>
+    <h2>{{ translate('muti') }}</h2>
+    <nut-cell :title="translate('muti')" is-link @click="state.showPop1 = true"></nut-cell>
+    <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="state.showPop1">
+      <div @click="state.showPop2 = true">{{ translate('click') }}</div>
+    </nut-popup>
+    <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="state.showPop2">{{ translate('text') }}</nut-popup>
   </div>
 </template>
 
@@ -72,7 +78,9 @@ useTranslate({
     iposition: '图标位置',
     cicon: '自定义图标',
     circle: '圆角弹框',
-    teleport: '指定挂载节点'
+    teleport: '指定挂载节点',
+    muti: '多层堆叠',
+    click: '点击它'
   },
   'en-US': {
     basic: 'Basic Usage',
@@ -87,7 +95,9 @@ useTranslate({
     iposition: 'Icon location',
     cicon: 'Custom icon',
     circle: 'Rounded bullet frame',
-    teleport: 'Specify mount node'
+    teleport: 'Specify mount node',
+    muti: 'Multi stack',
+    click: 'Click it'
   }
 });
 export default createDemo({
@@ -103,7 +113,9 @@ export default createDemo({
       showIconPosition: false,
       showCloseIcon: false,
       showRound: false,
-      showCombination: false
+      showCombination: false,
+      showPop1: false,
+      showPop2: false
     });
     return { state, translate };
   }

src/packages/__VUE/popup/doc.en-US.md

@@ -160,6 +160,35 @@ app.use(Popup).use(OverLay)
 
 :::
 
+### Multi stack
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="Multi stack" is-link @click="state.showPop1 = true"></nut-cell>
+  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="state.showPop1">
+    <div @click="state.showPop2 = true">Click it</div>
+  </nut-popup>
+  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="state.showPop2">text</nut-popup>
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const state = reactive({
+        showPop1: false,
+        showPop2: false
+      });
+      return { state };
+    }
+  };
+</script>
+```
+
+:::
+
 ## API
 
 ### Props

src/packages/__VUE/popup/doc.md

@@ -161,6 +161,35 @@ app.use(Popup).use(OverLay)
 
 :::
 
+### 多层堆叠
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="多层堆叠" is-link @click="state.showPop1 = true"></nut-cell>
+  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="state.showPop1">
+    <div @click="state.showPop2 = true">点击它</div>
+  </nut-popup>
+  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="state.showPop2">正文</nut-popup>
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const state = reactive({
+        showPop1: false,
+        showPop2: false
+      });
+      return { state };
+    }
+  };
+</script>
+```
+
+:::
+
 ## API
 
 ### Props

src/packages/__VUE/popup/index.taro.vue

@@ -133,14 +133,12 @@ export default create({
       };
     });
     const open = () => {
-      if (!props.visible) {
-        if (props.zIndex !== undefined) {
-          _zIndex = Number(props.zIndex);
-        }
-        emit('update:visible', true);
-        lockScroll();
-        state.zIndex = ++_zIndex;
+      if (props.zIndex != 2000) {
+        _zIndex = Number(props.zIndex);
       }
+      emit('update:visible', true);
+      lockScroll();
+      state.zIndex = ++_zIndex;
       if (props.destroyOnClose) {
         state.showSlot = true;
       }

src/packages/__VUE/popup/index.vue

@@ -151,7 +151,7 @@ export default create({
   setup(props, { emit }) {
     const popupRef = ref();
     const state = reactive({
-      zIndex: props.zIndex ? (props.zIndex as number) : _zIndex,
+      zIndex: props.zIndex,
       showSlot: true,
       transitionName: `popup-fade-${props.position}`,
       overLayCount: 1,
@@ -181,14 +181,12 @@ export default create({
     });
 
     const open = () => {
-      if (!props.visible) {
-        if (props.zIndex !== undefined) {
-          _zIndex = Number(props.zIndex);
-        }
-        emit('update:visible', true);
-        lockScroll();
-        state.zIndex = ++_zIndex;
+      if (props.zIndex != 2000) {
+        _zIndex = Number(props.zIndex);
       }
+      emit('update:visible', true);
+      lockScroll();
+      state.zIndex = ++_zIndex;
       if (props.destroyOnClose) {
         state.showSlot = true;
       }
@@ -196,15 +194,13 @@ export default create({
     };
 
     const close = () => {
-      if (props.visible) {
-        unlockScroll();
-        emit('update:visible', false);
-        if (props.destroyOnClose) {
-          setTimeout(() => {
-            state.showSlot = false;
-            emit('close');
-          }, +props.duration * 1000);
-        }
+      unlockScroll();
+      emit('update:visible', false);
+      if (props.destroyOnClose) {
+        setTimeout(() => {
+          state.showSlot = false;
+          emit('close');
+        }, +props.duration * 1000);
       }
     };
 

src/sites/mobile-taro/vue/src/base/pages/popup/index.vue

@@ -43,6 +43,12 @@
       :style="{ height: '30%' }"
       v-model:visible="state.showRound"
     ></nut-popup>
+    <h2>多层堆叠</h2>
+    <nut-cell title="多层堆叠" is-link @click="state.showPop1 = true"></nut-cell>
+    <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="state.showPop1">
+      <div @click="state.showPop2 = true">点击它</div>
+    </nut-popup>
+    <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="state.showPop2">正文</nut-popup>
   </div>
 </template>
 
@@ -61,7 +67,9 @@ export default {
       showIconPosition: false,
       showCloseIcon: false,
       showRound: false,
-      showCombination: false
+      showCombination: false,
+      showPop1: false,
+      showPop2: false
     });
     return { state };
   }