支持多层popup

src/components/popup/index.vue

@@ -74,18 +74,26 @@ export default {
       for (let i = 0; i < this.$overflowScrollingList.length; i++) {
         this.$overflowScrollingList[i].style.webkitOverflowScrolling = type
       }
+    },
+    updateZIndex () {
+      window.popupIndex = window.popupIndex || 250
+      window.popupIndex += 1
+      this.showIndex = window.popupIndex * 2 + 1
     }
   },
   data () {
     return {
       initialShow: true,
       hasFirstShow: false,
-      show: this.value
+      show: this.value,
+      showIndex: 501
     }
   },
   computed: {
     styles () {
-      const styles = {}
+      const styles = {
+        'z-index': this.showIndex
+      }
       if (!this.position || this.position === 'bottom' || this.position === 'top') {
         styles.height = this.height
       } else {
@@ -107,6 +115,7 @@ export default {
     show (val) {
       this.$emit('input', val)
       if (val) {
+        this.updateZIndex()
         this.popup && this.popup.show()
         this.$emit('on-show')
         this.fixSafariOverflowScrolling('auto')

src/components/popup/metas.yml

@@ -113,4 +113,8 @@ changes:
       - '[fix] Fix overflow-scrolling setting in safari #311 @linhaobin'
     zh-CN:
       - '[fix] 修复 `overflow-scrolling` 设置逻辑遗漏问题 #311 @linhaobin'
-
+  next:
+    en:
+      - '[feature] Support multiple popup'
+    zh-CN:
+      - '[feature] 支持多层popup'

src/components/popup/popup.js

@@ -11,13 +11,11 @@ const popupDialog = function (option) {
       showMask: option.showMask
     }
   }
-  if (!!document.querySelectorAll('.vux-popup-mask').length <= 0) {
-    this.divMask = document.createElement('a')
-    this.divMask.className = 'vux-popup-mask'
-    this.divMask.dataset.uuid = ''
-    this.divMask.href = 'javascript:void(0)'
-    document.body.appendChild(this.divMask)
-  }
+  this.divMask = document.createElement('a')
+  this.divMask.className = 'vux-popup-mask'
+  this.divMask.dataset.uuid = ''
+  this.divMask.href = 'javascript:void(0)'
+  document.body.appendChild(this.divMask)
   let div
   if (!option.container) {
     div = document.createElement('div')
@@ -36,7 +34,7 @@ const popupDialog = function (option) {
     document.body.appendChild(div)
   }
   this.container = document.querySelector('.vux-popup-dialog-' + this.uuid)
-  this.mask = document.querySelector('.vux-popup-mask')
+  this.mask = this.divMask
   this.mask.dataset.uuid += `,${this.uuid}`
   this._bindEvents()
   option = null
@@ -64,7 +62,7 @@ popupDialog.prototype._bindEvents = function () {
 popupDialog.prototype.show = function () {
   if (this.params.showMask) {
     this.mask.classList.add('vux-popup-show')
-    this.mask.style['zIndex'] = 500
+    this.mask.style['zIndex'] = (window.popupIndex || 250) * 2
   }
   this.container.classList.add('vux-popup-show')
   this.params.onOpen && this.params.onOpen(this)
@@ -73,12 +71,10 @@ popupDialog.prototype.show = function () {
 
 popupDialog.prototype.hide = function (shouldCallback = true) {
   this.container.classList.remove('vux-popup-show')
-  if (!document.querySelector('.vux-popup-dialog.vux-popup-show')) {
-    this.mask.classList.remove('vux-popup-show')
-    setTimeout(() => {
-      this.mask && !/show/.test(this.mask.className) && (this.mask.style['zIndex'] = -1)
-    }, 400)
-  }
+  this.mask.classList.remove('vux-popup-show')
+  setTimeout(() => {
+    this.mask && !/show/.test(this.mask.className) && (this.mask.style['zIndex'] = -1)
+  }, 400)
   shouldCallback === false && this.params.onClose && this.params.hideOnBlur && this.params.onClose(this)
   this.isShow = false
   delete window.__$vuxPopups[this.uuid]

src/demos/Popup.vue

@@ -10,7 +10,7 @@
       <x-switch title="default max-height=100%" v-model="show12"></x-switch>
       <x-switch title="set max-height=50%" v-model="show13"></x-switch>
     </group>
-    
+
     <div v-transfer-dom>
       <popup v-model="show" @on-hide="log('hide')" @on-show="log('show')">
         <div class="popup0">
@@ -23,7 +23,7 @@
     </div>
 
     <toast v-model="showToast">You did it!</toast>
-    
+
     <div v-transfer-dom>
       <popup v-model="show1" height="100%">
         <div class="popup1">
@@ -33,7 +33,7 @@
         </div>
       </popup>
     </div>
-    
+
     <div v-transfer-dom>
       <popup v-model="show2" height="200px" @on-first-show="resetScroller">
         <scroller height="100px" lock-x style="border:1px solid red;" ref="scroller">
@@ -43,7 +43,7 @@
         </scroller>
       </popup>
     </div>
-    
+
     <div v-transfer-dom>
       <popup v-model="show3">
         <div class="popup2">
@@ -55,7 +55,7 @@
         </div>
       </popup>
     </div>
-    
+
     <div v-transfer-dom>
       <popup v-model="show4">
         <div class="popup2">
@@ -66,7 +66,7 @@
         </div>
       </popup>
     </div>
-    
+
     <div v-transfer-dom>
       <popup v-model="show5" :hide-on-blur=false>
         <div class="popup2">
@@ -77,7 +77,7 @@
         </div>
       </popup>
     </div>
-    
+
     <div v-transfer-dom>
       <popup v-model="show6">
         <div class="popup1">
@@ -94,7 +94,7 @@
     <group>
       <x-switch title="transparent background" v-model="show7"></x-switch>
     </group>
-    
+
     <div v-transfer-dom>
       <popup v-model="show7" height="270px" is-transparent>
         <div style="width: 95%;background-color:#fff;height:250px;margin:0 auto;border-radius:5px;padding-top:10px;">
@@ -124,7 +124,7 @@
         </div>
       </popup>
     </div>
-    
+
     <div v-transfer-dom>
       <popup v-model="show9" position="right">
         <div style="width:200px;">
@@ -170,18 +170,50 @@
       </popup>
     </div>
 
+    <group>
+      <x-switch title="popup form" v-model="show15"></x-switch>
+    </group>
+
+    <div v-transfer-dom>
+      <popup v-model="show14" height="100%">
+        <div>
+          <checklist title="请选择你喜欢的颜色" label-position="left" :max="3" :options="options14" v-model="form.colors" @on-change="chooseColor"></checklist>
+          <div style="padding: 15px;">
+            <x-button @click.native="show14 = false;" plain type="primary"> 确定 </x-button>
+          </div>
+        </div>
+      </popup>
+    </div>
+
+    <div v-transfer-dom>
+      <popup v-model="show15" height="100%">
+        <div>
+          <group>
+            <cell :class="{chosen: !!form.colors.length}" title="颜色选择" :value="form.colors.join(' ') ? form.colors.join(' ') : '请选择'" is-link @click.native="show14 = true;"></cell>
+            <popup-picker title="手机机型" v-model="form.mobile" :data="data14" placeholder="请选择机型"></popup-picker>
+            <x-address title="配货地址" v-model="form.address" :list="addressData" placeholder="请选择地址"></x-address>
+          </group>
+          <div style="padding: 15px;">
+            <x-button @click.native="submitForm" plain type="primary"> 提交 </x-button>
+          </div>
+        </div>
+      </popup>
+    </div>
+
   </div>
 </template>
 
 <script>
-import { TransferDom, Popup, Group, Cell, XButton, XSwitch, Scroller, Toast, XAddress, ChinaAddressData } from 'vux'
+import { TransferDom, Popup, PopupPicker, Checklist, Group, Cell, XButton, XSwitch, Scroller, Toast, XAddress, ChinaAddressData } from 'vux'
 
 export default {
   directives: {
     TransferDom
   },
   components: {
     Popup,
+    PopupPicker,
+    Checklist,
     Group,
     Cell,
     XSwitch,
@@ -209,7 +241,16 @@ export default {
       show10: false,
       show11: false,
       show12: false,
-      show13: false
+      show13: false,
+      show14: false,
+      options14: [ '红', '橙', '黄', '绿', '青', '蓝', '紫', '大红', '大绿', '大紫', '天蓝蓝', '水清清', '白皑皑', '选择困难症' ],
+      data14: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],
+      show15: false,
+      form: {
+        colors: [],
+        mobile: [],
+        address: []
+      }
     }
   },
   methods: {
@@ -220,6 +261,17 @@ export default {
     },
     log (str) {
       console.log(str)
+    },
+    chooseColor (value) {
+      if (value.includes('选择困难症')) {
+        this.$vux.alert.show('我们将配送一个随机颜色')
+      }
+    },
+    submitForm () {
+      this.$vux.toast.show('提交成功')
+      setTimeout(() => {
+        this.show15 = false
+      }, 300)
     }
   },
   watch: {
@@ -267,3 +319,10 @@ export default {
   }
 }
 </style>
+<style lang="less">
+.chosen {
+  .weui-cell__ft {
+    color: #000;
+  }
+}
+</style>