AnimateButton

带鼠标追踪径向光晕效果的按钮,支持 loading 状态和始终动画模式。

基本用法

默认

鼠标悬浮时沿指针位置生成径向光晕。

<script setup lang="ts">
import { AnimateButton } from '@tripo3d/design';
</script>

<template>
  <AnimateButton class="h-10 w-40 font-bold">生成模型</AnimateButton>
</template>

始终动画

alwaysAnimate

即使未悬停也持续展示光晕,常用于需要吸引注意力的主按钮。

<AnimateButton always-animate>立即体验</AnimateButton>

状态

禁用 / 加载

<AnimateButton disabled>禁用</AnimateButton>
<AnimateButton loading>加载中</AnimateButton>

自定义颜色

通过 UnoCSS class 覆写

<AnimateButton class="btn-bg-blue-1 btn-text-white btn-shadow-blue-1 btn-glow-blue-2">
  蓝色
</AnimateButton>
<AnimateButton class="btn-bg-purple-1 btn-text-white btn-shadow-purple-1 btn-glow-purple-2">
  紫色
</AnimateButton>

Loading 全流程与自定义配色

点击进入 5s loading

点击后进入 loading 态，5 秒后恢复常态。loading 配色可通过 btn-loading-* class 自定义（默认为金色，支持色板 token 与 [任意值]）。

<script setup lang="ts">
import { ref } from 'vue';
import { AnimateButton } from '@tripo3d/design';

const loading = ref(false);
const start = () => {
  loading.value = true;
  setTimeout(() => (loading.value = false), 5000);
};
</script>

<template>
  <!-- 默认（金色）loading 配色 -->
  <AnimateButton :loading="loading" @click="start">生成模型</AnimateButton>
  <!-- 自定义（紫色）loading 配色：btn-loading-* class，支持色板 token 与任意值 -->
  <AnimateButton
    class="btn-bg-purple-1 btn-text-white btn-shadow-purple-1 btn-glow-purple-2
      btn-loading-bg-from-[rgba(167,155,236,0.25)] btn-loading-bg-to-[rgba(80,59,227,0.3)]
      btn-loading-glow-purple-2 btn-loading-text-[#8f83cf]
      btn-loading-border-from-[#453a8c] btn-loading-border-via-[#b7aaff] btn-loading-border-to-[#55506e]"
    :loading="loading"
    @click="start"
  >
    紫色
  </AnimateButton>
</template>

API

Props

名称	类型	默认值	说明
as	AsTag	'button'	渲染的 HTML 标签
alwaysAnimate	boolean	—	始终显示光晕,无需鼠标悬停
disabled	boolean	—	禁用状态
loading	boolean	—	加载中状态,显示 spinner 并禁用交互
class	string	—	按钮内容区 class
wrapperClass	string	—	外层包装容器 class

Slots

插槽	作用域	说明
default	—	按钮内容

CSS 变量

CSS 变量	默认值	说明
--btn-bg-color	—	按钮背景色
--btn-text-color	—	文字色
--btn-hover-shadow-color	—	悬浮阴影颜色
--btn-glow-color	—	径向光晕颜色
--btn-loading-bg-from	—	loading 背景径向渐变中心色
--btn-loading-bg-to	—	loading 背景径向渐变边缘色
--btn-loading-glow-color	—	loading 内部光斑 / 文字高光色
--btn-loading-text-color	—	loading 文字基础色
--btn-loading-border-from	—	loading 边框光带起始色
--btn-loading-border-via	—	loading 边框光带高光色
--btn-loading-border-to	—	loading 边框光带结束色

可访问性

• 渲染为原生 <button>(默认 as='button'),支持键盘 Enter / Space 激活
• disabled / loading 状态下自动禁用交互,并阻止键盘与点击事件
• 如需渲染为链接,可使用 as="a" 并提供 href