feat(Popup): add round prop (#1928)

docs/markdown/changelog.md

@@ -13,3 +13,9 @@
 
 - `text`选项重命名为`message`
 - `backgroundColor`选项重命名为`background`
+
+#### 新特性
+
+##### Popup
+
+- 新增`round`属性

example/pages/popup/index.js

@@ -7,7 +7,8 @@ Page({
       top: false,
       bottom: false,
       left: false,
-      right: false
+      right: false,
+      round: false
     }
   },
 
@@ -57,7 +58,11 @@ Page({
     this.toggle('bottom', false);
   },
 
-  onClickLeft() {
+  showRound() {
-    wx.navigateBack();
+    this.toggle('round', true);
+  },
+
+  hideRound() {
+    this.toggle('round', false);
   }
 });

example/pages/popup/index.json

@@ -1,4 +1,3 @@
 {
-  "navigationBarTitleText": "Popup 弹出层",
+  "navigationBarTitleText": "Popup 弹出层"
-  "navigationStyle": "custom"
 }

example/pages/popup/index.wxml

@@ -1,10 +1,3 @@
-<van-nav-bar
-  title="Popup 弹出层"
-  left-text="返回"
-  left-arrow
-  bind:click-left="onClickLeft"
-/>
-
 <demo-block title="基础用法" padding>
   <van-button type="primary" bind:click="showBasic">展示弹出层</van-button>
   <van-popup
@@ -50,3 +43,14 @@
     bind:close="hideRight"
   />
 </demo-block>
+
+<demo-block title="圆角弹窗" padding>
+  <van-button type="primary" bind:click="showRound">圆角弹窗</van-button>
+
+  <van-popup
+    show="{{ show.round }}"
+    position="bottom"
+    custom-style="height: 20%"
+    bind:close="hideRound"
+  />
+</demo-block>

packages/common/style/var.less

@@ -88,6 +88,9 @@
 @notify-font-size: 14px;
 @notify-line-height: 20px;
 
+// Popup
+@popup-round-border-radius: 12px;
+
 // Switch
 @switch-width: 2em;
 @switch-height: 1em;

packages/popup/README.md

@@ -47,7 +47,21 @@ Page({
 <van-popup
   show="{{ show }}"
   position="top"
-  style="height: '20%'"
+  style="height: 20%"
+  bind:close="onClose"
+/>
+```
+
+### 圆角弹窗
+
+设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式
+
+```html
+<van-popup
+  show="{{ show }}"
+  round
+  position="bottom"
+  :style="{ height: '20%' }"
   bind:close="onClose"
 />
 ```
@@ -61,19 +75,20 @@ Page({
 | overlay | 是否显示遮罩层 | *boolean* | `true` |
 | position | 弹出位置，可选值为 `top` `bottom` `right` `left` | *string* | `center` |
 | duration | 动画时长，单位为毫秒 | *number \| object* | `300` |
+| round | 是否显示圆角 | *boolean* | `false` |
 | custom-style | 自定义弹出层样式 | *string* | `` |
 | overlay-style | 自定义背景蒙层样式 | *string* | `` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
 | safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | *boolean* | `true` |
-| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度 + 导航栏高度） | *boolean* | `false` |
+| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | *boolean* | `false` |
 
 ### Events
 
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
-| bind:close | 蒙层关闭时触发 | - |
+| bind:close | 关闭弹出层时触发 | - |
-| bind:click-overlay | 点击蒙层时触发 | - |
+| bind:click-overlay | 点击遮罩层时触发 | - |
-| bind:transitionEnd | 蒙层关闭后触发 | - |
+| bind:transitionEnd | 弹出层动画结束后触发 | - |
 
 ### 外部样式类
 

packages/popup/index.less

@@ -14,6 +14,10 @@
 
   &--center {
     transform: translate3d(-50%, -50%, 0);
+
+    &.van-popup--round {
+      border-radius: @popup-round-border-radius;
+    }
   }
 
   &--top {
@@ -23,6 +27,10 @@
     left: 50%;
     width: 100%;
     transform: translate3d(-50%, 0, 0);
+
+    &.van-popup--round {
+      border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius;
+    }
   }
 
   &--right {
@@ -31,6 +39,10 @@
     bottom: auto;
     left: auto;
     transform: translate3d(0, -50%, 0);
+
+    &.van-popup--round {
+      border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius;
+    }
   }
 
   &--bottom {
@@ -40,6 +52,10 @@
     left: 50%;
     width: 100%;
     transform: translate3d(-50%, 0, 0);
+
+    &.van-popup--round {
+      border-radius: @popup-round-border-radius @popup-round-border-radius 0 0;
+    }
   }
 
   &--left {
@@ -48,22 +64,15 @@
     bottom: auto;
     left: 0;
     transform: translate3d(0, -50%, 0);
+
+    &.van-popup--round {
+      border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0;
+    }
   }
 
   &--bottom&--safe {
     padding-bottom: @safe-area-inset-bottom;
   }
-
-  &--left &__safe-top,
-  &--right &__safe-top,
-  &--top &__safe-top {
-    height: @nav-bar-height;
-  }
-
-  &--center &__safe-top,
-  &--bottom &__safe-top {
-    padding-top: 0 !important;
-  }
 }
 
 .van-scale-enter-active,

packages/popup/index.ts

@@ -15,12 +15,13 @@ VantComponent({
   mixins: [transition(false), safeArea()],
 
   props: {
+    round: Boolean,
+    customStyle: String,
+    overlayStyle: String,
     transition: {
       type: String,
       observer: 'observeClass'
     },
-    customStyle: String,
-    overlayStyle: String,
     zIndex: {
       type: Number,
       value: 100

packages/popup/index.wxml

@@ -11,10 +11,9 @@
 />
 <view
   wx:if="{{ inited }}"
-  class="custom-class {{ classes }} {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom }]) }}"
+  class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safe: isIPhoneX && safeAreaInsetBottom }]) }}"
-  style="z-index: {{ zIndex }}; -webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }} {{ customStyle }}"
+  style="z-index: {{ zIndex }}; -webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }} {{ safeAreaInsetTop ? 'padding-top: ' + statusBarHeight + 'px;' : '' }} {{ customStyle }}"
   bind:transitionend="onTransitionEnd"
 >
-  <view wx:if="{{ safeAreaInsetTop }}" class="van-popup__safe-top" style="padding-top: {{ statusBarHeight }}px;"></view>
   <slot />
 </view>