使用 vue-cookie-law 在 Vue.js 中处理欧盟 Cookie 法

欧盟的开发人员可能很熟悉Cookie法,该法要求您通知用户,如果您的网站使用Cookie,并让他们接受或离开该网站。

由于 vue-cookie-law,你可以有一个完整的欧盟Cookie法组件附加到你的网站的视图端的顶部或底部,只需几行代码。

安装

通过 Yarn 或 NPM 安装 vue-cookie-law。

1# Yarn
2$ yarn add vue-cookie-law
3# NPM
4$ npm install vue-cookie-law --save

使用

查看cookie法的最基本的用途如下:

 1<template>
 2  <div class="main-wrapper">
 3    <cookie-law theme="blood-orange--rounded"></cookie-law>
 4  </div>
 5</template>
 6
 7<script>
 8import CookieLaw from 'vue-cookie-law';
 9
10export default {
11  components: {
12    CookieLaw
13  }
14}
15</script>

定制化

vue-cookie-law 有几个您可以自定义的优惠,包括:

• buttonText - 更改接受按钮上的文本
• 消息 - 首次访问时向用户显示的消息. 默认是 本网站使用cookies来确保您在我们的网站上获得最佳体验。
• 主题 - 组件的主题. 默认情况下包含六个主题,并可以轻松地创建其他主题,如下所示
• 位置 - 顶部或底部
• 过渡名称 - 用于隐藏和显示通知的过渡。 目前支持 slideFromBottom, slideFromTop和 fade

主題: *

您可以通过包装您的所有类别以.cookie--themeName 创建定制的主题,然后只需将主题的名称输入到 <vue-cookie-law theme="themeName"></vue-cookie-law>。

例:(蝙蝠侠风格)

 1.Cookie--batman {
 2  background: black;
 3
 4  > .Cookie__button {
 5      background: black;
 6      color: yellow;
 7  }
 8
 9  > .Cookie__message {
10    color: yellow;
11  }
12}

来吧!来吧!来吧!来吧!来吧!来吧!来吧!