V Design

Components · 通用组件

Button Interactions ​

在统一按钮骨架上增加轻量反馈。本组包含 Sponsor、Share、Settings、Delete、Visibility 和 Like 六种效果。

Overview ​

这些效果不是六套基础按钮。它们共用相同的尺寸、圆角、文字、焦点和禁用规则，只根据操作语义切换图标动画与状态颜色。

EffectFeedbackRecommended use
sponsor心形脉冲并变为粉色赞助、收藏或表达支持
shareLink 缩小淡出，Send 放大淡入分享、发送链接
settings设置图标旋转 180°打开设置或配置面板
delete删除图标抖动，图标与文字变红删除、移除等破坏性操作
visibilityEye 与 EyeOff 切换显示或隐藏内容
like点赞图标变蓝并填充点赞、认可等二态操作

Demo ​

Code ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import {
  MicroInteractionButton,
} from '@/library/web/components/button-interactions'

const liked = ref(false)
</script>

<template>
  <MicroInteractionButton effect="sponsor" label="Sponsor" />
  <MicroInteractionButton effect="share" label="Share" />
  <MicroInteractionButton effect="settings" label="Settings" />
  <MicroInteractionButton effect="delete" label="Delete" />
  <MicroInteractionButton effect="visibility" label="Visibility" />
  <MicroInteractionButton
    effect="like"
    label="Like"
    :active="liked"
    @click="liked = !liked"
  />
</template>

API ​

MicroInteractionButton ​

PropTypeDefaultDescription
effectsponsor | share | settings | delete | visibility | likerequired选择图标和反馈动画
labelstringrequired可见文字及按钮的无障碍名称
activebooleanfalse由业务状态控制的持续激活态
disabledbooleanfalse禁止操作并移除交互反馈

组件根元素为原生 button，其余按钮 attributes 与原生事件可以直接透传。visibility 和 like 会根据 active 自动提供 aria-pressed。

Project Design 可以覆盖：

scss
--vd-button-interaction-surface
--vd-button-interaction-surface-hover
--vd-button-interaction-text
--vd-button-interaction-focus
--vd-button-interaction-radius
--vd-button-interaction-height
--vd-button-interaction-duration
--vd-button-interaction-easing
--vd-button-interaction-sponsor
--vd-button-interaction-share
--vd-button-interaction-danger
--vd-button-interaction-like

Behavior ​

  • 鼠标悬停、键盘 focus-visible 和触摸按压都会提供反馈。
  • visibility 与 like 的持续状态由父组件控制，组件不擅自修改业务数据。
  • 所有效果保留统一的按压缩放、焦点环、禁用状态和按钮尺寸。
  • 系统启用减少动画时，取消脉冲、抖动、旋转、缩放和位移，状态颜色及图标仍然可辨认。

Notes ​

  • 动画用于补充反馈，不能代替文字、颜色以外的状态说明或操作结果提示。
  • delete 只表示破坏性动作，不代表删除已经成功；成功或失败仍应由业务层反馈。
  • visibility 和 like 是二态操作，应由实际状态驱动 active，不要只依赖 hover。
  • 交互参考来自 Amicro Buttons。原实现基于 React 和 Motion，本项目为 Vue 3 + SCSS 独立适配。
  • Amicro 使用 MIT 许可证，来源和版权说明记录在项目的 THIRD_PARTY_NOTICES.md。