vue-social-sharing社交分享组件

最新推荐文章于 2025-04-15 11:18:28 发布

weixin_33725722

最新推荐文章于 2025-04-15 11:18:28 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack ViewUI

原文链接：https://segmentfault.com/a/1190000010161715

这是一个介绍Vue社交分享组件的博客，该组件支持多种社交平台的分享功能，如Facebook、Google+等。安装简单，可通过NPM、Yarn或Bower进行安装。使用方式包括Browserify/Webpack加载组件库和HTML加载组件库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是最近看到的一个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	当分享弹出框关闭或使用其它分享弹出框时触发

参考地址：轮子工厂