这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

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 yxIcons from '../icons/index';

const emits = defineEmit(['click'])
const props = defineProps({
  type: {
    type: String,
    default: 'default',
    validator: value => {
      let list = ['primary','success','warning','error','info', 'default'];
      return list.includes(value);
    }
  },
  underline: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  target: {
    type: String,
    default: '__self',
    validator: value => ['__self','__blank','__parent','__top'].includes(value)
  },
  href: String,
  icon: String
})

const handleClick = e => {
  if(!props.disabled){
    emits('click', e)
  }
}
</script>

props中的validator属性接受一个带返回值的方法，这里用到数组的inclides方法来处理，也是一个实用的小技巧啦。

import ele from './link.vue'

ele.install = function(app){
  app.component(ele.name, ele)
}

export default ele;

这部分是导出的代码，和前面差不多，目录结构如下，写在index.js。

root/src/components
|-link
    |-link.vue
    |-index.js

需要注意的一些样式

样式部分当然可以按照自己的想法去自由发挥了，但是如果按照我的这个思路去做的话，是需要注意几个小地方的。

.yx-link.yx-link-default,
.yx-icon-default{ color:rgb(var(--default)); }
.yx-link.yx-link-primary,
.yx-icon-primary{ color:rgb(var(--primary)); }
.yx-link.yx-link-success,
.yx-icon-success{ color:rgb(var(--success)); }
.yx-link.yx-link-warning,
.yx-icon-warning{ color:rgb(var(--warning)); }
.yx-link.yx-link-error,
.yx-icon-error{ color:rgb(var(--error)); }
.yx-link.yx-link-info,
.yx-icon-info{ color:rgb(var(--info)); }

.yx-link.is-underline:hover{
  text-decoration: underline;
}
.yx-link.is-disabled{
  opacity: .9;
  cursor: not-allowed;
}

1、图标的颜色因为使用css遍历，所以要在样式里一起管理下，

2、is-underline控制的是鼠标经过的下划线，不是一直存在的，所以要注意一下下。

3、是否禁用为了看出效果，加一点点透明度和控制鼠标指针样式来区别。

写在最后

这边组件库还是以分享为主，所以会涉及到各种各样的组件，有些组件原本并不在我的规划中但是值得分享的，我也会临时去敲代码，写出来。

这部分组件因为我能看出来，可能在我的项目中用不到，但是它是有存在意义的。

并且其中的一些代码设计还是有可取之处的。

好啦， Link组件也是比较适合纯新手入门组件开发的一个组件了。

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