FluxUI 中文网 · 官方 Livewire UI 库 · Flux Pro Max Cookie 隐私提示组件

显示侧边栏

flux:x-cookie-consent 是 Flux Pro Max 提供的 Cookie 隐私提示组件，首次访问时自动显示，用户同意后将状态持久化到本地存储，后续访问不再弹出，适合需要隐私合规提示的站点。

核心功能

首次访问自动显示 Cookie 提示条
用户点击同意后写入 localStorage，后续不再显示
支持底部（默认）和顶部两种显示位置
可配置主文案、同意按钮文案和"了解更多"链接
毛玻璃背景 + 圆角卡片设计
入场/出场滑动动画
完整暗色模式支持

基础用法

在布局文件中引入组件，默认显示在页面底部，使用内置中文文案。

{{-- 在布局文件中引入 --}}
<body>
    {{ $slot }}

    <flux:x-cookie-consent />
</body>

自定义文案

通过属性自定义提示文案、同意按钮文字和"了解更多"链接。

<flux:x-cookie-consent
    message="We use cookies to improve your experience."
    acceptText="Accept"
    learnMoreText="Privacy Policy"
    learnMoreUrl="/privacy"
/>

显示位置

通过 position 属性设置提示条的位置，支持 bottom（默认）和 top。

顶部显示

<flux:x-cookie-consent position="top" />

底部显示（默认）

<flux:x-cookie-consent position="bottom" />

重置同意状态

组件通过 localStorage 存储用户的同意状态。如需重新测试提示效果，可在浏览器控制台执行以下命令清除存储：

localStorage.removeItem('flux-cookie-consent');

如果自定义了 storageKey 属性，请使用对应的键名清除。

完整配置示例

在布局文件中引入组件，自定义所有文案和链接。

{{-- 布局文件 --}}
<body>
    {{ $slot }}

    {{-- Cookie 隐私提示 --}}
    <flux:x-cookie-consent
        message="本站使用 Cookie 提供个性化内容和流量分析。"
        acceptText="我同意"
        learnMoreText="查看隐私政策"
        learnMoreUrl="/privacy-policy"
        storageKey="my-site-cookie-consent"
    />

    @fluxScripts
</body>

属性参考

下面列出了 flux:x-cookie-consent 支持的全部属性。

属性	类型	默认值	说明
message	string	本网站使用 Cookie...	提示条的主文案内容。
acceptText	string	同意	同意按钮的文字。
learnMoreText	string	了解更多	"了解更多"链接的文字。仅在设置了 learnMoreUrl 时显示。
learnMoreUrl	string\|null	null	"了解更多"链接的目标地址，新窗口打开。设为 null 时不显示链接。
position	string	bottom	提示条位置。可选 bottom（底部）或 top（顶部）。
storageKey	string	flux-cookie-consent	localStorage 中存储同意状态的键名。如有多个站点共用同一域名，可自定义键名避免冲突。