欧盟的开发人员可能很熟悉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}
来吧!来吧!来吧!来吧!来吧!来吧!来吧!