[Improvement] Popup: get-container support selector (#1699)

packages/actionsheet/en-US.md

@@ -84,7 +84,7 @@ Actionsheet will get another style if there is a `title` prop.
 | overlay | Whether to show overlay | `Boolean` | `true` |
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
 | lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
-| get-container | Return the mount node for actionsheet | `() => HTMLElement` | - |
+| get-container | Return the mount node for actionsheet | `String | () => HTMLElement` | - |
 
 ### Event
 

packages/actionsheet/zh-CN.md

@@ -88,7 +88,7 @@ export default {
 | overlay | 是否显示遮罩层 | `Boolean` | `true` |
 | close-on-click-overlay | 点击遮罩是否关闭菜单 | `Boolean` | `true` |
 | lazy-render | 是否在首次显示弹层时才渲染 DOM 节点 | `Boolean` | `true` |
-| get-container | 指定挂载的 HTML 节点 | `() => HTMLElement` | - |
+| get-container | 指定挂载的节点，可以传入 CSS 选择器，<br>或一个返回 DOM 节点的函数 | `String | () => HTMLElement` | - |
 
 ### Event
 

packages/dialog/en-US.md

@@ -141,7 +141,7 @@ export default {
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `false` |
 | lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
 | before-close | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: function) => void | - |
-| get-container | Return the mount node for Dialog | `() => HTMLElement` | - |
+| get-container | Return the mount node for Dialog | `String | () => HTMLElement` | - |
 
 ### Event
 

packages/dialog/zh-CN.md

@@ -144,7 +144,7 @@ export default {
 | close-on-click-overlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` |
 | lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` |
 | before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 可以阻止弹窗关闭 | (action: string, done: function) => void | - |
-| get-container | 指定弹窗挂载的 HTML 节点 | `() => HTMLElement` | - |
+| get-container | 指定挂载的节点，可以传入 CSS 选择器，<br>或一个返回 DOM 节点的函数 | `String | () => HTMLElement` | - |
 
 ### Event
 

packages/mixins/popup/index.js

@@ -21,7 +21,7 @@ export default {
     // z-index
     zIndex: [String, Number],
     // return the mount node for popup
-    getContainer: Function,
+    getContainer: [String, Function],
     // prevent body scroll
     lockScroll: {
       type: Boolean,
@@ -139,10 +139,20 @@ export default {
     },
 
     move() {
-      if (this.getContainer) {
+      let container;
-        this.getContainer().appendChild(this.$el);
+
+      const { getContainer } = this;
+      if (getContainer) {
+        container =
+          typeof getContainer === 'string'
+            ? document.querySelector(getContainer)
+            : getContainer();
       } else if (this.$parent) {
-        this.$parent.$el.appendChild(this.$el);
+        container = this.$parent.$el;
+      }
+
+      if (container) {
+        container.appendChild(this.$el);
       }
     },
 

packages/popup/en-US.md

@@ -48,7 +48,7 @@ Use `position` prop to set popup display position
 | transition | Transition | `String` | `popup-slide` |
 | lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
 | lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
-| get-container | Return the mount node for Popup | `() => HTMLElement` | - |
+| get-container | Return the mount node for Popup | `String | () => HTMLElement` | - |
 
 ### Event
 

packages/popup/test/index.spec.js

@@ -76,6 +76,26 @@ test('get container with parent', () => {
   expect(popup.parentNode).toEqual(wrapper.element);
 });
 
+test('get container with selector', () => {
+  wrapper = mount({
+    template: `
+      <div>
+        <popup class="get-container-selector-1" :value="true" get-container="body"></popup>
+        <popup class="get-container-selector-2" :value="true" get-container="unknown"></popup>
+      </div>
+    `,
+    components: {
+      Popup
+    }
+  });
+
+  const dom1 = document.querySelector('.get-container-selector-1');
+  const dom2 = wrapper.vm.$el.querySelector('.get-container-selector-2');
+
+  expect(dom1.parentNode).toEqual(document.body);
+  expect(dom2.parentNode).toEqual(wrapper.vm.$el);
+});
+
 test('render overlay', () => {
   const div = document.createElement('div');
   wrapper = mount({

packages/popup/zh-CN.md

@@ -48,7 +48,7 @@ export default {
 | close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` |
 | transition | transition 名称 | `String` | `popup-slide` |
 | lazy-render | 是否在首次显示弹层时才渲染 DOM 节点 | `Boolean` | `true` |
-| get-container | 指定弹出层挂载的 HTML 节点 | `() => HTMLElement` | - |
+| get-container | 指定挂载的节点，可以传入 CSS 选择器，<br>或一个返回 DOM 节点的函数 | `String | () => HTMLElement` | - |
 
 ### Event
 

packages/sku/en-US.md

@@ -100,7 +100,7 @@ Vue.use(Sku);
 | stepper-title | Quantity title | `String` | `Quantity` |
 | custom-stepper-config | Custom stepper related config | `Object` | `{}` |
 | message-config | Message related config | `Object` | `{}` |
-| get-container | Return the mount node for sku | `() => HTMLElement` | - |
+| get-container | Return the mount node for sku | `String | () => HTMLElement` | - |
 
 ### Event
 

packages/sku/zh-CN.md

@@ -101,7 +101,7 @@ Vue.use(Sku);
 | stepper-title | 数量选择组件左侧文案 | `String` | `购买数量` |
 | custom-stepper-config | 步进器相关自定义配置 | `Object` | `{}` |
 | message-config | 留言相关配置 | `Object` | `{}` |
-| get-container | 指定挂载的 HTML 节点 | `() => HTMLElement` | - |
+| get-container | 指定挂载的节点，可以传入 CSS 选择器，<br>或一个返回 DOM 节点的函数 | `String | () => HTMLElement` | - |
 
 ### Event
 

packages/vant-css/src/dialog.css

@@ -7,7 +7,7 @@
   width: 85%;
   font-size: 16px;
   overflow: hidden;
-  transition: .2s;
+  transition: .3s;
   border-radius: 4px;
   background-color: $white;
   transform: translate3d(-50%, -50%, 0);