カバの樹

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

  • 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.js

vuejs-datepickerで土日を強調表示する
「Vuelidate」でVue.js専用のバリデーションを実装する

vue.js

「Vuelidate」でVue.js専用のバリデーションを実装する

Card UI Components vue.js ライブラリ

Vue.jsでコンテンツコンテナーを実装する「vue-smart-widget」

Miscellaneous UI Components vue.js ライブラリ

Vue.jsで画像リストに選択機能を実装する「vue-select-image」
フォーム入力を補助する「vue-text-mask」の使い方 66

vue.js

フォーム入力を補助する「vue-text-mask」の使い方
横スクロールにドラッグできるカレンダー「vue-draggableCal」

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

横スクロールにドラッグできるカレンダー「vue-draggableCal」
PREV
自動でページの目次を作成する「vue-side-catalog」
NEXT
上下左右からDrawerコンポーネント「vue-simple-drawer」

管理人のコメント

Electronが面白くて全然ブログ更新できてない・・・なお次はStable diffusionをお触りする模様(2023.03.13)

検索

新着記事

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

Vue3で簡単にDate Time Pickerを実装!「Vue Datepicker」の使い方

2023/3/17

PHP vue.js

テキストエリアのPOST値を直接Vueのdataに渡すとエラーになる

2023/2/24

PHP

PHPで作るTeamsへの通知Bot

2023/2/22

Electron React

[Electron]wait-onでlocalhostを使うと待機状態が永遠に続く

2023/2/7

EC-CUBE

[EC-CUBE4系]受注一覧を注文日で並び替えする

2023/2/2

よく読まれる記事

まだデータがありません。

最近のコメント

  • 高機能なセレクトボックス「vue-select」の使い方 に K より
  • 高機能なセレクトボックス「vue-select」の使い方 に カバノキ より
  • 高機能なセレクトボックス「vue-select」の使い方 に K より
  • 高機能なセレクトボックス「vue-select」の使い方 に カバノキ より
  • 高機能なセレクトボックス「vue-select」の使い方 に K より

目次

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

カバの樹

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

© 2023 kabanoki.net