feat(Popup): add close-icon-position prop (#2064)

example/pages/popup/index.js

@@ -10,7 +10,8 @@ Page({
       right: false,
       round: false,
       closeIcon: false,
-      customCloseIcon: false
+      customCloseIcon: false,
+      customIconPosition: false
     }
   },
 
@@ -82,5 +83,13 @@ Page({
 
   hideCustomCloseIcon() {
     this.toggle('customCloseIcon', false);
+  },
+
+  showCustomIconPosition() {
+    this.toggle('customIconPosition', true);
+  },
+
+  hideCustomIconPosition() {
+    this.toggle('customIconPosition', false);
   }
 });

example/pages/popup/index.wxml

@@ -1,5 +1,5 @@
-<demo-block title="基础用法" padding>
+<demo-block title="基础用法">
-  <van-button type="primary" bind:click="showBasic">展示弹出层</van-button>
+  <van-cell title="展示弹出层" is-link bind:click="showBasic" />
   <van-popup
     show="{{ show.basic }}"
     custom-style="padding: 30px 50px"
@@ -9,14 +9,11 @@
   </van-popup>
 </demo-block>
 
-<demo-block title="弹出位置" padding>
+<demo-block title="弹出位置">
-  <view style="margin-bottom: 15px">
+  <van-cell title="顶部弹出" is-link bind:click="showTop" />
-    <van-button type="primary" bind:click="showTop" class="demo-margin-right">顶部弹出</van-button>
+  <van-cell title="底部弹出" is-link bind:click="showBottom" />
-    <van-button type="primary" bind:click="showBottom">底部弹出</van-button>
+  <van-cell title="左侧弹出" is-link bind:click="showLeft" />
-  </view>
+  <van-cell title="右侧弹出" is-link bind:click="showRight" />
-
-  <van-button type="primary" bind:click="showLeft" class="demo-margin-right">左侧弹出</van-button>
-  <van-button type="primary" bind:click="showRight">右侧弹出</van-button>
 
   <van-popup
     show="{{ show.top }}"
@@ -44,8 +41,10 @@
   />
 </demo-block>
 
-<demo-block title="关闭图标" padding>
+<demo-block title="关闭图标">
-  <van-button type="primary" class="demo-margin-right" bind:click="showCloseIcon">关闭图标</van-button>
+  <van-cell title="关闭图标" is-link bind:click="showCloseIcon" />
+  <van-cell title="自定义图标" is-link bind:click="showCustomCloseIcon" />
+  <van-cell title="图标位置" is-link bind:click="showCustomIconPosition" />
 
   <van-popup
     show="{{ show.closeIcon }}"
@@ -55,8 +54,6 @@
     bind:close="hideCloseIcon"
   />
 
-  <van-button type="primary" bind:click="showCustomCloseIcon">自定义图标</van-button>
-
   <van-popup
     show="{{ show.customCloseIcon }}"
     closeable
@@ -65,10 +62,19 @@
     custom-style="height: 20%"
     bind:close="hideCustomCloseIcon"
   />
+
+  <van-popup
+    show="{{ show.customIconPosition }}"
+    closeable
+    close-icon-position="top-left"
+    position="bottom"
+    custom-style="height: 20%"
+    bind:close="hideCustomIconPosition"
+  />
 </demo-block>
 
-<demo-block title="圆角弹窗" padding>
+<demo-block title="圆角弹窗">
-  <van-button type="primary" bind:click="showRound">圆角弹窗</van-button>
+  <van-cell title="圆角弹窗" is-link bind:click="showRound" />
 
   <van-popup
     show="{{ show.round }}"

packages/popup/README.md

@@ -52,21 +52,21 @@ Page({
 <van-popup
   show="{{ show }}"
   position="top"
-  style="height: 20%;"
+  custom-style="height: 20%;"
   bind:close="onClose"
 />
 ```
 
 ### 关闭图标
 
-设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标
+设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置
 
 ```html
 <van-popup
   show="{{ show }}"
   closeable
   position="bottom"
-  :style="{ height: '20%' }"
+  custom-style="height: 20%"
   bind:close="onClose"
 />
 
@@ -76,7 +76,17 @@ Page({
   closeable
   close-icon="close"
   position="bottom"
-  :style="{ height: '20%' }"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+
+<!-- 图标位置 -->
+<van-popup
+  show="{{ show }}"
+  closeable
+  close-icon-position="top-left"
+  position="bottom"
+  custom-style="height: 20%"
   bind:close="onClose"
 />
 ```
@@ -90,7 +100,7 @@ Page({
   show="{{ show }}"
   round
   position="bottom"
-  :style="{ height: '20%' }"
+  custom-style="height: 20%"
   bind:close="onClose"
 />
 ```

packages/popup/index.less

@@ -89,12 +89,30 @@
 
   &__close-icon {
     position: absolute;
-    .theme(top, '@popup-close-icon-margin');
-    .theme(right, '@popup-close-icon-margin');
     .theme(z-index, '@popup-close-icon-z-index');
     .theme(color, '@popup-close-icon-color');
     .theme(font-size, '@popup-close-icon-size');
 
+    &--top-left {
+      .theme(top, '@popup-close-icon-margin');
+      .theme(left, '@popup-close-icon-margin');
+    }
+
+    &--top-right {
+      .theme(top, '@popup-close-icon-margin');
+      .theme(right, '@popup-close-icon-margin');
+    }
+
+    &--bottom-left {
+      .theme(bottom, '@popup-close-icon-margin');
+      .theme(left, '@popup-close-icon-margin');
+    }
+
+    &--bottom-right {
+      .theme(right, '@popup-close-icon-margin');
+      .theme(bottom, '@popup-close-icon-margin');
+    }
+
     &:active {
       opacity: 0.6;
     }

packages/popup/index.ts

@@ -35,6 +35,10 @@ VantComponent({
       type: String,
       value: 'cross'
     },
+    closeIconPosition: {
+      type: String,
+      value: 'top-right'
+    },
     closeOnClickOverlay: {
       type: Boolean,
       value: true

packages/popup/index.wxml

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