element-plus/docs/.vitepress/vitepress/components/common/vp-link.vue

38 lines
708 B
Vue

<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{
href?: string
noIcon?: boolean
}>()
const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
</script>
<template>
<component
:is="href ? 'a' : 'span'"
class="link-item"
:class="{ link: href }"
:href="href"
:target="isExternal ? '_blank' : undefined"
:rel="isExternal ? 'noopener noreferrer' : undefined"
>
<slot />
<ElIcon v-if="isExternal && !noIcon">
<i-ri-external-link-line class="link-icon" />
</ElIcon>
</component>
</template>
<style scoped>
.link-item {
display: flex;
align-items: center;
}
.el-icon {
margin-left: 4px;
}
</style>