From f6be2db4965d5a111aa550c5e5739aa82a7b1829 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 5 Sep 2019 16:45:22 +0800
Subject: [PATCH] feat(Popup): add closeable prop (#1964)

---
 example/pages/popup/index.js   | 11 ++++++++++-
 example/pages/popup/index.wxml | 13 +++++++++++++
 packages/common/style/var.less |  4 ++++
 packages/popup/README.md       |  1 +
 packages/popup/index.json      |  1 +
 packages/popup/index.less      | 13 +++++++++++++
 packages/popup/index.ts        |  5 +++++
 packages/popup/index.wxml      |  6 ++++++
 8 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/example/pages/popup/index.js b/example/pages/popup/index.js
index d52a7255..9394ac40 100644
--- a/example/pages/popup/index.js
+++ b/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);
   }
 });
diff --git a/example/pages/popup/index.wxml b/example/pages/popup/index.wxml
index 82186ec4..656c4640 100644
--- a/example/pages/popup/index.wxml
+++ b/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"
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index e51dce27..64969de4 100644
--- a/packages/common/style/var.less
+++ b/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;
diff --git a/packages/popup/README.md b/packages/popup/README.md
index ae4cabc1..259a5d5d 100644
--- a/packages/popup/README.md
+++ b/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` |
 
diff --git a/packages/popup/index.json b/packages/popup/index.json
index 0dd2931d..88a6eab2 100644
--- a/packages/popup/index.json
+++ b/packages/popup/index.json
@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
+    "van-icon": "../icon/index",
     "van-overlay": "../overlay/index"
   }
 }
diff --git a/packages/popup/index.less b/packages/popup/index.less
index 5f088bd6..3fe5d533 100644
--- a/packages/popup/index.less
+++ b/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,
diff --git a/packages/popup/index.ts b/packages/popup/index.ts
index c66b38b8..3cbc8d1a 100644
--- a/packages/popup/index.ts
+++ b/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');
 
diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml
index 4fd866f0..10293184 100644
--- a/packages/popup/index.wxml
+++ b/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>