56 lines
No EOL
871 B
Vue
56 lines
No EOL
871 B
Vue
<template>
|
|
<span
|
|
class="link"
|
|
:class="{ 'link--clickable': isClickable }"
|
|
@click="handleClick"
|
|
>
|
|
<slot></slot>
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
routePath?: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const emit = defineEmits<{
|
|
click: [];
|
|
}>();
|
|
|
|
const router = useRouter();
|
|
|
|
const isClickable = computed(() => !!props.routePath);
|
|
|
|
const handleClick = () => {
|
|
if (props.routePath) {
|
|
if (import.meta.client) {
|
|
router.push(props.routePath);
|
|
}
|
|
} else {
|
|
emit('click');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.link {
|
|
width: fit-content;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
transition: 0.2s;
|
|
cursor: pointer;
|
|
color: #111827;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
|
|
&--clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
@include hover {
|
|
color: #364565;
|
|
}
|
|
}
|
|
</style> |