Vue确认和取消提示框（vue-cookie-accept-decline）

演示  website 下载

介绍

vue-cookie-accept-decline是一款标准的Vue Cookie通知显示文本组件，有通过cookie来进行记录接受和拒绝选择是否显示文本。可用于页面弹窗提示，记住后不再提示。

使用方法

<!-- css import for when you want to import the component css into your css file/files  -->
@import '/path/to/node_modules/vue-cookie-accept-decline.css';

<!-- css import for when you're importing the css directly in your js  -->
import 'vue-cookie-accept-decline/dist/vue-cookie-accept-decline.css'

import VueCookieAcceptDecline from 'vue-cookie-accept-decline'
Vue.component('vue-cookie-accept-decline', VueCookieAcceptDecline)
<vue-cookie-accept-decline
    :ref="'myPanel1'"
    :elementId="'myPanel1'"
    :debug="false"
    :position="'bottom-left'"
    :type="'floating'"
    :disableDecline="false"
    :transitionName="'slideFromBottom'"
    :showPostponeButton="false"
    @status="cookieStatus"
    @clicked-accept="cookieClickedAccept"
    @clicked-decline="cookieClickedDecline">

    <!-- Optional -->
    <div slot="postponeContent">
        &times;
    </div>

    <!-- Optional -->
    <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>

    <!-- Optional -->
    <div slot="declineContent">
       OPT OUT
    </div>

    <!-- Optional -->
    <div slot="acceptContent">
        GOT IT!
    </div>
</vue-cookie-accept-decline>