Vue3从0到1组件开发-基础组件：Link

---

Link: 你为何而来？

Link也需要写吗？

就Link链接这个组件的作用来写，确实稍微有一丢丢的不是很有必要，可以说是和HTML默认的a标签完全无二致了，强行解释一波也只能搬出主题、是否禁用、自定义下划线等几个封装之后的小特色了。

不过在完善了这个组件之后，还是觉得可以写一些的，虽然是很简单，甚至不是很有存在价值的一个组件，但是也算是组件库中的一员嘛。

不过想了想，参考了市面上其他几个，以及仔细研究了掘金网站（因为我的个人项目是仿掘金的）之后，我还是决定搞他一下，原因在于好几个地方会出现带图标链接，图标链接等，到时候可以封装业务组件时，根据需求将这个组件封装进入其中，作为一个子组件。 正常的开发还是使用Vue默认的rouer-link组件；

所以嘛，所以其实多考虑一下，是可以找到适用的场景的，如果不适用就根据情况改一改功能， 是在没有用的地方，那就不要它了，反正需要再写也来得及。前提是，这个组件在组件库真的不重要。

开始搞事

首先的是比较简单的布局环节，有一个注意点，稍后会提一下，先看结构；

<template lang="pug">
block content
a(
  :class="[
      'yx-link', 
      type ? `yx-link-${type}` : '', 
      disabled && 'is-disabled', 
      underline && !disabled && 'is-underline' 
  ]"
  :href="disabled ? null : href",
  @click="handleClick",
  :target="target"
)
  yx-icons(
    v-if="icon"
    :type="icon"
    :color="`yx-icon-${type}`"
  )
  span(
    v-if="$slots.default"
    class="yx-link--inner"
  )
    slot
  slot(
    v-if="$slots.icon"
    name="icon"
  )
</template>

为了方便阅读， 我对class类名进行了换行，实际开发时换行会导致语法报错，请注意。

这一块比较简单，其一是判断下是否显示图标，而图标的话，这里用的是前面的文章自己包的图标库，考虑到最终会打包成组件库，所以允许传递自定义图标；

其二是判断是否禁用、是否鼠标经过显示下划线、打开方式；

其三是需要注意一下，因为我的颜色是使用css的变量统一管理的，所以给图标一个单独的类名控制颜色。

当然，如果需要复刻的话，这些东西完全是按照自己的需要去实现的，没有固定的范式。

逻辑部分

逻辑部分主要是针对props参数的处理，主要的一个点就是对props的值进行校验，只接受指定的值了。

<script setup>
import {
    defineEmit, defineProps } from 'vue';
import yxIcon