Vue

by kabanoki

HTML

<link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-cookie-accept-decline.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-cookie-accept-decline.umd.js"></script>
<div id="app">
  <div class="content">
    <div class="alert alert-secondary" role="alert">
      [Status]{{statusText}}
    </div>
    <button type="button" class="btn btn-primary btn-lg" @click="removeCookie">Cookieを削除</button>
  </div>
  <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"
    @clicked-postpone="cookieClickedPostpone"
    @removed-cookie="cookieRemovedCookie">
    <div slot="postponeContent">
        &times;
    </div>
    <div slot="message">
      クッキーを使用して、お客様が当社のウェブサイトで最高の体験を得られるようにします。<a href="https://cookiesandyou.com/" target="_blank">Learn More...</a>
    </div>
    <div slot="declineContent">
      拒否
    </div>
    <div slot="acceptContent">
      許可
    </div>
  </vue-cookie-accept-decline>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-cookie-accept-decline.umd.js"></script>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const VueCookieAcceptDecline = window['VueCookieAcceptDecline'].default;
Vue.component('vue-cookie-accept-decline', VueCookieAcceptDecline);
new Vue({
  el: '#app',
  data:{
    status: null
  },
  methods: {
    cookieStatus:function (status) {
        console.log('status: ' + status)
        this.status = status
    },
    cookieClickedAccept:function () {
        console.log('here in accept')
        this.status = 'accept'
    },
    cookieClickedDecline:function () {
        console.log('here in decline')
        this.status = 'decline'
    },
    cookieClickedPostpone:function () {
        console.log('here in postpone')
        this.status = 'postpone'
    },
    cookieRemovedCookie:function () {
        console.log('here in cookieRemoved')
        this.status = null
        this.$refs.myPanel1.init()
    },
    removeCookie:function () {
        console.log('Cookie removed')
        this.$refs.myPanel1.removeCookie()
    }
  },
  computed: {
    statusText:function () {
        return this.status || 'Cookieを使用していません'
    }
  }
});