You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
820 B
Vue
41 lines
820 B
Vue
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
href?: string
|
|
noIcon?: boolean
|
|
title?: string
|
|
}>()
|
|
|
|
const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
:is="href ? 'a' : 'span'"
|
|
:class="{ link: href }"
|
|
:href="href"
|
|
:target="isExternal ? '_blank' : 'self'"
|
|
:rel="isExternal ? 'noopener noreferrer' : undefined"
|
|
:title="title ? title : href"
|
|
>
|
|
<slot />
|
|
<label
|
|
v-if="isExternal && !noIcon"
|
|
i-ic-round-arrow-outward
|
|
:class="$style.icon"
|
|
/>
|
|
</component>
|
|
</template>
|
|
|
|
<style module>
|
|
.icon {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin-top: -2px;
|
|
margin-left: 4px;
|
|
width: 11px !important;
|
|
height: 11px !important;
|
|
transition: fill 0.25s;
|
|
}
|
|
</style> |