Browse Source

fix:修复menu组件多实例bug #182

yumingming11 6 years ago
parent
commit
be8db2132f
3 changed files with 38 additions and 7 deletions
  1. 13 0
      src/packages/dialog/_dialog.js
  2. 5 6
      src/packages/menu/demo.vue
  3. 20 1
      src/packages/menu/menu.vue

+ 13 - 0
src/packages/dialog/_dialog.js

@@ -24,6 +24,19 @@ let Dialog = function (options) {
         document.body.appendChild(inst.$el);
     }
 
+    setTimeout(() => {
+        //  设置z-index保证最新的弹窗再最上面
+        let dialogThis = document.querySelector('#'+options.id);
+        var nutDialogWrapper = document.getElementsByClassName('nut-dialog-wrapper');
+        var zIndexNum = 100 + (10 * (nutDialogWrapper.length));
+        dialogThis.style.zIndex = zIndexNum;
+        setTimeout(function() {
+            for(var i = 0;i < nutDialogWrapper.length;i++) {
+                nutDialogWrapper[i].style.zIndex = zIndexNum - 1 - i;
+            }
+        }, 0);
+    }, 10);
+
     Vue.nextTick(() => {
         inst.visible = true;
     });

+ 5 - 6
src/packages/menu/demo.vue

@@ -11,7 +11,6 @@
       @close="switchMenu('isVisible1',1)"
       @choose="chooseMenu"
     ></nut-menu>
-
     <h4>多选style1(一、二、三)列</h4>
     <div class="list list2">
       <span slot="title" @click="switchMenu('isVisible2',2)" ref="title2">京东物流</span>
@@ -362,11 +361,11 @@ export default {
       }
       this.visible[`${param}`] = !this.visible[`${param}`];
     },
-    chooseMenu(item, index) {
-      this.switchMenu("isVisible1", 1);
-      this.list1.map((value, key) => (value.selected = false));
-      this.$set(this.list1[index], "selected", true);
-      this.$refs.title1.innerText = item.text;
+    chooseMenu(item, index, list) {
+      this.switchMenu("isVisible" + this.titlenum, 1);
+      this['list'+this.titlenum].map((value, key) => (value.selected = false));
+      this.$set(this['list'+this.titlenum][index], "selected", true);
+      this.$refs[`title${this.titlenum}`].innerText = item.text;
     },
 
     reset(list) {

+ 20 - 1
src/packages/menu/menu.vue

@@ -62,6 +62,23 @@ import Button from '../button/button.vue';
 import ButtonGroup from '../buttongroup/buttongroup.vue';
 import Icon from '../icon/icon.vue';
 import locale from "../../mixins/locale";
+const lockMaskScroll = (bodyCls => {
+  let scrollTop;
+  return {
+    afterOpen: function() {
+      scrollTop =
+        document.scrollingElement.scrollTop || document.body.scrollTop;
+      document.body.classList.add(bodyCls);
+      document.body.style.top = -scrollTop + "px";
+    },
+    beforeClose: function() {
+      if (document.body.classList.contains(bodyCls)) {
+        document.body.classList.remove(bodyCls);
+        document.scrollingElement.scrollTop = scrollTop;
+      }
+    }
+  };
+})("dialog-open");
 export default {
     name:'nut-menu',
     mixins: [locale],
@@ -110,7 +127,9 @@ export default {
         }
     },
     watch: {
-
+        isVisible(val) {
+            lockMaskScroll[val ? "afterOpen" : "beforeClose"]();
+        }
     },
     data() {
         return {