完成ButtonLink

This commit is contained in:
2025-07-27 18:41:50 +08:00
parent 3f99fec396
commit 4daea5dfdd

View File

@@ -1,101 +1,25 @@
<template>
<div class="flex flex-row items-center mt-2 mb-2">
<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 :variant="variant" :size="size" :icon="icon" :trailing-icon="trailingIcon" class="min-h-10 max-h-12">
<slot/>
</UButton>
</NuxtLink>
</div>
</template>
<script setup lang="ts">
type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;
defineProps<{
variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
leftIcon?: string;
rightIcon?: string;
color?: 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white' | 'black';
icon?: string;
to?: string;
href?: string;
target?: string;
target?: Target;
trailingIcon?: 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>