这是最近看到的一个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>

插件参数

名称类型默认值说明
urlStringcurrent分享的url
titleString-分享的标题
descriptionString-分享的描述
quoteString-facebook的quote,只有facebook使用
hashtagsString-标签,用逗号分割
twitter-userString-Twitter user,只有twitter使用
mediaString-多媒体链接,只有Pinterest 使用

事件

名称数据描述
social_shares_openNetwork object, shared url当分享弹出框打开时触发
social_shares_changeNetwork object, shared url当已有分享弹出框打开,用户又触发一个分享弹出框时触发
social_shares_closeNetwork object, shared url当分享弹出框关闭或使用其它分享弹出框时触发

参考地址:轮子工厂

GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐