refactor(components): refactor link (#3527)

* refactor(components): refactor link

* fix: buildProp

packages/components/link/__tests__/link.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import Link from '../src/index.vue'
+import Link from '../src/link.vue'
 
 const AXIOM = 'Rem is the best girl'
 

packages/components/link/index.ts

@@ -1,13 +1,8 @@
-import Link from './src/index.vue'
+import { withInstall } from '@element-plus/utils/with-install'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import Link from './src/link.vue'
 
-Link.install = (app: App): void => {
-  app.component(Link.name, Link)
-}
+export const ElLink = withInstall(Link)
+export default ElLink
 
-const _Link = Link as SFCWithInstall<typeof Link>
-
-export default _Link
-export const ElLink = _Link
+export * from './src/link'

packages/components/link/src/index.vue

@@ -1,67 +0,0 @@
-<template>
-  <a
-    :class="[
-      'el-link',
-      type ? `el-link--${type}` : '',
-      disabled && 'is-disabled',
-      underline && !disabled && 'is-underline',
-    ]"
-    :href="disabled || !href ? null : href"
-    @click="handleClick"
-  >
-    <i v-if="icon" :class="icon"></i>
-
-    <span v-if="$slots.default" class="el-link--inner">
-      <slot></slot>
-    </span>
-
-    <slot v-if="$slots.icon" name="icon"></slot>
-  </a>
-</template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-import type { PropType } from 'vue'
-
-type ILinkType = PropType<
-  'primary' | 'success' | 'warning' | 'info' | 'danger' | 'default'
->
-
-export default defineComponent({
-  name: 'ElLink',
-  props: {
-    type: {
-      type: String as ILinkType,
-      default: 'default',
-      validator: (val: string) => {
-        return [
-          'default',
-          'primary',
-          'success',
-          'warning',
-          'info',
-          'danger',
-        ].includes(val)
-      },
-    },
-    underline: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: { type: Boolean, default: false },
-    href: { type: String, default: '' },
-    icon: { type: String, default: '' },
-  },
-  emits: ['click'],
-  setup(props, { emit }) {
-    function handleClick(event: Event) {
-      if (!props.disabled) {
-        emit('click', event)
-      }
-    }
-
-    return {
-      handleClick,
-    }
-  },
-})
-</script>

packages/components/link/src/link.ts

@@ -0,0 +1,24 @@
+import { buildProp } from '@element-plus/utils/props'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const linkProps = {
+  type: buildProp({
+    type: String,
+    values: ['primary', 'success', 'warning', 'info', 'danger', 'default'],
+    default: 'default',
+  } as const),
+  underline: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: { type: Boolean, default: false },
+  href: { type: String, default: '' },
+  icon: { type: String, default: '' },
+} as const
+export type LinkProps = ExtractPropTypes<typeof linkProps>
+
+export const linkEmits = {
+  click: (evt: MouseEvent) => evt instanceof MouseEvent,
+}
+export type LinkEmits = typeof linkEmits

packages/components/link/src/link.vue

@@ -0,0 +1,41 @@
+<template>
+  <a
+    :class="[
+      'el-link',
+      type ? `el-link--${type}` : '',
+      disabled && 'is-disabled',
+      underline && !disabled && 'is-underline',
+    ]"
+    :href="disabled || !href ? undefined : href"
+    @click="handleClick"
+  >
+    <i v-if="icon" :class="icon"></i>
+
+    <span v-if="$slots.default" class="el-link--inner">
+      <slot></slot>
+    </span>
+
+    <slot v-if="$slots.icon" name="icon"></slot>
+  </a>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { linkProps, linkEmits } from './link'
+
+export default defineComponent({
+  name: 'ElLink',
+
+  props: linkProps,
+  emits: linkEmits,
+
+  setup(props, { emit }) {
+    function handleClick(event: MouseEvent) {
+      if (!props.disabled) emit('click', event)
+    }
+
+    return {
+      handleClick,
+    }
+  },
+})
+</script>