docs(Popup): update demo (#1926)

example/pages/popup/index.js

@@ -3,44 +3,58 @@ import Page from '../../common/page';
 Page({
   data: {
     show: {
-      middle: false,
+      basic: false,
       top: false,
       bottom: false,
-      right: false,
+      left: false,
-      right2: false
+      right: false
     }
   },
 
-  onTransitionEnd() {
+  toggle(type, show) {
-    console.log(`You can't see me 🌚`);
-  },
-  toggle(type) {
     this.setData({
-      [`show.${type}`]: !this.data.show[type]
+      [`show.${type}`]: show
     });
   },
 
-  togglePopup() {
+  showBasic() {
-    this.toggle('middle');
+    this.toggle('basic', true);
   },
 
-  toggleRightPopup() {
+  hideBasic() {
-    this.toggle('right');
+    this.toggle('basic', false);
   },
 
-  toggleRightPopup2() {
+  showTop() {
-    this.toggle('right2');
+    this.toggle('top', true);
   },
 
-  toggleBottomPopup() {
+  hideTop() {
-    this.toggle('bottom');
+    this.toggle('top', false);
   },
 
-  toggleTopPopup() {
+  showLeft() {
-    this.toggle('top');
+    this.toggle('left', true);
-    setTimeout(() => {
+  },
-      this.toggle('top');
+
-    }, 2000);
+  hideLeft() {
+    this.toggle('left', false);
+  },
+
+  showRight() {
+    this.toggle('right', true);
+  },
+
+  hideRight() {
+    this.toggle('right', false);
+  },
+
+  showBottom() {
+    this.toggle('bottom', true);
+  },
+
+  hideBottom() {
+    this.toggle('bottom', false);
   },
 
   onClickLeft() {

example/pages/popup/index.wxml

@@ -6,65 +6,47 @@
 />
 
 <demo-block title="基础用法" padding>
-  <van-button bind:click="togglePopup">弹出 Popup</van-button>
+  <van-button type="primary" bind:click="showBasic">展示弹出层</van-button>
   <van-popup
-    show="{{ show.middle }}"
+    show="{{ show.basic }}"
-    custom-class="center"
+    custom-style="padding: 30px 50px"
-    transition="none"
+    bind:close="hideBasic"
-    bind:close="togglePopup"
-    bind:transitionEnd="onTransitionEnd"
   >
     内容
   </van-popup>
 </demo-block>
 
 <demo-block title="弹出位置" padding>
-  <van-button bind:click="toggleBottomPopup" class="demo-margin-right">底部弹出</van-button>
+  <view style="margin-bottom: 15px">
+    <van-button type="primary" bind:click="showTop" class="demo-margin-right">顶部弹出</van-button>
+    <van-button type="primary" bind:click="showBottom">底部弹出</van-button>
+  </view>
 
-  <van-popup
+  <van-button type="primary" bind:click="showLeft" class="demo-margin-right">左侧弹出</van-button>
-    show="{{ show.bottom }}"
+  <van-button type="primary" bind:click="showRight">右侧弹出</van-button>
-    position="bottom"
-    custom-class="bottom"
-    bind:close="toggleBottomPopup"
-    bind:transitionEnd="onTransitionEnd"
-  >
-    内容
-  </van-popup>
 
-  <van-button bind:click="toggleTopPopup" class="demo-margin-right">顶部弹出</van-button>
   <van-popup
     show="{{ show.top }}"
     position="top"
-    safe-area-inset-top
+    custom-style="height: 20%"
-    overlay="{{ false }}"
+    bind:close="hideTop"
-    custom-class="top"
+  />
-    bind:close="toggleTopPopup"
+  <van-popup
-    bind:transitionEnd="onTransitionEnd"
+    show="{{ show.bottom }}"
-  >
+    position="bottom"
-    内容
+    custom-style="height: 20%"
-  </van-popup>
+    bind:close="hideBottom"
-
+  />
-  <van-button bind:click="toggleRightPopup">右侧弹出</van-button>
+  <van-popup
+    show="{{ show.left }}"
+    position="left"
+    custom-style="width: 20%; height: 100%"
+    bind:close="hideLeft"
+  />
   <van-popup
     show="{{ show.right }}"
     position="right"
-    safe-area-inset-top
+    custom-style="width: 20%; height: 100%"
-    custom-class="right"
+    bind:close="hideRight"
-    bind:close="toggleRightPopup"
+  />
-    bind:transitionEnd="onTransitionEnd"
-  >
-    <van-button bind:click="toggleRightPopup" class="demo-margin-right">关闭弹层</van-button>
-
-    <van-button bind:click="toggleRightPopup2">右侧弹出</van-button>
-    <van-popup
-      show="{{ show.right2 }}"
-      position="right"
-      safe-area-inset-top
-      custom-class="right"
-      bind:close="toggleRightPopup2"
-      bind:transitionEnd="onTransitionEnd"
-    >
-      <van-button bind:click="toggleRightPopup2">关闭弹层</van-button>
-    </van-popup>
-  </van-popup>
 </demo-block>

example/pages/popup/index.wxss

@@ -1,32 +1,3 @@
 :host {
   font-size: 16px;
 }
-
-.center {
-  width: 60%;
-  padding: 20px;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.top {
-  color: #fff;
-  width: 100%;
-  padding: 20px;
-  border-radius: 0;
-  line-height: 20px;
-  background-color: rgba(0, 0, 0, 0.8)!important;
-}
-
-.bottom {
-  width: 100%;
-  padding: 20px;
-  line-height: 100px;
-  background-color: #fff;
-}
-
-.right {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-}

packages/popup/README.md

@@ -12,9 +12,14 @@
 ## 代码演示
 
 ### 基础用法
-`popup`默认从中间弹出
+
+通过`show`属性控制弹出层是否展示
 
 ```html
+<van-button type="primary" bind:click="showPopup">
+  展示弹出层
+</van-button>
+
 <van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>
 ```
 
@@ -24,6 +29,10 @@ Page({
     show: false
   },
 
+  showPopup() {
+    this.setData({ show: true });
+  },
+
   onClose() {
     this.setData({ show: false });
   }
@@ -31,17 +40,16 @@ Page({
 ```
 
 ### 弹出位置
-通过`position`属性设置 Popup 弹出位置
+
+通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`
 
 ```html
 <van-popup
   show="{{ show }}"
   position="top"
-  overlay="{{ false }}"
+  style="height: '20%'"
   bind:close="onClose"
->
+/>
-  内容
-</van-popup>
 ```
 
 ### Props
@@ -50,12 +58,12 @@ Page({
 |-----------|-----------|-----------|-------------|
 | show | 是否显示弹出层 | *boolean* | `false` |
 | z-index | z-index 层级 | *number* | `100` |
-| overlay | 是否显示背景蒙层 | *boolean* | `true` |
+| overlay | 是否显示遮罩层 | *boolean* | `true` |
-| position | 可选值为 `top` `bottom` `right` `left` | *string* | - |
+| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | *string* | `center` |
 | duration | 动画时长，单位为毫秒 | *number \| object* | `300` |
 | custom-style | 自定义弹出层样式 | *string* | `` |
 | overlay-style | 自定义背景蒙层样式 | *string* | `` |
-| close-on-click-overlay | 点击蒙层是否关闭 Popup | *boolean* | `true` |
+| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
 | safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | *boolean* | `true` |
 | safe-area-inset-top | 是否留出顶部安全距离（状态栏高度 + 导航栏高度） | *boolean* | `false` |