diff --git a/packages/actionsheet/en-US.md b/packages/actionsheet/en-US.md index c64cce786..fc15c721e 100644 --- a/packages/actionsheet/en-US.md +++ b/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 diff --git a/packages/actionsheet/zh-CN.md b/packages/actionsheet/zh-CN.md index d5cf75212..c711704b3 100644 --- a/packages/actionsheet/zh-CN.md +++ b/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 选择器，
或一个返回 DOM 节点的函数 | `String | () => HTMLElement` | - | ### Event diff --git a/packages/dialog/en-US.md b/packages/dialog/en-US.md index 5077f61c4..c6ad806ad 100644 --- a/packages/dialog/en-US.md +++ b/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,
call done() to close dialog,
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 diff --git a/packages/dialog/zh-CN.md b/packages/dialog/zh-CN.md index 54ee13df6..4e8759c18 100644 --- a/packages/dialog/zh-CN.md +++ b/packages/dialog/zh-CN.md @@ -144,7 +144,7 @@ export default { | close-on-click-overlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | | lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | | before-close | 关闭前的回调函数，
调用 done() 后关闭弹窗，
调用 done(false) 可以阻止弹窗关闭 | (action: string, done: function) => void | - | -| get-container | 指定弹窗挂载的 HTML 节点 | `() => HTMLElement` | - | +| get-container | 指定挂载的节点，可以传入 CSS 选择器，
或一个返回 DOM 节点的函数 | `String | () => HTMLElement` | - | ### Event diff --git a/packages/mixins/popup/index.js b/packages/mixins/popup/index.js index cdd21e806..63b232942 100644 --- a/packages/mixins/popup/index.js +++ b/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) { - this.getContainer().appendChild(this.$el); + let container; + + 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); } }, diff --git a/packages/popup/en-US.md b/packages/popup/en-US.md index 29265a2cf..fa99f215c 100644 --- a/packages/popup/en-US.md +++ b/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 diff --git a/packages/popup/test/index.spec.js b/packages/popup/test/index.spec.js index 405e61dc1..82539fa5f 100644 --- a/packages/popup/test/index.spec.js +++ b/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: ` +
+ + +
+ `, + 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({ diff --git a/packages/popup/zh-CN.md b/packages/popup/zh-CN.md index 8b87ba822..8986b2bd2 100644 --- a/packages/popup/zh-CN.md +++ b/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 选择器，
或一个返回 DOM 节点的函数 | `String | () => HTMLElement` | - | ### Event diff --git a/packages/sku/en-US.md b/packages/sku/en-US.md index 71d8dd0d2..0754df93e 100644 --- a/packages/sku/en-US.md +++ b/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 diff --git a/packages/sku/zh-CN.md b/packages/sku/zh-CN.md index 0a32828d2..80bf81f19 100644 --- a/packages/sku/zh-CN.md +++ b/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 选择器，
或一个返回 DOM 节点的函数 | `String | () => HTMLElement` | - | ### Event diff --git a/packages/vant-css/src/dialog.css b/packages/vant-css/src/dialog.css index ff127553e..60c49aa11 100644 --- a/packages/vant-css/src/dialog.css +++ b/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);