From 008125110c628f9a04bb07c953da31afee0f7e81 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 29 Aug 2019 11:43:12 +0800
Subject: [PATCH] feat(Popup): add round prop (#1928)
---
docs/markdown/changelog.md | 6 ++++++
example/pages/popup/index.js | 11 ++++++++---
example/pages/popup/index.json | 3 +--
example/pages/popup/index.wxml | 18 +++++++++++-------
packages/common/style/var.less | 3 +++
packages/popup/README.md | 25 ++++++++++++++++++++-----
packages/popup/index.less | 31 ++++++++++++++++++++-----------
packages/popup/index.ts | 5 +++--
packages/popup/index.wxml | 5 ++---
9 files changed, 74 insertions(+), 33 deletions(-)
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 @@
-<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>
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({
<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: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 @@
/>
<view
wx:if="{{ inited }}"
- class="custom-class {{ classes }} {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom }]) }}"
- style="z-index: {{ zIndex }}; -webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }} {{ customStyle }}"
+ 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;' }} {{ 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>