# @beyonk/gdpr-cookie-consent-banner 中文文档

规范地址：https://npmcn.com/package/%40beyonk/gdpr-cookie-consent-banner/

版本：16\.0\.3
npm 元数据更新时间：2026-10-22T06:51:51.620Z
中文译文更新时间：2026-11-08T00:40:47.107Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40beyonk/gdpr-cookie-consent-banner
原文对照：https://npmcn.com/package/%40beyonk/gdpr-cookie-consent-banner/?lang=original
源码仓库：https://github.com/beyonk/gdpr-cookie-consent-banner

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：140 kB，10 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：24
- 运行依赖：2 个
- 首次发布：2018-07-30T15:37:29.826Z
- 最新版本发布：2026-10-22T06:51:51.174Z
- 近 30 天下载量：8479（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：70（近 12 个月 1 个）

## 中文简介

Svelte/ Kit 的 GDPR Cookie 协议标签

## 安装

```sh
npm install @beyonk/gdpr-cookie-consent-banner
```

也可以使用：`pnpm add @beyonk/gdpr-cookie-consent-banner`、`yarn add @beyonk/gdpr-cookie-consent-banner`、`bun add @beyonk/gdpr-cookie-consent-banner`

## README

[  
  
![](https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png)  
  
](https://beyonk.com/)

## GDPR Cookie 同意横幅

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) [![actions](https://github.com/beyonk-adventures/gdpr-cookie-consent-banner/actions/workflows/publish.yml/badge.svg)](https://github.com/beyonk-adventures/gdpr-cookie-consent-banner/actions/workflows/publish.yml) [![SvelteKit](https://img.shields.io/badge/svelte-kit-orange.svg)](https://kit.svelte.dev/) [![Svelte v5](https://img.shields.io/badge/svelte-v5-blueviolet.svg)](https://svelte.dev/)

### 这是什么?

实施符合GDPR的标语. 它允许用户颗粒选择入出四个不同的饼干类别.

它现在和斯维尔特基特一起工作 没有任何工作!

### 它的特征是什么?

-   小型、离散和非侵入性
-   GDPR 比较器
-   响应
-   提供四个类别
-   选择进入时运行任何函数
-   每次访问都会运行所选择的功能
-   改变选择需要用户再次选择进入.
-   丝绒准备
-   无依赖关系
-   选择每年到期
-   可选 CSS( 带有 BEM ) , 可以马上绑住您的 cookie 消息
-   可修改的标签和信件

### 我怎么安装?

#### 国家预防机制

简单地将节点模块安装到您的代码库中 .

```bash
npm install --save-dev @beyonk/gdpr-cookie-consent-banner
```

#### 维娅 CDN

进入其中之一 [(单位:公斤)](https://unpkg.com/) 或者说 [兹德利夫尔](https://jsdelivr.net/)数字 :

```html
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/dist/index.js"
></script>
```

### 使用量

#### 丝绒

用它来做一个普通的丝绒组件:

```svelte
<GdprBanner cookieName="foo" description="bar" on:analytics={initAnalytics} />

<script>
  import '@beyonk/gdpr-cookie-consent-banner/banner.css' // optional, you can also define your own styles
  import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'

  function initAnalytics () {
    // do something with segment.io or google analytics etc
  }
</script>
```

#### HTML / Web 组件

使用自定义 HTML 元素 `cookie-consent-banner`数字 :

```html
<!-- optional, you can also define your own styles, or override the provided ones -->
<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/src/lib/banner.css"
 />

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/dist/index.js"
></script>

<cookie-consent-banner cookie-name="foo" description="bar"></cookie-consent-banner>
```

### 方法

您可以通过绑定组件实例和呼叫从外部链接调用 cookie 横幅 `show()` 就在这.

```svelte
<GdprBanner bind:this={gdprBanner} cookieName="foo" description="bar" on:analytics={initAnalytics} />

<script>
  import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'

  let gdprBanner

  gdprBanner.show()
</script>
```

### 道具

缺省情况如下:.

当使用 Web 组件时, 使用属性名称的下大写版本, 将布尔语作为字符串, 对象属性作为 json 字符串

无法选择退出“ 必要的” 饼干 .

```js
const props = {
  /**
   * You must set the cookie name.
   **/
  cookieName: 'beyonk_gdpr',

  /**
   * Whether to display the banner to the user or not. This can be because you're in an iframe
   * and there is no room to show it if they haven't already consented, but, if they have already
   * consented, you want to action the "enableAnalytics" and similar handlers if they *have*.
   *
   * Default is true
   * 
   * For Web Components, pass `visible="true"`
   **/
  visible: true,

  /**
   * The cookie configuration, such as domain and path.
   * 
   * For web components, pass a JSON string: `cookie-config='{ "domain": "example.com", "path": "/" }'`
   **/
  cookieConfig: {
    domain: 'example.com',
    path: '/'
  },

  /**
   * These are the top two lines of text on the banner
   * The 'description' field can include html such as links
   **/
  heading: 'GDPR Notice',
  description: 'We use cookies to offer a better browsing experience, analyze site traffic, personalize content, and serve targeted advertisements. Please review our <a href="/privacy-policy">privacy policy page</a>. By clicking accept, you consent to our privacy policy & use of cookies.',

  /**
   * All the button labels and aria-label content.

    Note that either acceptAllLabel or acceptSelectedLabel will appear, depending on whether the user has selected all or only some cookie choices in the configuration dialogue. 
   **/
  acceptAllLabel: 'Accept all',
  acceptSelectedLabel: 'Accept selected',
  rejectLabel: 'Reject all',
  settingsLabel: 'Preferences',
  closeLabel: 'Close window',
  editLabel: 'Edit settings',

  /**
   * These are the default opt-ins and their descriptions.
   * When value is set to true, the option will automatically be checked on load.
   *
   * If you want to hide a category, simply set it to false, e.g. 'marketing: false'
   **/
  choices: {
      necessary: {
          label: "Necessary cookies",
          description: "Used for cookie control. Can't be turned off.",
          value: true
      },
      tracking: {
          label: "Tracking cookies",
          description: "Used for advertising purposes.",
          value: true
      },
      analytics: {
          label: "Analytics cookies",
          description: "Used to control Google Analytics, a 3rd party tool offered by Google to track user behavior.",
          value: true
      },
      marketing: {
          label: "Marketing cookies",
          description: "Used for marketing data.",
          value: true
      }
  },

  /**
   * Show an icon to edit cookies later, when banner is closed.
  **/
  showEditIcon: true,

  /**
   * Show a button to reject all cookies.
  **/
  canRejectCookies: false
}
```

### 活动

事件是你对同意的反应 每种类型的同意在用户设定时都会发出一个事件. 协议状态在事件细节中通过.

为了方便在使用Web组件时——并围绕种族条件工作,在操作器被附加之前,由组件释放出事件,我们也发出同样的事件,并带有前缀 `consent`打开 `window`。 。 。 .

### 指纹

接受分析或跟踪 cookie 将创建一个独特的UUID,允许您在像 CAPI 这样的系统中使用服务器侧的 cookie 时区分出不同用户的事件.

这个"指印"作为饼干上"fp"的属性被曝光.

#### 丝绒

```svelte
<GdprBanner bind:this={gdprBanner} cookieName="foo" description="bar" on:analytics={handleAnalytics} />

<script>
  import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'

  function handleAnalytics (event) {
    if (event.detail.agreed) {
      // some fathom analytics tracking code or similar
    } else {
      // disable any previously initialized analytics tracking code
    }
  }
</script>
```

#### HTML / Web 组件

```html
<cookie-consent-banner cookie-name="foo" description="bar"></cookie-consent-banner>

<script>
  document.getElementsByTagName('cookie-consent-banner')[0].addEventListener('analytics', () => {
    // some fathom analytics tracking code or similar
  })

  // We also emit these events on `window`
  window.addEventListener('consent:analytics', () => {
    // some fathom analytics tracking code or similar
  })
</script>
```

## 常见问题

### @beyonk/gdpr-cookie-consent-banner 是什么？

Svelte/ Kit 的 GDPR Cookie 协议标签

### 如何安装 @beyonk/gdpr-cookie-consent-banner？

在项目目录运行 npm install @beyonk/gdpr-cookie-consent-banner，或使用 pnpm add / yarn add / bun add。

### @beyonk/gdpr-cookie-consent-banner 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/beyonk\_\_gdpr-cookie-consent-banner 是否存在。

### @beyonk/gdpr-cookie-consent-banner 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @beyonk/gdpr-cookie-consent-banner 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js 24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @beyonk/gdpr-cookie-consent-banner 可以商用吗？

@beyonk/gdpr-cookie-consent-banner 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @beyonk/gdpr-cookie-consent-banner 的下载量有多少？

根据 npm 官方下载统计，@beyonk/gdpr-cookie-consent-banner 在 2026/10/08 – 2026/11/06 这 30 天内被下载 8,479 次，日均约 283 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @beyonk/gdpr-cookie-consent-banner 还在维护吗？

最新版本 16\.0\.3 发布于 2026/10/22（17 天前）；至今共发布 70 个版本，其中过去 12 个月发布了 1 个；首次发布于 2018/07/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。