diff --git a/docs/markdown/changelog.md b/docs/markdown/changelog.md
index 1446cd9d..3f222e74 100644
--- a/docs/markdown/changelog.md
+++ b/docs/markdown/changelog.md
@@ -13,3 +13,9 @@
- `text`选项重命名为`message`
- `backgroundColor`选项重命名为`background`
+
+#### 新特性
+
+##### Popup
+
+- 新增`round`属性
diff --git a/example/pages/popup/index.js b/example/pages/popup/index.js
index 038ddf39..d52a7255 100644
--- a/example/pages/popup/index.js
+++ b/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() {
- wx.navigateBack();
+ showRound() {
+ this.toggle('round', true);
+ },
+
+ hideRound() {
+ this.toggle('round', false);
}
});
diff --git a/example/pages/popup/index.json b/example/pages/popup/index.json
index f546244e..ca281fb4 100644
--- a/example/pages/popup/index.json
+++ b/example/pages/popup/index.json
@@ -1,4 +1,3 @@
{
- "navigationBarTitleText": "Popup 弹出层",
- "navigationStyle": "custom"
+ "navigationBarTitleText": "Popup 弹出层"
}
diff --git a/example/pages/popup/index.wxml b/example/pages/popup/index.wxml
index 6b497c25..82186ec4 100644
--- a/example/pages/popup/index.wxml
+++ b/example/pages/popup/index.wxml
@@ -1,10 +1,3 @@
-
-
展示弹出层
+
+
+ 圆角弹窗
+
+
+
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 3f09c412..b57bcdf7 100644
--- a/packages/common/style/var.less
+++ b/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;
diff --git a/packages/popup/README.md b/packages/popup/README.md
index 01ce8367..bfa41eb5 100644
--- a/packages/popup/README.md
+++ b/packages/popup/README.md
@@ -47,7 +47,21 @@ Page({
+```
+
+### 圆角弹窗
+
+设置`round`属性后,弹窗会根据弹出位置添加不同的圆角样式
+
+```html
+
```
@@ -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:click-overlay | 点击蒙层时触发 | - |
-| bind:transitionEnd | 蒙层关闭后触发 | - |
+| bind:close | 关闭弹出层时触发 | - |
+| bind:click-overlay | 点击遮罩层时触发 | - |
+| bind:transitionEnd | 弹出层动画结束后触发 | - |
### 外部样式类
diff --git a/packages/popup/index.less b/packages/popup/index.less
index d322ff5f..5f088bd6 100644
--- a/packages/popup/index.less
+++ b/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,
diff --git a/packages/popup/index.ts b/packages/popup/index.ts
index e76fb6a7..c66b38b8 100644
--- a/packages/popup/index.ts
+++ b/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
diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml
index 414d1c7a..4fd866f0 100644
--- a/packages/popup/index.wxml
+++ b/packages/popup/index.wxml
@@ -11,10 +11,9 @@
/>