Browse Source

feat: 添加关闭弹层事件

yangxiaolu3 5 years ago
parent
commit
368d22e7a2
3 changed files with 19 additions and 14 deletions
  1. 8 11
      src/packages/address/address.vue
  2. 5 0
      src/packages/address/demo.vue
  3. 6 3
      src/packages/address/doc.md

+ 8 - 11
src/packages/address/address.vue

@@ -19,7 +19,7 @@
         <span v-if="type == 'custom'">{{ customAddressTitle }}</span>
         <span v-if="type == 'exist'">{{ existAddressTitle }}</span>
 
-        <span @click="handClose('hand')"><nut-icon v-if="closeBtnIcon" size="18px" type="self" :url="closeBtnIcon"></nut-icon></span>
+        <span @click="handClose('cross')"><nut-icon v-if="closeBtnIcon" size="18px" type="self" :url="closeBtnIcon"></nut-icon></span>
       </div>
 
       <!-- 请选择 -->
@@ -282,7 +282,7 @@ export default {
 
       this.handClose();
     },
-
+  
     // 关闭
     close() {
       const that = this;
@@ -308,29 +308,26 @@ export default {
       if (this.closeWay == 'self') {
         this.$emit('close', res);
       } else {
-        // this.$emit('close',{type:'hand'})
+        
+        this.$emit('closeMask',{'closeWay':this.closeWay});
       }
 
       setTimeout(() => {
         that.showModule = 'type';
       }, 500);
     },
-    // 手动关闭 点击叉号,或者蒙层
+    // 手动关闭 点击叉号(cross),或者蒙层(mask)
     handClose(type = 'self') {
 
       if(!this.closeBtnIcon) return
 
-      if (type == 'hand') {
-        this.closeWay = 'hand';
-      } else {
-        this.closeWay = 'self';
-      }
-
+      this.closeWay = type == 'cross'?'cross':'self'
+     
       this.showPopup = false;
     },
     // 点击遮罩层关闭
     clickOverlay() {
-      this.closeWay = 'hand';
+      this.closeWay = 'mask';
     },
     // 初始化
     initAddress() {

+ 5 - 0
src/packages/address/demo.vue

@@ -72,6 +72,7 @@
       @selected="selected4"
       customAndExistTitle="选择其他地址"
       @switchModule="switchModule"
+      @closeMask="closeMask"
     ></nut-address>
   </div>
 </template>
@@ -231,6 +232,10 @@ export default {
       } else {
         console.log('点击了自定义地址左上角的返回按钮');
       }
+    },
+
+    closeMask(val){
+      console.log('关闭弹层',val)
     }
   }
 };

+ 6 - 3
src/packages/address/doc.md

@@ -207,7 +207,8 @@ export default {
     @onChange="onChange4" 
     @close="close4" 
     @selected="selected4"
-    @switchModule="switchModule">
+    @switchModule="switchModule"
+    @closeMask="closeMask">
 </nut-address>
 
 
@@ -253,12 +254,14 @@ export default {
       console.log(nowExistAdd)
     },
     switchModule(cal){
-        
         if(cal.type == 'custom'){
           console.log('点击了“选择其他地址”按钮')
         } else {
           console.log('点击了自定义地址左上角的返回按钮')
         }
+    },
+    closeMask(val){
+      console.log('关闭弹层',val)
     }
   }
 }
@@ -299,6 +302,7 @@ export default {
 | onChange | 自定义选择地址时,选择地区时触发 |  参考 onChange
 | selected | 选择已有地址列表时触发 | 参考 selected
 | close | 地址选择弹框关闭时触发 | 参考 close
+| closeMask | 点击遮罩层或点击右上角叉号关闭时触发 | {closeWay:'mask'/'cross'}
 | switchModule | 点击‘选择其他地址’或自定义地址选择左上角返回按钮触发 | {type:'exist'/'custom'}
 
 
@@ -322,4 +326,3 @@ export default {
 | type | 地址选择类型 exist/custom  |  exist/custom
 | data | 选择地址的值,custom 时,addressStr 为选择的地址组合 | {} 
 
-注:点击叉号或者点击遮罩层关闭地址选择,不会触发 close 事件。