脚本宝典收集整理的这篇文章主要介绍了vue-social-sharing社交分享组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
这是最近看到的一个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 | 当分享弹出框关闭或使用其它分享弹出框时触发 |
参考地址：轮子工厂
以上是脚本宝典为你收集整理的vue-social-sharing社交分享组件全部内容，希望文章能够帮你解决vue-social-sharing社交分享组件所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。