This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Link: Why are you here?

Does Link need to be written as well?

The function of the Link component is not very necessary. It is the same as the default A tag in HTML. It can only explain the theme, whether to disable, custom underscore, and other small features after encapsulation.

However, after completing this component, I still feel that I can write some components, although it is very simple, and even not a very valuable component, but it is also a part of the component library.

But wanted to think, consulted several others on the market, and carefully studied the nuggets website (because of my personal projects is imitation of the Denver nuggets), I decided to make him, the reason is that several places icon will appear with links, ICONS, etc., when the time comes to encapsulate business component, according to the demand will enter this component encapsulation, as a child component. Normal development is still using Vue default rouer-link component;

So, so in fact more consideration, can find the applicable scene, if not applicable to change according to the situation to change the function, is in the useless place, then don’t it, anyway need to write again. The premise is that the component really doesn’t matter in the component library.

To make things

The first is the relatively simple layout, there is a point, I will mention later, first look at the structure;

<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>
Copy the code

For ease of reading, I have newlines for the class class name. In actual development, newlines will cause syntax errors, please note.

This part is simple. One is to determine whether to display ICONS. For ICONS, we use the icon library we packaged in the previous article.

The second is to determine whether to disable, whether the mouse over the display underline, open mode;

The third thing to note is that since my colors are managed using CSS variables, I give the icon a separate class name to control the color.

Of course, if you need to copy, these things are completely according to their own needs to achieve, there is no fixed paradigm.

The logical part

The logical part is for handling the props parameter. The main point is to check the props value. Only the specified value is accepted.

<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'];
      returnlist.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>
Copy the code

The props validator property takes a method with a return value. This is done using the inclides method on the array.

import ele from './link.vue'

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

export default ele;
Copy the code

This section is the exported code, similar to the previous section, with the following directory structure, written in index.js.

root/src/components
|-link
    |-link.vue
    |-index.js
Copy the code

Some styles to be aware of

Style part of course can be in accordance with their own ideas to free play, but if I follow this idea to do, it is the need to pay attention to a few small places.

.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;
}
Copy the code

1. The color of the icon should be managed together in the style because it is traversed using CSS.

2. Is-underline controls the underline that the mouse passes over. It does not always exist, so pay attention to it.

To see the effect, add a little transparency and control the mouse pointer style to distinguish.

Write in the last

The component library here is mainly shared, so it involves a variety of components. Some components that are not in my plan but worth sharing, I will also temporarily type code and write them out.

This component, because I can see it, may not be used in my project, but it has a meaning.

And some of the code design has some merit.

Well, the Link component is also suitable for pure novice component development.