vue-cookie-lawを使用してVue.jsでEUCookie法を処理する

投稿日: 2022-04-20 2022-10-06
タグ: Vue.js

EUの開発者は、おそらくCookie法にかなり精通しています。この法律では、WebサイトでCookieが使用されているかどうかをユーザーに通知し、Cookieを受け入れるか、サイトから離れるようにする必要があります。さて、そのようなものを実装するのはほんの少しの余分な努力ですが、他の誰かがすでに持っているのなら、なぜ自分でそれをするのですか？（古典的なオープンソースの怠惰な脱出ハッチ。）<3

vue-cookie-law のおかげで、わずか数行のコードで、完全なEUCookieLawコンポーネントをWebサイトのビューポートの上部または下部にアタッチできます。簡単-簡単！

インストール

経由でvue-cookie-lawをインストールします。ヤーンまたはNPM。

# Yarn
$ yarn add vue-cookie-law
# NPM
$ npm install vue-cookie-law --save

使用法

vue-cookie-lawの最も基本的な使用法は次のとおりです。

<template>
  <div class="main-wrapper">
    <cookie-law theme="blood-orange--rounded"></cookie-law>
  </div>
</template>

<script>
import CookieLaw from 'vue-cookie-law';

export default {
  components: {
    CookieLaw
  }
}
</script>

カスタマイズ

vue-cookie-law には、カスタマイズできるいくつかの小道具があります。

buttonText-承認ボタンのテキストを変更します。
message-ユーザーが最初にアクセスしたときに表示されるメッセージ。デフォルトは This website uses cookies to ensure you get the best experience on our website.
theme-コンポーネントのテーマ。デフォルトでは6つのテーマが含まれていますが、以下に示すように、CSSを使用して追加のテーマを簡単に作成できます。
位置–上または下。
transitionName-通知の表示と非表示を切り替えるために使用される遷移。現在、 slideFromBottom、slideFromTop、およびfadeをサポートしています。

テーマ：

すべてのクラスを.Cookie–themeName でラップするだけで、 vue-cookie-lawのカスタムテーマを作成できます。次に、テーマの名前を次のように渡します。 <vue-cookie-law theme="themeName"></vue-cookie-law>.

例:(バットマンスタイル）

.Cookie--batman {
  background: black;

  > .Cookie__button {
      background: black;
      color: yellow;
  }

  > .Cookie__message {
    color: yellow;
  }
}

どうぞ！順守を楽しんでください！

getdocs

13036