GitHub

Multi-chain Swap

组合资产兑换界面，包含代币选择、数量与目标信息。

适用场景

  • 当界面需要以下行为时使用 Multi-chain Swap：组合资产兑换界面，包含代币选择、数量与目标信息。

安装

选择安装方式，用法示例将同步更新导入路径。

$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/swap.json

首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。

示例

预览

Swap

≈ $3,142

1.245· Ethereum
18.702381

≈ $3,142

12.4· Solana
Rate1 ETH ≈ 18.702381 SOLNetwork fee$0.42Slippage0.50%ETA≈ 24s

状态与事件

此示例组合没有声明成对的受控属性与 update 事件。使用已列出的属性、原生事件和插槽组合内容；不要为它添加未公开的 v-model。

API 参考

chains?
Chain[]
() => CHAINS
tokens?
Token[]
() => TOKENS
defaultFromId?
string
"eth-eth"
defaultToId?
string
"sol-sol"

事件

swap
[order: SwapOrder]
@swap
connect
[]
@connect

无障碍

为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。

常见问题

如何配置 Multi-chain Swap？
通过 chains、tokens、defaultFromId、defaultToId 配置 Multi-chain Swap；API 表列出其类型与默认值。
如何连接到应用状态？
监听 swap、connect，将组件连接到应用状态。
可以在服务端渲染吗？
可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。

请留意

部分组件参考了开源作品，相关署名与独立许可请参阅 NOTICE。

更新于