diff --git a/src/popup/README.md b/src/popup/README.md
index 2cfd4433a..c76f7318a 100644
--- a/src/popup/README.md
+++ b/src/popup/README.md
@@ -48,6 +48,17 @@ Use `position` prop to set popup display position
/>
```
+### Round Corner
+
+```html
+
+```
+
### Get Container
Use `get-container` prop to specify mount location
@@ -93,11 +104,12 @@ export default {
| position | Can be set to `top` `bottom` `right` `left` | `String` | `center` |
| overlay-class | Custom overlay class | `String` | - |
| overlay-style | Custom overlay style | `Object` | - |
-| close-on-click-overlay | Close popup when click overlay | `Boolean` | `true` |
-| transition | Transition | `String` | `popup-slide` |
| duration | Transition duration, unit second | `Number` | `0.3` |
+| round | Whether to show round corner | `Boolean` | `false` |
| lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
| lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
+| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
+| transition | Transition | `String` | `popup-slide` |
| get-container | Return the mount node for Popup | `String | () => HTMLElement` | - |
### Events
diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md
index ca341d8a5..3adb13491 100644
--- a/src/popup/README.zh-CN.md
+++ b/src/popup/README.zh-CN.md
@@ -54,6 +54,19 @@ export default {
/>
```
+### 圆角弹窗
+
+设置`round`属性后,弹窗会根据弹出位置添加不同的圆角样式
+
+```html
+
+```
+
### 指定挂载位置
弹出层默认挂载到组件所在位置,可以通过`get-container`属性指定挂载位置
@@ -97,15 +110,16 @@ export default {
|------|------|------|------|------|
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
| overlay | 是否显示遮罩层 | `Boolean` | `true` | - |
-| position | 位置,可选值为 `top` `bottom`
`right` `left` | `String` | `center` | - |
+| position | 弹出位置,可选值为 `top` `bottom` `right` `left` | `String` | `center` | - |
| overlay-class | 自定义遮罩层类名 | `String` | - | - |
| overlay-style | 自定义遮罩层样式 | `Object` | - | - |
-| transition | 动画类名,用法与原生`transtion`组件的`name`属性一致 | `String` | - | - |
| duration | 动画时长,单位秒 | `Number` | `0.3` | 2.0.0 |
-| get-container | 指定挂载的节点,可以传入选择器,
或一个返回节点的函数 | `String | () => HTMLElement` | - | - |
-| close-on-click-overlay | 是否在点击遮罩层后关闭 | `Boolean` | `true` | - |
+| round | 是否显示圆角 | `Boolean` | `false` | 2.0.7 |
| lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | - |
| lazy-render | 是否在显示弹层时才渲染节点 | `Boolean` | `true` | - |
+| close-on-click-overlay | 是否在点击遮罩层后关闭 | `Boolean` | `true` | - |
+| transition | 动画类名,用法与 Vue 内置的`transtion`组件的`name`属性一致 | `String` | - | - |
+| get-container | 指定挂载的节点,可以传入选择器,
或一个返回节点的函数 | `String | () => HTMLElement` | - | - |
### Events
diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue
index 00ff23ce6..95c553ef8 100644
--- a/src/popup/demo/index.vue
+++ b/src/popup/demo/index.vue
@@ -71,6 +71,24 @@
/>
+
+
+ {{ $t('roundCorner') }}
+
+
+
+
{this.slots()}
diff --git a/src/popup/index.less b/src/popup/index.less
index cb30426ff..26c08085b 100644
--- a/src/popup/index.less
+++ b/src/popup/index.less
@@ -17,30 +17,50 @@
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
+
+ &.van-popup--round {
+ border-radius: @popup-round-border-radius;
+ }
}
&--top {
top: 0;
left: 0;
width: 100%;
+
+ &.van-popup--round {
+ border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius;
+ }
}
&--right {
top: 50%;
right: 0;
transform: translate3d(0, -50%, 0);
+
+ &.van-popup--round {
+ border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius;
+ }
}
&--bottom {
bottom: 0;
left: 0;
width: 100%;
+
+ &.van-popup--round {
+ border-radius: @popup-round-border-radius @popup-round-border-radius 0 0;
+ }
}
&--left {
top: 50%;
left: 0;
transform: translate3d(0, -50%, 0);
+
+ &.van-popup--round {
+ border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0;
+ }
}
&-slide-top-enter,
diff --git a/src/popup/test/__snapshots__/demo.spec.js.snap b/src/popup/test/__snapshots__/demo.spec.js.snap
index 23947ee24..32731277e 100644
--- a/src/popup/test/__snapshots__/demo.spec.js.snap
+++ b/src/popup/test/__snapshots__/demo.spec.js.snap
@@ -23,6 +23,11 @@ exports[`renders demo correctly 1`] = `
+
+
+
diff --git a/src/popup/test/__snapshots__/index.spec.js.snap b/src/popup/test/__snapshots__/index.spec.js.snap
index 77e4bf65e..6fd203565 100644
--- a/src/popup/test/__snapshots__/index.spec.js.snap
+++ b/src/popup/test/__snapshots__/index.spec.js.snap
@@ -3,3 +3,5 @@
exports[`duration prop 1`] = ``;
exports[`reset z-index 1`] = ``;
+
+exports[`round prop 1`] = ``;
diff --git a/src/popup/test/index.spec.js b/src/popup/test/index.spec.js
index fa821a14e..9a659aca1 100644
--- a/src/popup/test/index.spec.js
+++ b/src/popup/test/index.spec.js
@@ -211,3 +211,14 @@ test('duration prop', () => {
expect(wrapper).toMatchSnapshot();
});
+
+test('round prop', () => {
+ const wrapper = mount(Popup, {
+ propsData: {
+ value: true,
+ round: true
+ }
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/style/var.less b/src/style/var.less
index b2746bfcc..7f3745dbc 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -389,6 +389,7 @@
// Popup
@popup-background-color: @white;
@popup-transition: .3s ease-out;
+@popup-round-border-radius: 12px;
// Progress
@progress-height: 4px;