Action Swap
使用模糊、滚动或错开过渡替换简短操作文字与图标。
适用场景
- 当界面需要以下行为时使用 Action Swap：使用模糊、滚动或错开过渡替换简短操作文字与图标。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/action-swap.json https://orvui.efu.me/r/action-swap-cascade.json https://orvui.efu.me/r/action-swap-blur.json https://orvui.efu.me/r/action-swap-roll.json
此示例还需要：
终端
pnpm add lucide-vue-next@^0.468.0首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
逐字
cascade.vue让旧标签字符离开，再逐字带入替换内容。
packages/vue/src/motion/action-swap/examples/cascade.vue
<script setup lang="ts">
import { Check, Copy } from "lucide-vue-next";
import { ActionSwapCascadeButton } from "@/components/orvui/motion/action-swap";
const actions = [{ id: "copy", label: "Copy link", icon: Copy, ariaLabel: "Copy link" }, { id: "copied", label: "Copied!", icon: Check, ariaLabel: "Copied" }];
</script>
<template><div class="flex w-full justify-center"><ActionSwapCascadeButton :items="actions" variant="primary" /></div></template>
packages/vue/src/motion/action-swap/src/ActionSwapCascadeButton.vue
模糊
blur.vue使用短暂模糊和缩放过渡交叉切换操作内容。
packages/vue/src/motion/action-swap/examples/blur.vue
<script setup lang="ts">
import { reactive } from "vue";
import { Check, Copy, Moon, Sun } from "lucide-vue-next";
import { ActionSwapBlurButton } from "@/components/orvui/motion/action-swap";
const selected = reactive({ text: "copy", icon: "light", action: "copy" });
const labels = [{ id: "copy", label: "Copy" }, { id: "copied", label: "Copied" }];
const themes = [{ id: "light", label: "Light", icon: Sun, ariaLabel: "Use light theme" }, { id: "dark", label: "Dark", icon: Moon, ariaLabel: "Use dark theme" }];
const actions = [{ id: "copy", label: "Copy link", icon: Copy, ariaLabel: "Copy link" }, { id: "copied", label: "Copied", icon: Check, ariaLabel: "Copied" }];
</script>
<template><div class="flex flex-wrap items-center justify-center gap-3">
<ActionSwapBlurButton v-model="selected.text" :items="labels" variant="secondary" /><ActionSwapBlurButton v-model="selected.icon" :items="themes" variant="outline" size="icon" icon-only /><ActionSwapBlurButton v-model="selected.action" :items="actions" variant="primary" />
</div></template>
packages/vue/src/motion/action-swap/src/ActionSwapBlurButton.vue
滚动
roll.vue让下一段标签或图标从下方向上进入原有空间。
packages/vue/src/motion/action-swap/examples/roll.vue
<script setup lang="ts">
import { reactive } from "vue";
import { Moon, Send, Sparkles, Sun } from "lucide-vue-next";
import { ActionSwapRollButton } from "@/components/orvui/motion/action-swap";
const selected = reactive({ text: "idle", icon: "light", action: "send" });
const labels = [{ id: "idle", label: "Save" }, { id: "done", label: "Saved" }];
const themes = [{ id: "light", label: "Light", icon: Sun, ariaLabel: "Use light theme" }, { id: "dark", label: "Dark", icon: Moon, ariaLabel: "Use dark theme" }];
const actions = [{ id: "send", label: "Send invite", icon: Send, ariaLabel: "Send invite" }, { id: "sent", label: "Invite sent", icon: Sparkles, ariaLabel: "Invite sent" }];
</script>
<template><div class="flex flex-wrap items-center justify-center gap-3">
<ActionSwapRollButton v-model="selected.text" :items="labels" variant="secondary" /><ActionSwapRollButton v-model="selected.icon" :items="themes" variant="outline" size="icon" icon-only /><ActionSwapRollButton v-model="selected.action" :items="actions" variant="primary" />
</div></template>
packages/vue/src/motion/action-swap/src/ActionSwapRollButton.vue
状态与事件
需要由表单、路由或父组件管理时，绑定下列状态并接收对应更新。v-model 是属性与 update 事件的简写；值的类型应与 API 一致。
| 组件 | Vue 绑定 | 更新事件 |
|---|---|---|
ActionSwapButton | v-modelstring | update:modelValue |
ActionSwapButton | v-model:valuestring | update:value |
ActionSwapCascadeButton | v-modelstring | update:modelValue |
ActionSwapCascadeButton | v-model:valuestring | update:value |
ActionSwapBlurButton | v-modelstring | update:modelValue |
ActionSwapBlurButton | v-model:valuestring | update:value |
ActionSwapRollButton | v-modelstring | update:modelValue |
ActionSwapRollButton | v-model:valuestring | update:value |
可选受控属性未传入时，按组件文档的默认行为工作；不要用固定的 false 或空值代替未传入。异步请求和持久化在应用中处理，再把结果传回组件。
API 参考
逐字
ActionSwapCascadeButton
items{ id: string; label: VNodeChild | Component; icon?: VNodeChild | Component; ariaLabel?: string; }[]—modelValue?string—value?string—defaultValue?string—cycle?booleanundefineddisabled?booleanfalsevariant?"primary" | "secondary" | "ghost" | "outline"—size?"sm" | "md" | "lg" | "icon"—事件
update:modelValue—@update:modelValueupdate:value—@update:valuevalueChange—@valueChange插槽
default—作用域参数: v-bind
#defaulticon—作用域参数: v-bind
#iconActionSwapButton
items{ id: string; label: VNodeChild | Component; icon?: VNodeChild | Component; ariaLabel?: string; }[]—modelValue?string—value?stringvalue.valuedefaultValue?stringprops.items[0]?.idanimation?"blur" | "cascade" | "roll""blur"variant?"primary" | "secondary" | "ghost" | "outline""secondary"size?"sm" | "md" | "lg" | "icon""md"iconOnly?booleanundefinedcycle?booleantruedisabled?booleanfalse事件
update:modelValue—@update:modelValuechange—@changeupdate:value—@update:valuevalueChange—@valueChangeclick—@click插槽
icon—作用域参数: item
#icondefault—作用域参数: item
#defaultActionSwapIcon
valuestring | number—animation?"blur" | "cascade" | "roll""blur"插槽
default() => VNodeChild#defaultActionSwapText
valuestring | number—animation?"blur" | "cascade" | "roll""blur"插槽
default() => VNodeChild#default模糊
ActionSwapBlurButton
items{ id: string; label: VNodeChild | Component; icon?: VNodeChild | Component; ariaLabel?: string; }[]—modelValue?string—value?string—defaultValue?string—cycle?booleanundefineddisabled?booleanfalsevariant?"primary" | "secondary" | "ghost" | "outline"—size?"sm" | "md" | "lg" | "icon"—事件
update:modelValue—@update:modelValueupdate:value—@update:valuevalueChange—@valueChange插槽
default—作用域参数: v-bind
#defaulticon—作用域参数: v-bind
#iconActionSwapButton
items{ id: string; label: VNodeChild | Component; icon?: VNodeChild | Component; ariaLabel?: string; }[]—modelValue?string—value?stringvalue.valuedefaultValue?stringprops.items[0]?.idanimation?"blur" | "cascade" | "roll""blur"variant?"primary" | "secondary" | "ghost" | "outline""secondary"size?"sm" | "md" | "lg" | "icon""md"iconOnly?booleanundefinedcycle?booleantruedisabled?booleanfalse事件
update:modelValue—@update:modelValuechange—@changeupdate:value—@update:valuevalueChange—@valueChangeclick—@click插槽
icon—作用域参数: item
#icondefault—作用域参数: item
#defaultActionSwapIcon
valuestring | number—animation?"blur" | "cascade" | "roll""blur"插槽
default() => VNodeChild#defaultActionSwapText
valuestring | number—animation?"blur" | "cascade" | "roll""blur"插槽
default() => VNodeChild#default滚动
ActionSwapRollButton
items{ id: string; label: VNodeChild | Component; icon?: VNodeChild | Component; ariaLabel?: string; }[]—modelValue?string—value?string—defaultValue?string—cycle?booleanundefineddisabled?booleanfalsevariant?"primary" | "secondary" | "ghost" | "outline"—size?"sm" | "md" | "lg" | "icon"—事件
update:modelValue—@update:modelValueupdate:value—@update:valuevalueChange—@valueChange插槽
default—作用域参数: v-bind
#defaulticon—作用域参数: v-bind
#iconActionSwapButton
items{ id: string; label: VNodeChild | Component; icon?: VNodeChild | Component; ariaLabel?: string; }[]—modelValue?string—value?stringvalue.valuedefaultValue?stringprops.items[0]?.idanimation?"blur" | "cascade" | "roll""blur"variant?"primary" | "secondary" | "ghost" | "outline""secondary"size?"sm" | "md" | "lg" | "icon""md"iconOnly?booleanundefinedcycle?booleantruedisabled?booleanfalse事件
update:modelValue—@update:modelValuechange—@changeupdate:value—@update:valuevalueChange—@valueChangeclick—@click插槽
icon—作用域参数: item
#icondefault—作用域参数: item
#defaultActionSwapIcon
valuestring | number—animation?"blur" | "cascade" | "roll""blur"插槽
default() => VNodeChild#defaultActionSwapText
valuestring | number—animation?"blur" | "cascade" | "roll""blur"插槽
default() => VNodeChild#default无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Action Swap？
- 通过 items、modelValue、value、defaultValue、animation、variant、size、iconOnly、cycle、disabled 配置 Action Swap；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 监听 update:modelValue、change、update:value、valueChange、click，将组件连接到应用状态。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
更新于
来源与许可 ↗MIT · 0.1.1