FluxUI 中文网 · 官方 Livewire UI 库

Flux Pro Max ^2.6.2

复制按钮看似普通，却直接影响一个文档是否“可用”。Flux Pro Max 内置的 flux:x-copy 组件，就是专门为文档和后台页面准备的复制模块：无需额外脚本，直接包裹代码或内容即可复制，还自带高亮与状态提示。本文延续 Skeleton 博文的节奏，完整剖析它的结构与高级玩法。

核心特性一览

Slot 即内容：组件会 trim((string) $slot)，把你包裹的文本当作复制源，零配置就能用。
clipboard 覆盖复制值：如果展示内容和复制文本不同，可通过 clipboard="..." 指定，组件内部会 base64 编码后写进 data-clipboard。
双外观：variant="card" 提供圆角卡片、标题栏与内置按钮；variant="bare" 则只保留复制功能，让你自己控制排版。
代码高亮一键启用：默认 highlight=true，组件会按需加载 Shiki (via https://esm.sh/shiki@3.0.0)，支持 language 指定语法。
内置反馈动效：点击按钮会写入剪贴板、展示 “拷贝 / 已拷贝” 状态，并在 2 秒后自动恢复。
自定义样式钩子：codeClass 可追加到代码容器；容器类名同时包含 flux-pro-max-copy 与 flux-data-x-copy，方便全局定制。

基础用法

1. 直接包裹代码块

<flux:x-copy title="安装命令" language="bash">
@verbatim
composer require fluxui/flux-pro-max
php artisan flux-pro-max:install
@endverbatim
</flux:x-copy>

title 会渲染在卡片顶部。
Slot 中的代码自动成为复制文本，并参与高亮。

2. 展示与复制内容不同

<flux:x-copy
    clipboard="npm create fluxapp@latest"
    variant="bare"
>
    <flux:button size="sm">复制 CLI 命令</flux:button>
</flux:x-copy>

variant="bare" 只渲染一个透明容器 + 浮动按钮；slot 内你可以放任意元素。
复制的是真实 CLI 字符串，而非按钮文本。

组件内部是如何运作的？

编码与按钮点击

$clipboardEncoded = $clipboardSource !== '' ? base64_encode($clipboardSource) : null;

前端脚本调用 window.navigator.clipboard.writeText()，并用 decodeURIComponent(escape(atob(...))) 恢复原文，避免编码问题。

Shiki 按需加载

首次使用时，组件会初始化 window.__fluxShikiPromise，只加载一次。
渲染完成后通过 codeToHtml 将 pre > code 替换成高亮 HTML，支持明/暗两套主题 (github-light-default / github-dark-default)。

结构化类名

容器：flux-pro-max-copy（可全局样式）
代码区：flux-data-x-copy
复制按钮放在绝对定位的角标里，使用 flux:button + flux:icon，风格与其它组件统一

实战示例：文档页复制区块

<div class="rounded-2xl border bg-white dark:bg-zinc-900">
    <div class="px-6 py-6">
        {{-- 真正的组件示例 --}}
        <flux:x-copy clipboard="flux:x-copy">
            <flux:button size="sm" variant="outline">
                在任意 Blade 中写 <code>&lt;flux:x-copy&gt;</code>
            </flux:button>
        </flux:x-copy>
    </div>

    {{-- 展示可复制的代码 --}}
    <flux:x-copy
        variant="bare"
        language="blade"
        code-class="border-t border-zinc-200 dark:border-white/10"
    >
@verbatim
<flux:x-copy clipboard="git clone git@fluxui.cn:repo.git">
    <flux:button size="sm">复制命令</flux:button>
</flux:x-copy>
@endverbatim
    </flux:x-copy>
</div>

进阶技巧

自定义“已拷贝”状态时间
修改组件源码中 setTimeout 的间隔即可（默认 2000ms），或者挂载 flux-data-x-copy 的 MutationObserver，在外部控制状态。
无高亮场景
将 highlight 设为 false，可避免加载 Shiki，对于纯文本/短命令非常轻量：

<flux:x-copy highlight="false" clipboard="php artisan migrate">
    <span class="text-sm text-zinc-600">php artisan migrate</span>
</flux:x-copy>

监听复制事件
复制逻辑写在按钮的 x-on:click 中，你可以拦截或扩展这个逻辑，例如添加统计、Toast 等。

结语

flux:x-copy 把“复制”变成了一个可视、可控、可扩展的体验：你只需写标签，组件就负责代码高亮、按钮状态、剪贴板调用等琐事。无论是在 Flux Pro Max 文档里展示示例，还是在后台给运营同事提供可复制的配置项，这个组件都可以直接复用。

想了解更多属性与示例，请访问官方文档：拷贝组件。

Flux Pro Max · x-copy：把复制体验做到极致