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;
  }
}

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