feat(Popup): add close-icon prop (#1967)

docs/markdown/changelog.md

@@ -33,6 +33,10 @@
 
 - 基础红色更新为`#ee0a24`
 
+##### DatetimePicker
+
+- 新增`filter`属性
+
 ##### Field
 
 - 新增`clickable`属性
@@ -41,3 +45,5 @@
 ##### Popup
 
 - 新增`round`属性
+- 新增`closeable`属性
+- 新增`close-icon`属性

example/pages/popup/index.js

@@ -9,7 +9,8 @@ Page({
       left: false,
       right: false,
       round: false,
-      closeIcon: false
+      closeIcon: false,
+      customCloseIcon: false
     }
   },
 
@@ -73,5 +74,13 @@ Page({
 
   hideCloseIcon() {
     this.toggle('closeIcon', false);
+  },
+
+  showCustomCloseIcon() {
+    this.toggle('customCloseIcon', true);
+  },
+
+  hideCustomCloseIcon() {
+    this.toggle('customCloseIcon', false);
   }
 });

example/pages/popup/index.wxml

@@ -45,7 +45,7 @@
 </demo-block>
 
 <demo-block title="关闭图标" padding>
-  <van-button type="primary" bind:click="showCloseIcon">关闭图标</van-button>
+  <van-button type="primary" class="demo-margin-right" bind:click="showCloseIcon">关闭图标</van-button>
 
   <van-popup
     show="{{ show.closeIcon }}"
@@ -54,6 +54,17 @@
     custom-style="height: 20%"
     bind:close="hideCloseIcon"
   />
+
+  <van-button type="primary" bind:click="showCustomCloseIcon">自定义图标</van-button>
+
+  <van-popup
+    show="{{ show.customCloseIcon }}"
+    closeable
+    close-icon="close"
+    position="bottom"
+    custom-style="height: 20%"
+    bind:close="hideCustomCloseIcon"
+  />
 </demo-block>
 
 <demo-block title="圆角弹窗" padding>

packages/popup/README.md

@@ -57,6 +57,30 @@ Page({
 />
 ```
 
+### 关闭图标
+
+设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标
+
+```html
+<van-popup
+  show="{{ show }}"
+  closeable
+  position="bottom"
+  :style="{ height: '20%' }"
+  bind:close="onClose"
+/>
+
+<!-- 自定义图标 -->
+<van-popup
+  show="{{ show }}"
+  closeable
+  close-icon="close"
+  position="bottom"
+  :style="{ height: '20%' }"
+  bind:close="onClose"
+/>
+```
+
 ### 圆角弹窗
 
 设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式
@@ -85,6 +109,7 @@ Page({
 | overlay-style | 自定义背景蒙层样式 | *string* | `` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
 | closeable | 是否显示关闭图标 | *boolean* | `false` |
+| close-icon | 关闭图标名称或图片链接 | *string* | `cross` |
 | safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | *boolean* | `true` |
 | safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | *boolean* | `false` |
 

packages/popup/index.ts

@@ -31,6 +31,10 @@ VantComponent({
       type: Boolean,
       value: true
     },
+    closeIcon: {
+      type: String,
+      value: 'cross'
+    },
     closeOnClickOverlay: {
       type: Boolean,
       value: true

packages/popup/index.wxml

@@ -18,7 +18,7 @@
   <slot />
   <van-icon
     wx:if="{{ closeable }}"
-    name="cross"
+    name="{{ closeIcon }}"
     class="van-popup__close-icon"
     bind:tap="onClickCloseIcon"
   />