diff --git a/docs/markdown/migrate-from-v2.zh-CN.md b/docs/markdown/migrate-from-v2.zh-CN.md index c8daa6b62..4c2b1fa21 100644 --- a/docs/markdown/migrate-from-v2.zh-CN.md +++ b/docs/markdown/migrate-from-v2.zh-CN.md @@ -7,13 +7,13 @@ GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。 ```html - + - + @@ -25,10 +25,10 @@ GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。 移除 SwitchCell 组件，可以直接使用 Cell 和 Switch 组件代替。 ```html - + - + diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue index c2f311c48..7d0d0cbcc 100644 --- a/src/form/demo/FieldTypeDatetimePicker.vue +++ b/src/form/demo/FieldTypeDatetimePicker.vue @@ -13,7 +13,7 @@ v-model:show="showPicker" round position="bottom" - get-container="body" + teleport="body" > Element_ | - | +| teleport | Return the mount node for ImagePreview | _string \| Element_ | - | ### Props @@ -150,7 +150,7 @@ export default { | closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` | | close-icon `v2.5.0` | Close icon name | _string_ | `clear` | | close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | -| get-container | Return the mount node for ImagePreview | _string \| () => Element_ | - | +| teleport | Return the mount node for ImagePreview | _string \| Element_ | - | ### Events diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index 972e9128d..0aedb9e6c 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -166,7 +166,7 @@ export default { | closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` | | closeIcon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` | | closeIconPosition `v2.5.0` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | -| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | +| teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - | ### Props @@ -188,7 +188,7 @@ export default { | closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` | | close-icon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` | | close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | -| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | +| teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - | ### Events diff --git a/src/image-preview/index.js b/src/image-preview/index.js index 1e268e031..1b8f9b3ce 100644 --- a/src/image-preview/index.js +++ b/src/image-preview/index.js @@ -12,12 +12,12 @@ const defaultConfig = { onScale: null, onClose: null, onChange: null, + teleport: 'body', className: '', showIndex: true, closeable: false, closeIcon: 'clear', asyncClose: false, - getContainer: 'body', startPosition: 0, swipeDuration: 500, showIndicators: false, diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js index 198afab04..7b68455c0 100644 --- a/src/image-preview/test/index.spec.js +++ b/src/image-preview/test/index.spec.js @@ -336,7 +336,7 @@ test('ImagePreview.Component', () => { test('get container with function call ', async (done) => { const element = document.createElement('div'); document.body.appendChild(element); - ImagePreview({ images, getContainer: () => element }); + ImagePreview({ images, teleport: element }); await Vue.nextTick(); const wrapperDiv = document.querySelector('.van-image-preview'); @@ -358,22 +358,22 @@ test('get container with component call', () => { const wrapper = mount({ template: `
- +
`, data() { return { - getContainer: () => div1, + teleport: () => div1, }; }, }); const imageView = wrapper.find('.van-image-preview').element; expect(imageView.parentNode).toEqual(div1); - wrapper.vm.getContainer = () => div2; + wrapper.vm.teleport = () => div2; expect(imageView.parentNode).toEqual(div2); - wrapper.vm.getContainer = null; + wrapper.vm.teleport = null; expect(wrapper.element).toEqual(wrapper.element); }); diff --git a/src/mixins/portal.js b/src/mixins/portal.js index ec3e65f26..4d05b786f 100644 --- a/src/mixins/portal.js +++ b/src/mixins/portal.js @@ -1,35 +1,35 @@ -function getElement(selector) { - if (typeof selector === 'string') { - return document.querySelector(selector); +function getElement(teleport) { + if (typeof teleport === 'string') { + return document.querySelector(teleport); } - return selector(); + return teleport; } export function PortalMixin({ ref, afterPortal } = {}) { return { props: { - getContainer: [String, Function], + teleport: [String, Object], }, watch: { - getContainer: 'portal', + teleport: 'portal', }, mounted() { - if (this.getContainer) { + if (this.teleport) { this.portal(); } }, methods: { portal() { - const { getContainer } = this; + const { teleport } = this; const el = ref ? this.$refs[ref] : this.$el; let container; - if (getContainer) { - container = getElement(getContainer); + if (teleport) { + container = getElement(teleport); } else if (this.$parent) { container = this.$parent.$el; } diff --git a/src/notify/Notify.js b/src/notify/Notify.js index 13c63ecb1..01d3dc32a 100644 --- a/src/notify/Notify.js +++ b/src/notify/Notify.js @@ -9,9 +9,9 @@ export default createComponent({ color: String, message: [Number, String], duration: [Number, String], + teleport: [String, Object], className: null, background: String, - getContainer: [String, Function], type: { type: String, default: 'danger', diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index 7da413df3..3af614174 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -156,7 +156,7 @@ export default { | close-button-loading `v2.7.0` | Whether to show loading close button in custom theme | _boolean_ | `false` | | show-delete-key `v2.5.9` | Whether to show delete button | _boolean_ | `true` | | hide-on-click-outside | Whether to hide keyboard when click outside | _boolean_ | `true` | -| get-container `v2.10.0` | Return the mount node for NumberKeyboard | _string \| () => Element_ | - | +| teleport `v2.10.0` | Return the mount node for NumberKeyboard | _string \| Element_ | - | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | ### Events diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index c1cf4bef0..0bccdd353 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -169,7 +169,7 @@ export default { | close-button-loading `v2.7.0` | 是否将关闭按钮设置为加载中状态，仅在 `theme="custom"` 时有效 | _boolean_ | `false` | | show-delete-key `v2.5.9` | 是否展示删除图标 | _boolean_ | `true` | | hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` | -| get-container `v2.10.0` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | +| teleport `v2.10.0` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | ### Events diff --git a/src/popup/README.md b/src/popup/README.md index f882c2d07..f244f14e5 100644 --- a/src/popup/README.md +++ b/src/popup/README.md @@ -83,30 +83,28 @@ Use `position` prop to set popup display position ### Get Container -Use `get-container` prop to specify mount location +Use `teleport` prop to specify mount location ```html - + - + - - + + ``` ```js export default { - methods: { - getContainer() { - return document.querySelector('.my-container'); - }, + beforeCreate() { + this.myContainer = document.querySelector('.my-container'); }, }; ``` -> Tips: The get-container prop cannot be used on the root node +> Tips: The teleport prop cannot be used on the root node ## API @@ -129,7 +127,7 @@ export default { | close-icon `v2.2.0` | Close icon name | _string_ | `cross` | | close-icon-position `v2.2.2` | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | | transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - | -| get-container | Return the mount node for Popup | _string \| () => Element_ | - | +| teleport | Return the mount node for Popup | _string \| Element_ | - | | safe-area-inset-bottom `v2.2.1` | Whether to enable bottom safe area adaptation | _boolean_ | `false` | ### Events diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index 2eea09eb1..d87252f10 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -93,31 +93,28 @@ export default { ### 指定挂载位置 -弹出层默认挂载到组件所在位置，可以通过`get-container`属性指定挂载位置 +弹出层默认挂载到组件所在位置，可以通过`teleport`属性指定挂载位置 ```html - + - + - - + + ``` ```js export default { - methods: { - // 返回一个特定的 DOM 节点，作为挂载的父节点 - getContainer() { - return document.querySelector('.my-container'); - }, + beforeCreate() { + this.myContainer = document.querySelector('.my-container'); }, }; ``` -> 注意：使用 get-container 属性的组件不能为根节点 +> 注意：使用 teleport 属性的组件不能为根节点 ## API @@ -140,7 +137,7 @@ export default { | close-icon `v2.2.0` | 关闭图标名称或图片链接 | _string_ | `cross` | | close-icon-position `v2.2.2` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | | transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - | -| get-container | 指定挂载的节点 | _string \| () => Element_ | - | +| teleport | 指定挂载的节点 | _string \| Element_ | - | | safe-area-inset-bottom `v2.2.1` | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` | ### Events diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue index c3260d820..3eb7a8c25 100644 --- a/src/popup/demo/index.vue +++ b/src/popup/demo/index.vue @@ -84,15 +84,15 @@ /> - + @@ -109,7 +109,7 @@ export default { buttonBottom: '底部弹出', buttonLeft: '左侧弹出', buttonRight: '右侧弹出', - getContainer: '指定挂载节点', + teleport: '指定挂载节点', roundCorner: '圆角弹窗', closeIcon: '关闭图标', customCloseIcon: '自定义图标', @@ -122,7 +122,7 @@ export default { buttonBottom: 'From Bottom', buttonLeft: 'From Left', buttonRight: 'From Right', - getContainer: 'Get Container', + teleport: 'Get Container', roundCorner: 'Round Corner', closeIcon: 'Close Icon', customCloseIcon: 'Custom Icon', diff --git a/src/popup/index.js b/src/popup/index.js index f97650511..6ae410e67 100644 --- a/src/popup/index.js +++ b/src/popup/index.js @@ -33,7 +33,7 @@ export const popupSharedProps = { // overlay custom class name overlayClass: String, // teleport - getContainer: [String, Function], + teleport: [String, Object], // whether to close popup when click overlay closeOnClickOverlay: Boolean, // z-index @@ -319,9 +319,9 @@ export default createComponent({ }, render() { - const { getContainer } = this; - if (getContainer) { - const to = isFunction(getContainer) ? getContainer() : getContainer; + const { teleport } = this; + if (teleport) { + const to = isFunction(teleport) ? teleport() : teleport; return ( {this.genOverlay()} diff --git a/src/popup/test/index.spec.js b/src/popup/test/index.spec.js index f570087a7..2aa3d27e5 100644 --- a/src/popup/test/index.spec.js +++ b/src/popup/test/index.spec.js @@ -53,7 +53,7 @@ test('get container with parent', () => { wrapper = mount({ template: `
- +
`, components: { @@ -61,16 +61,16 @@ test('get container with parent', () => { }, data() { return { - getContainer: () => div1, + teleport: div1, }; }, }); const popup = wrapper.find('.van-popup').element; expect(popup.parentNode).toEqual(div1); - wrapper.vm.getContainer = () => div2; + wrapper.vm.teleport = () => div2; expect(popup.parentNode).toEqual(div2); - wrapper.vm.getContainer = null; + wrapper.vm.teleport = null; expect(popup.parentNode).toEqual(wrapper.element); }); @@ -78,8 +78,8 @@ test('get container with selector', () => { wrapper = mount({ template: `
- - + +
`, components: { @@ -87,8 +87,8 @@ test('get container with selector', () => { }, }); - const dom1 = document.querySelector('.get-container-selector-1'); - const dom2 = wrapper.vm.$el.querySelector('.get-container-selector-2'); + const dom1 = document.querySelector('.teleport-selector-1'); + const dom2 = wrapper.vm.$el.querySelector('.teleport-selector-2'); expect(dom1.parentNode).toEqual(document.body); expect(dom2.parentNode).toEqual(wrapper.vm.$el); @@ -99,7 +99,7 @@ test('render overlay', async () => { wrapper = mount({ template: `
- +
`, components: { @@ -107,7 +107,7 @@ test('render overlay', async () => { }, data() { return { - getContainer: () => div, + teleport: () => div, }; }, }); @@ -122,7 +122,7 @@ test('watch overlay prop', async () => { wrapper = mount({ template: `
- +
`, components: { @@ -132,7 +132,7 @@ test('watch overlay prop', async () => { return { show: false, overlay: false, - getContainer: () => div, + teleport: () => div, }; }, }); @@ -158,7 +158,7 @@ test('close on click overlay', async () => {
@@ -169,7 +169,7 @@ test('close on click overlay', async () => { data() { return { value: true, - getContainer: () => div, + teleport: () => div, }; }, methods: { diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md index c54f46c16..d6e0e7ba8 100644 --- a/src/share-sheet/README.md +++ b/src/share-sheet/README.md @@ -123,7 +123,7 @@ export default { | close-on-popstate | Whether to close when popstate | _boolean_ | `true` | | close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | -| get-container | Return the mount node for ShareSheet | _string \| () => Element_ | - | +| teleport | Return the mount node for ShareSheet | _string \| Element_ | - | ### Data Structure of Option diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md index 1c25ca9dd..d88edc317 100644 --- a/src/share-sheet/README.zh-CN.md +++ b/src/share-sheet/README.zh-CN.md @@ -169,7 +169,7 @@ export default { | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `true` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | -| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | +| teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - | ### Option 数据结构 diff --git a/src/share-sheet/index.js b/src/share-sheet/index.js index ab5c723aa..429539f5e 100644 --- a/src/share-sheet/index.js +++ b/src/share-sheet/index.js @@ -13,9 +13,9 @@ export default createComponent({ ...popupSharedProps, title: String, duration: [Number, String], + teleport: [String, Object], cancelText: String, description: String, - getContainer: [String, Function], options: { type: Array, default: () => [], @@ -141,7 +141,7 @@ export default createComponent({ duration={this.duration} lazyRender={this.lazyRender} lockScroll={this.lockScroll} - getContainer={this.getContainer} + teleport={this.teleport} closeOnPopstate={this.closeOnPopstate} closeOnClickOverlay={this.closeOnClickOverlay} safeAreaInsetBottom={this.safeAreaInsetBottom} diff --git a/src/share-sheet/test/index.spec.js b/src/share-sheet/test/index.spec.js index d4a3a87bd..f8a1e437a 100644 --- a/src/share-sheet/test/index.spec.js +++ b/src/share-sheet/test/index.spec.js @@ -89,7 +89,7 @@ test('click-overlay event', async () => { const wrapper = mount(ShareSheet, { propsData: { value: true, - getContainer: () => root, + teleport: root, }, }); diff --git a/src/toast/README.md b/src/toast/README.md index d974164d2..d9c056df3 100644 --- a/src/toast/README.md +++ b/src/toast/README.md @@ -154,4 +154,4 @@ Toast.resetDefaultOptions('loading'); | onOpened | Callback function after opened | _Function_ | - | | onClose | Callback function after close | _Function_ | - | | transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | `van-fade` | -| getContainer | Return the mount node for Toast | _string \| () => Element_ | `body` | +| teleport | Return the mount node for Toast | _string \| Element_ | `body` | diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md index 6eb067bad..633a264d2 100644 --- a/src/toast/README.zh-CN.md +++ b/src/toast/README.zh-CN.md @@ -167,4 +167,4 @@ Toast.resetDefaultOptions('loading'); | onOpened | 完全展示后的回调函数 | _Function_ | - | | onClose | 关闭时的回调函数 | _Function_ | - | | transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | `van-fade` | -| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` | +| teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | `body` | diff --git a/src/toast/index.js b/src/toast/index.js index cc9c0b49a..cbb64932c 100644 --- a/src/toast/index.js +++ b/src/toast/index.js @@ -11,12 +11,12 @@ const defaultOptions = { onClose: null, onOpened: null, duration: 2000, + teleport: 'body', iconPrefix: undefined, position: 'middle', transition: 'van-fade', forbidClick: false, loadingType: undefined, - getContainer: 'body', overlayStyle: null, closeOnClick: false, closeOnClickOverlay: false,