带按钮的图片横幅广告_显示带有文字的横幅记住使用cookie的选择

带按钮的图片横幅广告

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要求。

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:

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

<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)

prop	type	default	possible values	description
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	类型	默认	可能的值	描述
调试	布尔值	假	真假	如果为true，则永远不会保存cookie，只会发出事件。
位置	串	底部	底部，顶部	横幅的位置
transitionName	串	slideFromBottom	slideFromBottom，slideFromTop，淡入淡出	横幅动画类型

大事记 (Events)

event	value	description
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.

事件	值	描述
状态	'接受'，'拒绝'，null	创建组件时将发出事件。
clickedAccept	没有	单击横幅上的接受，将发出事件。
clickedDecline	没有	单击横幅上的拒绝按钮时，将发出事件。

信息槽 (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/

带按钮的图片横幅广告