feat(Popup): add closeable prop (#1964)

example/pages/popup/index.js

@@ -8,7 +8,8 @@ Page({
       bottom: false,
       left: false,
       right: false,
-      round: false
+      round: false,
+      closeIcon: false
     }
   },
 
@@ -64,5 +65,13 @@ Page({
 
   hideRound() {
     this.toggle('round', false);
+  },
+
+  showCloseIcon() {
+    this.toggle('closeIcon', true);
+  },
+
+  hideCloseIcon() {
+    this.toggle('closeIcon', false);
   }
 });

example/pages/popup/index.wxml

@@ -44,11 +44,24 @@
   />
 </demo-block>
 
+<demo-block title="关闭图标" padding>
+  <van-button type="primary" bind:click="showCloseIcon">关闭图标</van-button>
+
+  <van-popup
+    show="{{ show.closeIcon }}"
+    closeable
+    position="bottom"
+    custom-style="height: 20%"
+    bind:close="hideCloseIcon"
+  />
+</demo-block>
+
 <demo-block title="圆角弹窗" padding>
   <van-button type="primary" bind:click="showRound">圆角弹窗</van-button>
 
   <van-popup
     show="{{ show.round }}"
+    round
     position="bottom"
     custom-style="height: 20%"
     bind:close="hideRound"

packages/common/style/var.less

@@ -90,6 +90,10 @@
 
 // Popup
 @popup-round-border-radius: 12px;
+@popup-close-icon-size: 18px;
+@popup-close-icon-color: @gray-dark;
+@popup-close-icon-margin: 16px;
+@popup-close-icon-z-index: 1;
 
 // Switch
 @switch-width: 2em;

packages/popup/README.md

@@ -84,6 +84,7 @@ Page({
 | custom-style | 自定义弹出层样式 | *string* | `` |
 | overlay-style | 自定义背景蒙层样式 | *string* | `` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
+| closeable | 是否显示关闭图标 | *boolean* | `false` |
 | safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | *boolean* | `true` |
 | safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | *boolean* | `false` |
 

packages/popup/index.json

@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
+    "van-icon": "../icon/index",
     "van-overlay": "../overlay/index"
   }
 }

packages/popup/index.less

@@ -73,6 +73,19 @@
   &--bottom&--safe {
     padding-bottom: @safe-area-inset-bottom;
   }
+
+  &__close-icon {
+    position: absolute;
+    top: @popup-close-icon-margin;
+    right: @popup-close-icon-margin;
+    z-index: @popup-close-icon-z-index;
+    color: @popup-close-icon-color;
+    font-size: @popup-close-icon-size;
+
+    &:active {
+      opacity: .6;
+    }
+  }
 }
 
 .van-scale-enter-active,

packages/popup/index.ts

@@ -16,6 +16,7 @@ VantComponent({
 
   props: {
     round: Boolean,
+    closeable: Boolean,
     customStyle: String,
     overlayStyle: String,
     transition: {
@@ -46,6 +47,10 @@ VantComponent({
   },
 
   methods: {
+    onClickCloseIcon() {
+      this.$emit('close');
+    },
+
     onClickOverlay() {
       this.$emit('click-overlay');
 

packages/popup/index.wxml

@@ -16,4 +16,10 @@
   bind:transitionend="onTransitionEnd"
 >
   <slot />
+  <van-icon
+    wx:if="{{ closeable }}"
+    name="cross"
+    class="van-popup__close-icon"
+    bind:tap="onClickCloseIcon"
+  />
 </view>