feat(components): el-teleport (#4186)

packages/components/teleport/__tests__/teleport.spec.ts

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils'
+import Teleport from '../src/teleport.vue'
+
+const AXIOM = 'rem is the best girl'
+
+describe('<el-teleport />', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(Teleport, {
+      slots: { default: () => AXIOM },
+    })
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('should render slot correctly', () => {
+    expect(wrapper.text()).toBe('')
+    expect(document.body.textContent).toBe(AXIOM)
+    expect(wrapper.vm.containerRef).toBeDefined()
+  })
+
+  describe('props', () => {
+    it('should be able to set customized style', async () => {
+      const style = {
+        color: 'red',
+      }
+
+      await wrapper.setProps({ style })
+      expect(getComputedStyle(wrapper.vm?.containerRef).color).toBe(style.color)
+    })
+
+    it('should be able to set z-index', async () => {
+      const zIndex = '10000'
+      await wrapper.setProps({ zIndex })
+      expect(getComputedStyle(wrapper.vm?.containerRef).zIndex).toBe(zIndex)
+    })
+  })
+})

packages/components/teleport/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '@element-plus/utils/with-install'
+import Teleport from './src/teleport.vue'
+
+export const ElTeleport = withInstall(Teleport)
+
+export default ElTeleport
+
+export * from './src/teleport'

packages/components/teleport/src/teleport.ts

@@ -0,0 +1,19 @@
+import { buildProps, definePropType } from '@element-plus/utils/props'
+
+import type { ExtractPropTypes, StyleValue } from 'vue'
+
+export const elTeleportProps = buildProps({
+  container: {
+    type: definePropType<string | HTMLElement>([String, Object]),
+    default: 'body',
+  },
+  style: {
+    type: definePropType<StyleValue>([String, Array, Object]),
+  },
+  zIndex: {
+    type: String,
+    default: '2000',
+  },
+})
+
+export type ElTeleportProps = ExtractPropTypes<typeof elTeleportProps>

packages/components/teleport/src/teleport.vue

@@ -0,0 +1,36 @@
+<template>
+  <teleport v-if="container" :to="container">
+    <div ref="containerRef" class="el-teleport" :style="containerStyle">
+      <slot />
+    </div>
+  </teleport>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+import { elTeleportProps } from './teleport'
+
+export default defineComponent({
+  props: elTeleportProps,
+  setup(props) {
+    const containerRef = ref<HTMLElement>()
+    const containerStyle = computed(() => {
+      return props.container === 'body'
+        ? [
+            props.style,
+            {
+              position: 'absolute',
+              top: `0px`,
+              left: `0px`,
+              zIndex: props.zIndex,
+            },
+          ]
+        : {}
+    })
+    return {
+      containerRef,
+      containerStyle,
+    }
+  },
+})
+</script>

packages/components/teleport/style/css.ts

@@ -0,0 +1 @@
+/* Empty file for avoiding plugin error */

packages/components/teleport/style/index.ts

@@ -0,0 +1 @@
+/* Empty file for avoiding plugin error */

packages/hooks/use-popper/index.ts

@@ -134,8 +134,8 @@ export const usePopperProps = {
 }
 
 export const usePopperHook = () => {
-  const vm = getCurrentInstance()
-  const props: ExtractPropTypes<typeof usePopperProps> = vm.props as any
+  const vm = getCurrentInstance()!
+  const props: ExtractPropTypes<typeof usePopperProps> = vm.proxy?.$props as any
   const { slots } = vm
 
   const arrowRef = ref<RefElement>(null)