[Doc] Popup: add get-container demo (#3522)

packages/popup/demo/index.vue

@@ -3,81 +3,86 @@
     <demo-block :title="$t('basicUsage')">
       <van-button
         type="primary"
-        @click="show1 = true"
+        @click="showBasic = true"
       >
-        {{ $t('button1') }}
+        {{ $t('buttonBasic') }}
-      </van-button>
-      <van-popup v-model="show1">{{ $t('content') }}</van-popup>
-    </demo-block>
-
-    <demo-block :title="$t('position')">
-      <van-button
-        type="primary"
-        @click="show2 = true"
-      >
-        {{ $t('button2') }}
-      </van-button>
-
-      <van-popup
-        v-model="show2"
-        position="bottom"
-      >
-        <van-picker
-          show-toolbar
-          :columns="$t('columns')"
-          @confirm="show2 = false"
-          @cancel="show2 = false"
-        />
-      </van-popup>
-
-      <van-button
-        type="primary"
-        @click="show3 = true"
-      >
-        {{ $t('button4') }}
       </van-button>
       <van-popup
-        v-model="show3"
+        v-model="showBasic"
-        position="top"
+        :style="{ padding: '30px 50px' }"
-        :overlay="false"
       >
         {{ $t('content') }}
       </van-popup>
+    </demo-block>
+
+    <demo-block :title="$t('position')">
+      <van-row>
+        <van-button
+          type="primary"
+          @click="showTop = true"
+        >
+          {{ $t('buttonTop') }}
+        </van-button>
+
+        <van-popup
+          v-model="showTop"
+          position="top"
+          :style="{ height: '20%' }"
+        />
+
+        <van-button
+          type="primary"
+          @click="showBottom = true"
+        >
+          {{ $t('buttonBottom') }}
+        </van-button>
+
+        <van-popup
+          v-model="showBottom"
+          position="bottom"
+          :style="{ height: '20%' }"
+        />
+      </van-row>
 
       <van-button
         type="primary"
-        @click="show4 = true"
+        @click="showLeft = true"
       >
-        {{ $t('button5') }}
+        {{ $t('buttonLeft') }}
+      </van-button>
+
+      <van-popup
+        v-model="showLeft"
+        position="left"
+        :style="{ width: '20%', height: '100%' }"
+      />
+
+      <van-button
+        type="primary"
+        @click="showRight = true"
+      >
+        {{ $t('buttonRight') }}
+      </van-button>
+
+      <van-popup
+        v-model="showRight"
+        position="right"
+        :style="{ width: '20%', height: '100%' }"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('getContainer')">
+      <van-button
+        type="primary"
+        @click="showGetContainer = true"
+      >
+        {{ $t('getContainer') }}
       </van-button>
       <van-popup
-        v-model="show4"
+        v-model="showGetContainer"
-        position="right"
+        get-container="body"
-      >
+        :style="{ padding: '30px 50px' }"
-        <van-button
+      />
-          type="primary"
-          @click="show4 = false"
-        >
-          {{ $t('button6') }}
-        </van-button>
-        <van-button
-          type="primary"
-          @click="show5 = true"
-        >
-          {{ $t('button5') }}
-        </van-button>
-        <van-popup
-          v-model="show5"
-          position="right"
-        >
-          <van-button
-            type="primary"
-            @click="show5 = false"
-          >
-            {{ $t('button6') }}
-          </van-button>
-        </van-popup>
-      </van-popup>
     </demo-block>
   </demo-section>
 </template>
@@ -87,44 +92,33 @@ export default {
   i18n: {
     'zh-CN': {
       position: '弹出位置',
-      button1: '弹出 Popup',
+      buttonBasic: '展示弹出层',
-      button2: '底部弹出',
+      buttonTop: '顶部弹出',
-      button3: '弹出 Dialog',
+      buttonBottom: '底部弹出',
-      button4: '顶部弹出',
+      buttonLeft: '左侧弹出',
-      button5: '右侧弹出',
+      buttonRight: '右侧弹出',
-      button6: '关闭弹层',
+      getContainer: '指定挂载节点'
-      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
     },
     'en-US': {
       position: 'Position',
-      button1: 'Show Popup',
+      buttonBasic: 'Show Popup',
-      button2: 'From Bottom',
+      buttonTop: 'From Top',
-      button3: 'Show Dialog',
+      buttonBottom: 'From Bottom',
-      button4: 'From Top',
+      buttonLeft: 'From Left',
-      button5: 'From Right',
+      buttonRight: 'From Right',
-      button6: 'Close Popup',
+      getContainer: 'Get Container'
-      columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
     }
   },
 
   data() {
     return {
-      show1: false,
+      showBasic: false,
-      show2: false,
+      showTop: false,
-      show3: false,
+      showBottom: false,
-      show4: false,
+      showLeft: false,
-      show5: false
+      showRight: false,
+      showGetContainer: false
     };
-  },
-
-  watch: {
-    show3(val) {
-      if (val) {
-        setTimeout(() => {
-          this.show3 = false;
-        }, 2000);
-      }
-    }
   }
 };
 </script>
@@ -133,35 +127,12 @@ export default {
 @import '../../style/var';
 
 .demo-popup {
+  .van-row {
+    margin-bottom: 15px;
+  }
+
   .van-button {
     margin-left: 15px;
   }
-
-  .van-popup {
-    box-sizing: border-box;
-    padding: 20px;
-
-    &--center {
-      width: 60%;
-    }
-
-    &--bottom {
-      width: 100%;
-      padding: 0;
-    }
-
-    &--top {
-      width: 100%;
-      color: @white;
-      line-height: 20px;
-      background-color: rgba(0, 0, 0, 0.8);
-    }
-
-    &--left,
-    &--right {
-      width: 100%;
-      height: 100%;
-    }
-  }
 }
 </style>

packages/popup/en-US.md

@@ -12,9 +12,11 @@ Vue.use(Popup);
 
 ### Basic Usage
 
-Popup is located in the middle of the screen by default
-
 ```html
+<van-botton type="primary" @click="showPopup">
+  Show Popup
+</van-button>
+
 <van-popup v-model="show">Content</van-popup>
 ```
 
@@ -24,6 +26,12 @@ export default {
     return {
       show: false
     }
+  },
+
+  methods: {
+    showPopup() {
+      this.show = true;
+    }
   }
 };
 ```
@@ -33,9 +41,45 @@ export default {
 Use `position` prop to set popup display position
 
 ```html
-<van-popup v-model="show" position="top" :overlay="false">
+<van-popup
-  Content
+  v-model="show"
-</van-popup>
+  position="top"
+  :style="{ height: '20%' }"
+/>
+```
+
+### Get Container
+
+Use `get-container` prop to specify mount location
+
+```html
+<!-- mount to body -->
+<van-popup
+  v-model="show"
+  get-container="body"
+/>
+
+<!-- mount to #app -->
+<van-popup
+  v-model="show"
+  get-container="#app"
+/>
+
+<!-- Specify the mount location by function -->
+<van-popup
+  v-model="show"
+  :get-container="getContainer"
+/>
+```
+
+```js
+export default {
+  methods: {
+    getContainer() {
+      return document.querySelector('.my-container');
+    }
+  }
+}
 ```
 
 ## API

packages/popup/test/__snapshots__/demo.spec.js.snap

@@ -3,20 +3,28 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      弹出 Popup
+      展示弹出层
     </span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+  <div>
-      底部弹出
+    <div class="van-row"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-    </span></button>
+        顶部弹出
-    <!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      </span></button>
-      顶部弹出
+      <!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+        底部弹出
+      </span></button>
+      <!---->
+    </div> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      左侧弹出
     </span></button>
     <!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       右侧弹出
     </span></button>
     <!---->
   </div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      指定挂载节点
+    </span></button> </div>
 </div>
 `;

packages/popup/zh-CN.md

@@ -1,5 +1,9 @@
 # Popup 弹出层
 
+### 介绍
+
+弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示
+
 ### 引入
 
 ``` javascript
@@ -12,9 +16,13 @@ Vue.use(Popup);
 
 ### 基础用法
 
-`Popup`默认从中间弹出
+通过`v-model`控制弹出层是否展示
 
 ```html
+<van-botton type="primary" @click="showPopup">
+  展示弹出层
+</van-button>
+
 <van-popup v-model="show">内容</van-popup>
 ```
 
@@ -24,18 +32,61 @@ export default {
     return {
       show: false
     }
+  },
+
+  methods: {
+    showPopup() {
+      this.show = true;
+    }
   }
 };
 ```
 
 ### 弹出位置
 
-通过`position`属性设置`Popup`弹出位置
+通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`
 
 ```html
-<van-popup v-model="show" position="top" :overlay="false">
+<van-popup
-  内容
+  v-model="show"
-</van-popup>
+  position="top"
+  :style="{ height: '20%' }"
+/>
+```
+
+### 指定挂载位置
+
+弹出层默认挂载到组件所在位置，可以通过`get-container`属性指定挂载位置
+
+```html
+<!-- 挂载到 body 节点下 -->
+<van-popup
+  v-model="show"
+  get-container="body"
+/>
+
+<!-- 挂载到 #app 节点下 -->
+<van-popup
+  v-model="show"
+  get-container="#app"
+/>
+
+<!-- 通过函数指定挂载位置 -->
+<van-popup
+  v-model="show"
+  :get-container="getContainer"
+/>
+```
+
+```js
+export default {
+  methods: {
+    // 返回一个特定的 DOM 节点，作为挂载的父节点
+    getContainer() {
+      return document.querySelector('.my-container');
+    }
+  }
+}
 ```
 
 ## API