diff --git a/example/pages/popup/index.js b/example/pages/popup/index.js
index 3094c023..664139bd 100644
--- a/example/pages/popup/index.js
+++ b/example/pages/popup/index.js
@@ -1,40 +1,40 @@
Page({
-
data: {
- showPopup: false,
- showLeftPopup: false,
- showRightPopup: false,
- showTopPopup: false,
- showBottomPopup: false
+ show: {
+ middle: false,
+ top: false,
+ bottom: false,
+ right: false,
+ right2: false
+ }
+ },
+
+ toggle(type) {
+ this.setData({
+ [`show.${type}`]: !this.data.show[type]
+ });
},
togglePopup() {
- this.setData({
- showPopup: !this.data.showPopup
- });
- },
-
- toggleLeftPopup() {
- this.setData({
- showLeftPopup: !this.data.showLeftPopup
- });
+ this.toggle('middle');
},
toggleRightPopup() {
- this.setData({
- showRightPopup: !this.data.showRightPopup
- });
+ this.toggle('right');
+ },
+
+ toggleRightPopup2() {
+ this.toggle('right2');
},
toggleBottomPopup() {
- this.setData({
- showBottomPopup: !this.data.showBottomPopup
- });
+ this.toggle('bottom');
},
toggleTopPopup() {
- this.setData({
- showTopPopup: !this.data.showTopPopup
- });
+ this.toggle('top');
+ setTimeout(() => {
+ this.toggle('top');
+ }, 2000);
}
});
diff --git a/example/pages/popup/index.json b/example/pages/popup/index.json
index b1f3aa4c..057f0097 100644
--- a/example/pages/popup/index.json
+++ b/example/pages/popup/index.json
@@ -1,8 +1,8 @@
{
"navigationBarTitleText": "Popup 弹出层",
"usingComponents": {
+ "demo-block": "../../components/demo-block/index",
"van-popup": "../../dist/popup/index",
"van-button": "../../dist/button/index"
}
}
-
diff --git a/example/pages/popup/index.wxml b/example/pages/popup/index.wxml
index 7f057b42..fc5812d9 100644
--- a/example/pages/popup/index.wxml
+++ b/example/pages/popup/index.wxml
@@ -1,84 +1,54 @@
-
- 弹出popup
-
-
- 从顶部弹出popup
-
-
- 从底部弹出popup
-
-
- 从左边弹出popup
-
-
- 从右边弹出popup
-
+
+ 弹出 Popup
+
+ 内容
+
+
-
-
-
-
-
-
-
-
+
+ 底部弹出
-
-
-
-
-
-
-
-
+
+ 内容
+
-
-
-
-
-
-
-
-
+ 顶部弹出
+
+ 内容
+
-
-
- 内容
-
+ 右侧弹出
+
+ 关闭弹层
-
-
-
-
-
-
-
-
+ 右侧弹出
+
+ 关闭弹层
+
+
+
diff --git a/example/pages/popup/index.wxss b/example/pages/popup/index.wxss
index 06ec830f..cb419fa3 100644
--- a/example/pages/popup/index.wxss
+++ b/example/pages/popup/index.wxss
@@ -1,21 +1,32 @@
-.pop-example--top {
- width: 100vw;
- padding: 15px;
- background: rgba(0, 0, 0, 0.7);
- color: #fff;
- font-size: 12px;
+:host {
+ font-size: 16px;
+}
+
+.center {
+ width: 60%;
+ padding: 20px;
text-align: center;
+ box-sizing: border-box;
}
-.pop-example__container {
- overflow: hidden;
- background: #fff;
+.top {
+ color: #fff;
+ width: 100%;
+ padding: 20px;
+ border-radius: 0;
+ line-height: 20px;
+ background-color: rgba(0, 0, 0, 0.8)!important;
}
-.pop-example__container--bottom {
- width: 100vw;
+.bottom {
+ width: 100%;
+ padding: 20px;
+ line-height: 100px;
+ background-color: #fff;
}
-.pop-example__container--left, .pop-example__container--right {
- height: 100vh;
+.right {
+ width: 100%;
+ height: 100%;
+ padding: 20px;
}
diff --git a/packages/popup/README.md b/packages/popup/README.md
index 296614c3..452abfcd 100644
--- a/packages/popup/README.md
+++ b/packages/popup/README.md
@@ -3,62 +3,65 @@
### 使用指南
在 index.json 中引入组件
```json
-{
- "usingComponents": {
- "van-popup": "path/to/vant-weapp/dist/popup/index"
- }
+"usingComponents": {
+ "van-popup": "path/to/vant-weapp/dist/popup/index"
}
```
-
### 代码演示
-可以在页面任意位置上使用 van-popup 标签。通过 show 可以控制弹窗是否展示
-```html
-
-```
-#### popup 动画
-popup 额外支持了 上下左右 四种动画方式，通过增加 type 属性即可控制。使用方式如下
-```html
-
-
-
-
-
-
-
-
-
-
-```
-
-#### 控制显示，隐藏
+#### 基础用法
+`popup`默认从中间弹出
```html
-
+内容
```
-```js
-data: {
- isShow: false
-},
-togglePopup() {
- this.setData({
- isShow: !this.data.isShow
- });
-}
+```javascript
+Page({
+ data: {
+ show: false
+ },
+
+ onClose() {
+ this.setData({ show: false });
+ }
+});
```
-### 具体参数和事件
-#### 参数说明
-| 参数 | 说明 | 类型 | 默认值 | 必须 |
-|-----------|-----------|-----------|-------------|-------------|
-| show | 是否显示弹出层 | Boolean | false | |
-| overlay | 是否显示遮罩层 | Boolean | true | |
-| closeOnClickOverlay | 遮罩层点击时，是否触发关闭事件 | Boolean | true | |
-| type | 弹出层动画方式, 可选`center`, `left`, `right`, `top`, `bottom` | String | center | |
+#### 弹出位置
+通过`position`属性设置 Popup 弹出位置
-#### 事件说明
-| 事件名 | 说明 | 参数 |
+```html
+
+ 内容
+
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| show | 当前组件是否显示 | `Boolean` | `false` |
+| overlay | 是否显示背景蒙层 | `Boolean` | `true` |
+| position | 可选值为 `top` `bottom` `right` `left` | `String` | - |
+| overlay-style | 自定义蒙层样式 | `Object` | `` |
+| close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
-| click-overlay | 遮罩层点击触发 | |
-| close | 遮罩层关闭时触发 | |
+| click-overlay | 点击蒙层时触发 | - |
+| close | 蒙层关闭时触发 | - |
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+| overlay-class | 蒙层样式类 |
diff --git a/packages/popup/index.js b/packages/popup/index.js
index 71bb69f4..9001d6d3 100644
--- a/packages/popup/index.js
+++ b/packages/popup/index.js
@@ -1,35 +1,33 @@
Component({
- properties: {
- show: {
- type: Boolean,
- value: false
- },
+ externalClasses: [
+ 'custom-class',
+ 'overlay-class'
+ ],
+ properties: {
+ show: Boolean,
+ overlayStyle: String,
overlay: {
type: Boolean,
value: true
},
-
closeOnClickOverlay: {
type: Boolean,
value: true
},
-
- // 弹出方向
- type: {
+ position: {
type: String,
value: 'center'
}
},
methods: {
- handleMaskClick() {
- this.triggerEvent('click-overlay', {});
+ onClickOverlay() {
+ this.triggerEvent('click-overlay');
- if (!this.data.closeOnClickOverlay) {
- return;
+ if (this.data.closeOnClickOverlay) {
+ this.triggerEvent('close');
}
- this.triggerEvent('close', {});
}
}
});
diff --git a/packages/popup/index.json b/packages/popup/index.json
index 58663aee..467ce294 100644
--- a/packages/popup/index.json
+++ b/packages/popup/index.json
@@ -1,6 +1,3 @@
{
- "component": true,
- "usingComponents": {
- "pop-manager": "../common/pop-manager/index"
- }
+ "component": true
}
diff --git a/packages/popup/index.pcss b/packages/popup/index.pcss
new file mode 100644
index 00000000..0c18b8a8
--- /dev/null
+++ b/packages/popup/index.pcss
@@ -0,0 +1,95 @@
+@import '../common/index.pcss';
+
+.van-popup {
+ top: 50%;
+ left: 50%;
+ z-index: 11;
+ max-height: 100%;
+ overflow-y: auto;
+ box-sizing: border-box;
+ background-color: $white;
+ -webkit-overflow-scrolling: touch;
+ transform: translate3d(-50%, -50%, 0);
+
+ &,
+ &__overlay {
+ display: none;
+ position: fixed;
+ animation: van-fade-in .3s ease;
+ }
+
+ &__overlay {
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 10;
+ background-color: rgba(0, 0, 0, 0.7);
+ }
+
+ &--top {
+ width: 100%;
+ top: 0;
+ right: auto;
+ bottom: auto;
+ left: 50%;
+ transform: translate3d(-50%, 0, 0);
+ animation-name: van-popup-top;
+ }
+
+ &--right {
+ top: 50%;
+ right: 0;
+ bottom: auto;
+ left: auto;
+ transform: translate3d(0, -50%, 0);
+ animation-name: van-popup-right;
+ }
+
+ &--bottom {
+ width: 100%;
+ top: auto;
+ bottom: 0;
+ right: auto;
+ left: 50%;
+ transform: translate3d(-50%, 0, 0);
+ animation-name: van-popup-bottom;
+ }
+
+ &--left {
+ top: 50%;
+ right: auto;
+ bottom: auto;
+ left: 0;
+ transform: translate3d(0, -50%, 0);
+ animation-name: van-popup-left;
+ }
+
+ &--show {
+ display: block;
+ }
+}
+
+@keyframes van-popup-top {
+ from {
+ transform: translate3d(-50%, -100%, 0);
+ }
+}
+
+@keyframes van-popup-bottom {
+ from {
+ transform: translate3d(-50%, 100%, 0);
+ }
+}
+
+@keyframes van-popup-left {
+ from {
+ transform: translate3d(-100%, -50%, 0);
+ }
+}
+
+@keyframes van-popup-right {
+ from {
+ transform: translate3d(100%, -50%, 0);
+ }
+}
\ No newline at end of file
diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml
index 6451fc6f..daf74aa9 100644
--- a/packages/popup/index.wxml
+++ b/packages/popup/index.wxml
@@ -1,8 +1,9 @@
-
-
-
+
+