102 lines
1.9 KiB
Vue
102 lines
1.9 KiB
Vue
<template>
|
||
<NuxtLink :to="to || href" :target="(blank && '_blank') || target">
|
||
<UButton
|
||
:variant="variant"
|
||
:size="size"
|
||
class="button-link"
|
||
>
|
||
<SmartIcon v-if="leftIcon" :name="leftIcon" class="icon-left" />
|
||
<slot />
|
||
<SmartIcon v-if="rightIcon" :name="rightIcon" class="icon-right" />
|
||
</UButton>
|
||
</NuxtLink>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
defineProps<{
|
||
variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
|
||
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
||
leftIcon?: string;
|
||
rightIcon?: string;
|
||
to?: string;
|
||
href?: string;
|
||
target?: string;
|
||
blank?: boolean;
|
||
}>();
|
||
</script>
|
||
|
||
<style scoped>
|
||
.button-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.2rem;
|
||
padding: 0.3rem;
|
||
border-radius: 0.5rem;
|
||
font-weight: 500;
|
||
font-size: 0.875rem;
|
||
line-height: 1.25rem;
|
||
transition: all 0.2s ease;
|
||
text-decoration: none;
|
||
|
||
}
|
||
|
||
.button-link:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.button-link:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 实心按钮样式（蓝色按钮） */
|
||
:deep(.u-button--solid) {
|
||
background-color: #3b82f6;
|
||
color: white;
|
||
border-color: #3b82f6;
|
||
}
|
||
|
||
:deep(.u-button--solid:hover) {
|
||
background-color: #2563eb;
|
||
border-color: #2563eb;
|
||
}
|
||
|
||
/* 边框按钮样式（GitHub按钮） */
|
||
:deep(.u-button--outline) {
|
||
background-color: white;
|
||
color: #3b82f6;
|
||
border-color: #3b82f6;
|
||
}
|
||
|
||
:deep(.u-button--outline:hover) {
|
||
background-color: #eff6ff;
|
||
border-color:var(--primary);
|
||
}
|
||
|
||
/* 图标按钮样式（Ghost图标） */
|
||
:deep(.u-button--ghost) {
|
||
background-color: transparent;
|
||
color: #3b82f6;
|
||
border-color: transparent;
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
:deep(.u-button--ghost:hover) {
|
||
background-color: #eff6ff;
|
||
color: #2563eb;
|
||
}
|
||
|
||
.icon-left {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.icon-right {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
flex-shrink: 0;
|
||
}
|
||
</style>
|