帶按鈕的圖片橫幅廣告

Vue Cookie接受下降 (vue-cookie-accept-decline)

Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an event with current selection on creation. Good for GDPR requirements.

在頁面上顯示帶有文字，拒絕按鈕和接受按鈕的橫幅。 記得使用cookie進(jìn)行選擇。 使用創(chuàng)建時的當(dāng)前選擇來發(fā)出事件。 符合GDPR要求。

View demo 查看演示 Download Source 下載源

安裝 (Install)

# npm npm i vue-cookie-accept-decline#yarn yarn add vue-cookie-accept-decline

Or you can include it through the browser at the bottom of your page:

或者，您可以通過頁面底部的瀏覽器將其包括在內(nèi)：

<script src="https://unpkg.com/vue-cookie-accept-decline"></script>

<script src="https://unpkg.com/vue-cookie-accept-decline"></script>

關(guān)于 (About)

We needed a component to show a privacy banners on pages - came across the awesome vue-cookie-law by apertureless and it was almost what was needed, except we needed to track the option of an opt-out/decline which seemed a bit out of scope for that project - so vue-cookie-accept-decline is the result.

我們需要一個組件來在頁面上顯示隱私橫幅-無Kong洞地遇到了令人敬畏的Vue-Cookie法律 ，這幾乎是必需的，除了我們需要跟蹤選擇退出/拒絕的選項似乎有點該項目的范圍-因此vue-cookie-accept-decline是結(jié)果。

The big difference here is that vue-cookie-accept-decline allows the user to decline the text on the banner - this is important because you may want to not uses cookies in your app if they have declined the oppurtunity to be tracked.

這里最大的區(qū)別是， vue-cookie-accept-decline允許用戶拒絕橫幅上的文字-因為你可能想不使用你的應(yīng)用程序的cookie，如果他們拒絕被跟蹤的奧珀蒂尼蒂這是很重要的。

When the decline or accept buttons are clicked, they will emit the events clickedAccept and clickedDeclined respectively. Also, on creation, the component will emit a status event with a value of the current setting, null for nothing set, accept for an accepted banner, and decline for a declined banner. You can listen to this event on the component and do something like disable cookies if you see they have declined the banner.

單擊拒絕或接受按鈕時，它們將分別發(fā)出事件clickedAccept和clickedDeclined 。 同樣，在創(chuàng)建時，組件將發(fā)出一個status事件，其值為當(dāng)前設(shè)置，為null表示未設(shè)置任何內(nèi)容， accept表示接受的橫幅， decline表示拒絕的橫幅。 您可以在組件上偵聽此事件，并執(zhí)行諸如禁用cookie的操作(如果看到它們拒絕顯示橫幅)。

使用范例 (Usage Example)

import VueCookieAcceptDecline from 'vue-cookie-accept-decline' Vue.component('vue-cookie-accept-decline', VueCookieAcceptDecline) <vue-cookie-accept-decline:debug="false":position="'bottom'":transitionName="'slideFromBottom'"@status="cookieStatus"@clickedAccept="cookieClickedAccept"@clickedDecline="cookieClickedDecline"><div slot="message">We use cookies to ensure you get the best experience on our website.<a href="https://cookiesandyou.com/" target="_blank">Learn More...</a></div> </vue-cookie-accept-decline>

道具 (Props)

proptypedefaultpossible valuesdescription

debug	boolean	false	true, false	If true, the cookie is never saved, only the events will be emitted.
position	string	bottom	bottom, top	Position of the banner
transitionName	string	slideFromBottom	slideFromBottom, slideFromTop, fade	Banner animation type

Struts 類型 默認(rèn) 可能的值 描述

調(diào)試	布爾值	假	真假	如果為true，則永遠(yuǎn)不會保存cookie，只會發(fā)出事件。
位置	串	底部	底部，頂部	橫幅的位置
transitionName	串	slideFromBottom	slideFromBottom，slideFromTop，淡入淡出	橫幅動畫類型

大事記 (Events)

eventvaluedescription

status	'accept', 'decline', null	Event will be emitted when component is created.
clickedAccept	none	Event will be emitted when accept is clicked on the banner.
clickedDecline	none	Event will be emitted when declined is clicked on the banner.

事件 值 描述

狀態(tài)	'接受'，'拒絕'，null	創(chuàng)建組件時將發(fā)出事件。
clickedAccept	沒有	單擊橫幅上的接受，將發(fā)出事件。
clickedDecline	沒有	單擊橫幅上的拒絕按鈕時，將發(fā)出事件。

信息槽 (Message Slot)

There is a slot for your own custom message, this is good for providing your own link of whatever type you want. If you don't use the slot, the default message will be: We use cookies to ensure you get the best experience on our website..

有一個用于您自己的自定義message的插槽，該插槽可用于提供您想要的任何類型的自己的鏈接。 如果您不使用該插槽，則默認(rèn)message為： We use cookies to ensure you get the best experience on our website. 。

SASS結(jié)構(gòu) (SASS Structure)

.cookie {&--bottom {}&--top {}&__content {}&__buttons {&__button {&--accept {}&--decline {}}} }

發(fā)展歷程 (Development)

# install dependencies npm install# serve with hot reload npm run watch# build demo page npm run build:example# build npm run build# publish to npm npm version patch npm publish

翻譯自: https://vuejsexamples.com/show-a-banner-with-text-remembers-selection-using-cookies/

帶按鈕的圖片橫幅廣告

總結(jié)

以上是生活随笔為你收集整理的带按钮的图片横幅广告_显示带有文字的横幅记住使用cookie的选择的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。