Yandexの共有ブロックを実装できる「vue-yandex-share」

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/@cookieseater/[email protected]/dist/vue-yandex-share.min.js"></script>
<div id="app">
  <yandex-share :services="service" counter />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@cookieseater/[email protected]/dist/vue-yandex-share.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

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

li {
  margin: 8px 0;
}

Vue

const YandexShare = window['vueYandexShare']; 
new Vue({
  el: '#app',
  components: {
    'yandex-share':YandexShare,
  },
  data: {
    service: [
      'blogger',
      'delicious',
      'digg',
      'evernote',
      'facebook',
      'gplus',
      'linkedin',
      'lj',
      'moimir',
      'odnoklassniki',
      'pinterest',
      'pocket',
      'qzone',
      'reddit',
      'renren',
      'sinaWeibo',
      'skype',
      'surfingbird',
      'telegram',
      'tencentWeibo',
      'tumblr',
      'twitter',
      'viber',
      'vkontakte',
      'whatsapp',
    ]
  }
});