refactor(components): [teleport] refactor (#6301)

* refactor(components): [teleport] refactor

* chore: re-order imports

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

@@ -1,10 +1,13 @@
 import { mount } from '@vue/test-utils'
 import Teleport from '../src/teleport.vue'
+import type { VueWrapper } from '@vue/test-utils'
+import type { TeleportInstance } from '../src/teleport'
 
 const AXIOM = 'rem is the best girl'
 
-describe('<el-teleport />', () => {
-  let wrapper
+describe('ElTelport', () => {
+  let wrapper: VueWrapper<TeleportInstance>
+
   beforeEach(() => {
     wrapper = mount(Teleport, {
       slots: { default: () => AXIOM },
@@ -28,13 +31,15 @@ describe('<el-teleport />', () => {
       }
 
       await wrapper.setProps({ style })
-      expect(getComputedStyle(wrapper.vm?.containerRef).color).toBe(style.color)
+      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)
+      expect(getComputedStyle(wrapper.vm?.containerRef!).zIndex).toBe(zIndex)
     })
   })
 })

packages/components/teleport/src/teleport.ts

@@ -1,8 +1,8 @@
 import { buildProps, definePropType } from '@element-plus/utils'
-
 import type { ExtractPropTypes, StyleValue } from 'vue'
+import type Teleport from './teleport.vue'
 
-export const elTeleportProps = buildProps({
+export const teleportProps = buildProps({
   container: {
     type: definePropType<string>(String),
     default: 'body',
@@ -18,6 +18,7 @@ export const elTeleportProps = buildProps({
     type: String,
     default: '2000',
   },
-})
+} as const)
 
-export type ElTeleportProps = ExtractPropTypes<typeof elTeleportProps>
+export type TeleportProps = ExtractPropTypes<typeof teleportProps>
+export type TeleportInstance = InstanceType<typeof Teleport>

packages/components/teleport/src/teleport.vue

@@ -6,34 +6,33 @@
   </teleport>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
-import { elTeleportProps } from './teleport'
+import { teleportProps } from './teleport'
+import type { StyleValue } from 'vue'
 
-export default defineComponent({
-  props: elTeleportProps,
-  setup(props) {
-    const ns = useNamespace('teleport')
-    const containerRef = ref<HTMLElement>()
-    const containerStyle = computed(() => {
-      return props.container === 'body'
-        ? [
-            props.style,
-            {
-              position: 'absolute',
-              top: `0px`,
-              left: `0px`,
-              zIndex: props.zIndex,
-            },
-          ]
-        : {}
-    })
-    return {
-      ns,
-      containerRef,
-      containerStyle,
-    }
-  },
+const props = defineProps(teleportProps)
+
+const ns = useNamespace('teleport')
+const containerRef = ref<HTMLElement>()
+
+const containerStyle = computed<StyleValue>(() => {
+  return props.container === 'body'
+    ? [
+        props.style,
+        {
+          position: 'absolute',
+          top: `0px`,
+          left: `0px`,
+          zIndex: props.zIndex,
+        },
+      ]
+    : {}
+})
+
+defineExpose({
+  /** @description container element */
+  containerRef,
 })
 </script>