Vue-cookie-lawを使用してVue.jsでEUCookie法を処理する
提供:Dev Guides
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; } }
どうぞ! 順守を楽しんでください!