カバの樹

忘れないように記録しとこ

  • TOP
  • このサイトについて
  • vue.js
    • ライブラリ
      • UI Components
      • UI Layout
      • UI Utilities
      • Utilities
    • まとめ
  • WordPress
  • CodeIgniter
  • お問い合わせ
  1. TOP >
  2. vue.js >
  3. ライブラリ >
  4. UI Components >
  5. Social Sharing >

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

2020年2月26日

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

目次

  • vue-yandex-shareとは
  • 環境
  • インストール
  • 導入手順
  • さいごに

vue-yandex-shareとは

vue-yandex-shareは、Yandexの共有ブロックコンポーネントを実装できるライブラリです。

 

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

 

環境

Vue 2.6.10
vue-yandex-share 0.2.1

 

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm i @cookieseater/vue-yandex-share --save

CDN

<script src="https://cdn.jsdelivr.net/npm/@cookieseater/[email protected]/dist/vue-yandex-share.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/CookiesEater/vue-yandex-share/

 

導入手順

1. ライブラリの取り込み

(1)ES6等の場合 [注意]モジュール版は未検証です。

import YandexShare from '@cookieseater/vue-yandex-share';

(2)CDNの場合

const YandexShare = window['vueYandexShare']; 

2.メソッドを設定

YandexShareをcomponentsに取り込みます。

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',
    ]
  }
});

3. テンプレートを準備

<yandex-share> を設置します。

servicesプロパティに上記で作成したserviceを設定します。

 

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <yandex-share :services="service" counter />
</div>

 

サンプル

>>専用ページで確認する

 

さいごに

Yandexの共有ブロックコンポーネントを実装できるライブラリでした。

今日はこの辺でー

 

  • Twitter
  • Share
  • Pocket
  • Hatena
  • LINE
  • コピーする
  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Social Sharing, UI Components, vue.js, ライブラリ
-vue-yandex-share, Yandex, コンポーネント, ライブラリ

カバノキ


記事についての感想・質問 コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

関連記事

Vue用の最速の絵文字ピッカー「vue-twemoji-picker」

Date Picker Form UI Components vue.js ライブラリ

Vue用の最速の絵文字ピッカー「vue-twemoji-picker」
1万件でも100万件でも「vue-virtual-scroller」でリストをスクロールする

vue.js

1万件でも100万件でも「vue-virtual-scroller」でリストをスクロールする
「vue-stroll」で16種類の楽しいスクロールエフェクトを実装する

vue.js

16種類の楽しいスクロールエフェクトを「vue-stroll」で実装する
Vue.jsで組織図を描写する「vue-organization-chart」

Charts UI Components vue.js ライブラリ

Vue.jsで組織図を描写する「vue-organization-chart」

vue.js

データの変更に対して、v-bindやv-ifが反応しない時の対処法
「vue-qriously」でQRコードを作成する

vue.js

お手軽なQRコード作成ライブラリ「vue-qriously」で試す
PREV
自動でページの目次を作成する「vue-side-catalog」
NEXT
上下左右からDrawerコンポーネント「vue-simple-drawer」

管理人のコメント

後輩教育がポケモン育成みたいで楽しくなってきた。 (2022.06.13)

検索

新着記事

vue.js

Vue.js 3を使ってTableをカスタマイズしていく(基本)

2022/5/9

vue.js

Vue.js 3を使ってTableをカスタマイズしていく(まとめ)

2022/4/4

WordPress レンタルサーバー

CPIサーバーで「閲覧できません (Forbidden access)」と表示される

2022/3/15

Miscellaneous Overlay Switch UI Components vue.js ライブラリ

「Vue Cookie Law」で2022年4月の改正個人情報保護法にむけて準備しよう

2022/2/28

JavaScript jQuery

TinyMCEの文字サイズのデフォルト値を設定する方法

2022/1/26

よく読まれる記事

Vue.jsのdatepickerは「vuejs-datepicker」がおすすめ!
「Vue-good-table」で高機能なテーブルを実装する
「Vue-good-table」で高機能なテーブルを実装する
確認ダイアログを実装するなら「vuejs-dialog」がおすすめ!
Vue.jsで確認ダイアログを実装するなら「vuejs-dialog」がおすすめ!
CodeigniterでSessionを使おうとしたらエラーになった
カスタムスクロールバーを「vuescroll」で実装する
カスタムスクロールバーを「vuescroll」で実装する
画像の遅延読み込みを「Vue-Lazyload」で 簡単に実装する
[Laravel]JOINでサブクエリを使用する方法
「Vue Text Highlight」で検索ワードをhighlightする
ブラウザバックしてもページネーションを維持させる方法
ブラウザバックしてもページネーションを維持させる方法
Timepicker系ライブラリ「Wickedpicker」を使ってみた

最近のコメント

  • PhpSpredsheetを使ってセルにコメントを設定する に カバノキ より
  • PhpSpredsheetを使ってセルにコメントを設定する に 本田 より
  • Canvasに「戻る」や「進む」の機能を搭載してみた に カバノキ より
  • Canvasに「戻る」や「進む」の機能を搭載してみた に ozawa より
  • Vue.jsでドラッグ&ドロップするなら「Vue.Draggable」がおすすめ に カバノキ より

目次

  • vue-yandex-shareとは
  • 環境
  • インストール
  • 導入手順
  • さいごに
  • TOP
  • プライバシーポリシー
  • このサイトについて
  • お問い合わせ

カバの樹

忘れないように記録しとこ

© 2022 kabanoki.net