# Link
# Description
The component provides a hypertext link.
# Connection
<template>
<Link path="String(required)">Hypertext link</Link>
</template>
# Render
This is link!!!# API
# Props
Name | Type | Description | Default |
---|---|---|---|
path | String | Link url | required |
target | String | Target attr | '_blank' |
# Slots
Name | Description |
---|---|
default | Link text |
# Source code
@/src/components/Link/Link.vue
<template>
<a :href="path" :target="target" class="link">
<slot />
</a>
</template>
<script>
export default {
name: 'Link',
props: {
path: {
type: String,
required: true,
},
target: {
type: String,
required: false,
default: '_blank',
},
},
};
</script>
<style lang="stylus" scoped>
@import "~/src/stylus/_stylebase.styl";
.link
color $colors.primary
border-bottom 2px solid transparent
transition border $effects.duration
text-decoration none
&:hover
border-bottom 2px solid $colors.primary
text-decoration none
</style>