带按钮的图片横幅广告

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进行选择。 使用创建时的当前选择来发出事件。 符合GDPR要求。

安装 (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:

或者，您可以通过页面底部的浏览器将其包括在内：

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

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

关于 (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是结果。

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.

这里最大的区别是， vue-cookie-accept-decline允许用户拒绝横幅上的文字-因为你可能想不使用你的应用程序的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.

单击拒绝或接受按钮时，它们将分别发出事件clickedAccept和clickedDeclined 。 同样，在创建时，组件将发出一个status事件，其值为当前设置，为null表示未设置任何内容， accept表示接受的横幅， decline表示拒绝的横幅。 您可以在组件上侦听此事件，并执行诸如禁用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)

大事记 (Events)

信息槽 (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的插槽，该插槽可用于提供您想要的任何类型的自己的链接。 如果您不使用该插槽，则默认message为： We use cookies to ensure you get the best experience on our website. 。

SASS结构 (SASS Structure)

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

发展历程 (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/

带按钮的图片横幅广告