vue-social-sharing社交分享元件

AshleyLv發表於2017-07-12
Vue元件

這是最近看到的一個vue的社交分享元件。vue-social-sharing支援facebook，Google +，LinkedIn，Pinterest，Reddit，Twitter，VKontakte，Weibo，Whatsapp平臺的分享功能。使用也十分簡單。
這裡是Demo

安裝

通過NPM安裝
npm install --save vue-social-sharing
通過Yarn安裝
yarn add vue-social-sharing
通過Bower安裝
bower install vue-social-sharing

外掛應用

Browserify / Webpack載入元件庫

var SocialSharing = require(`vue-social-sharing`);

Vue.use(SocialSharing);

html載入元件庫

<script src="/dist/vue-social-sharing.min.js"></script>

使用元件

<social-sharing url="https://vuejs.org/" inline-template>
  <div>
      <network network="facebook">
        <i class="fa fa-facebook"></i> Facebook
      </network>
      <network network="googleplus">
        <i class="fa fa-google-plus"></i> Google +
      </network>
      <network network="linkedin">
        <i class="fa fa-linkedin"></i> LinkedIn
      </network>
      <network network="pinterest">
        <i class="fa fa-pinterest"></i> Pinterest
      </network>
      <network network="reddit">
        <i class="fa fa-reddit"></i> Reddit
      </network>
      <network network="twitter">
        <i class="fa fa-twitter"></i> Twitter
      </network>
      <network network="vk">
        <i class="fa fa-vk"></i> VKontakte
      </network>
      <network network="weibo">
        <i class="fa fa-weibo"></i> Weibo
      </network> 
      <network network="whatsapp">
        <i class="fa fa-whatsapp"></i> Whatsapp
      </network>
  </div>
</social-sharing>

外掛引數

名稱 型別 預設值 說明
url String current 分享的url
title String – 分享的標題
description String – 分享的描述
quote String – facebook的quote，只有facebook使用
hashtags String – 標籤，用逗號分割
twitter-user String – Twitter user，只有twitter使用
media String – 多媒體連結，只有Pinterest 使用

事件

名稱 資料 描述
social_shares_open Network object, shared url 當分享彈出框開啟時觸發
social_shares_change Network object, shared url 當已有分享彈出框開啟，使用者又觸發一個分享彈出框時觸發
social_shares_close Network object, shared url 當分享彈出框關閉或使用其它分享彈出框時觸發

參考地址：輪子工廠

相關文章