feat: 添加点击遮罩层关闭事件

src/packages/address/address.vue

@@ -10,15 +10,16 @@
       @open="closeWay = 'self'"
     >
       <div class="title">
+
         <span class="arrow" @click="switchModule" v-if="showModule == 'custom' && type == 'exist' && backBtnIcon">
-          <nut-icon type="self" :url="backBtnIcon"></nut-icon>
+          <nut-icon  type="self" :url="backBtnIcon"></nut-icon>
         </span>
         <span class="arrow" v-else></span>
 
         <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>
 
       <!-- 请选择 -->
@@ -281,7 +282,7 @@ export default {
 
       this.handClose();
     },
-
+  
     // 关闭
     close() {
       const that = this;
@@ -307,28 +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';
-      }
+      if(!this.closeBtnIcon) return
 
+      this.closeWay = type == 'cross'?'cross':'self'
+     
       this.showPopup = false;
     },
     // 点击遮罩层关闭
     clickOverlay() {
-      this.closeWay = 'hand';
+      this.closeWay = 'mask';
     },
     // 初始化
     initAddress() {
@@ -340,13 +339,13 @@ export default {
     },
     // 选择其他地址
     switchModule() {
-
+      
       if(this.showModule == 'exist'){
         this.showModule = 'custom'
       }else{
         this.showModule = 'exist'
       }
-      
+
       this.initAddress();
 
       this.$emit('switchModule', { type: this.showModule });

src/packages/address/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="demo-list">
+  <div class="address-box">
     <h4>选择自定义地址</h4>
     <div class="address-list init" @click="showAddress">
       <div class="titile">选择地址</div>
@@ -72,6 +72,7 @@
       @selected="selected4"
       customAndExistTitle="选择其他地址"
       @switchModule="switchModule"
+      @closeMask="closeMask"
     ></nut-address>
   </div>
 </template>
@@ -231,45 +232,44 @@ export default {
       } else {
         console.log('点击了自定义地址左上角的返回按钮');
       }
+    },
+
+    closeMask(val){
+      console.log('关闭弹层',val)
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.demo-list {
-	margin-top: 10px;
-
-	.address-list {
-		margin-bottom: 10px;
-		background: #fff;
-		border-radius: 4px;
-		font-size: 14px;
-		padding: 10px;
-
-		&.init {
-			display: flex;
-
-			.titile {
-				margin-right: 15px;
-			}
-
-			.choose {
-				color: #999;
-			}
-		}
-
-		&.other {
-			display: flex;
+.address-box {
+  margin-top: 10px;
 
-			.titile {
-				margin-right: 15px;
-			}
+  .address-list {
+    margin-bottom: 10px;
+    background: #fff;
+    border-radius: 4px;
+    font-size: 14px;
+    padding: 10px;
 
-			.choose {
-				color: #999;
-			}
-		}
-	}
+    &.init {
+      display: flex;
+      .titile {
+        margin-right: 15px;
+      }
+      .choose {
+        color: #999;
+      }
+    }
+    &.other {
+      display: flex;
+      .titile {
+        margin-right: 15px;
+      }
+      .choose {
+        color: #999;
+      }
+    }
+  }
 }
 </style>

src/packages/address/doc.md

@@ -133,7 +133,7 @@ export default {
   :isShowCustomAddress="false" 
   @selected="selected3" 
   :defaultIcon="defaultIcon" 
-  :selectedIcon="selectedIcon"
+  :selectedIcon='selectedIcon'
   :closeBtnIcon="closeBtnIcon">
 </nut-address>
 
@@ -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 事件。