breaking change: rename get-container to teleport

2026-01-29 01:15:18 +08:00 · 2020-08-21 10:58:02 +08:00
parent 07d1a2590f
commit 52b187692b
39 changed files with 154 additions and 127 deletions
--- 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
 <!-- mount to body -->
-<van-popup v-model:show="show" get-container="body" />
+<van-popup v-model:show="show" teleport="body" />

 <!-- mount to #app -->
-<van-popup v-model:show="show" get-container="#app" />
+<van-popup v-model:show="show" teleport="#app" />

-<!-- Specify the mount location by function -->
-<van-popup v-model:show="show" :get-container="getContainer" />
+<!-- mount to Element -->
+<van-popup v-model:show="show" :teleport="myContainer" />
 ```

 ```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
--- a/src/popup/README.zh-CN.md
+++ b/src/popup/README.zh-CN.md
@@ -93,31 +93,28 @@ export default {

 ### 指定挂载位置

-弹出层默认挂载到组件所在位置，可以通过`get-container`属性指定挂载位置
+弹出层默认挂载到组件所在位置，可以通过`teleport`属性指定挂载位置

 ```html
 <!-- 挂载到 body 节点下 -->
-<van-popup v-model:show="show" get-container="body" />
+<van-popup v-model:show="show" teleport="body" />

 <!-- 挂载到 #app 节点下 -->
-<van-popup v-model:show="show" get-container="#app" />
+<van-popup v-model:show="show" teleport="#app" />

-<!-- 通过函数指定挂载位置 -->
-<van-popup v-model:show="show" :get-container="getContainer" />
+<!-- 挂载到指定的元素下 -->
+<van-popup v-model:show="show" :teleport="myContainer" />
 ```

 ```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`<br>`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
--- a/src/popup/demo/index.vue
+++ b/src/popup/demo/index.vue
@@ -84,15 +84,15 @@
      />
    </demo-block>

-    <demo-block card v-if="!isWeapp" :title="t('getContainer')">
+    <demo-block card v-if="!isWeapp" :title="t('teleport')">
      <van-cell
-        :title="t('getContainer')"
+        :title="t('teleport')"
        is-link
        @click="showGetContainer = true"
      />
      <van-popup
        v-model:show="showGetContainer"
-        get-container="body"
+        teleport="body"
        :style="{ padding: '30px 50px' }"
      />
    </demo-block>
@@ -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',
--- 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 (
        <Teleport to={to}>
          {this.genOverlay()}
--- 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: `
      <div>
-        <popup :value="true" :get-container="getContainer" />
+        <popup :value="true" :teleport="teleport" />
      </div>
    `,
    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: `
      <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>
+        <popup class="teleport-selector-1" :value="true" teleport="body"></popup>
+        <popup class="teleport-selector-2" :value="true" teleport="unknown"></popup>
      </div>
    `,
    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: `
      <div>
-        <popup :value="true" :get-container="getContainer" />
+        <popup :value="true" :teleport="teleport" />
      </div>
    `,
    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: `
      <div>
-        <popup :value="show" :overlay="overlay" :get-container="getContainer" />
+        <popup :value="show" :overlay="overlay" :teleport="teleport" />
      </div>
    `,
    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 () => {
      <div>
        <popup
          v-model="value"
-          :get-container="getContainer"
+          :teleport="teleport"
          @click-overlay="onClickOverlay"
        />
      </div>
@@ -169,7 +169,7 @@ test('close on click overlay', async () => {
    data() {
      return {
        value: true,
-        getContainer: () => div,
+        teleport: () => div,
      };
    },
    methods: {