组件 this指向vue_一个Vue.js组件，用于共享指向社交网络的链接

组件 this指向vue

社交分享 (vue-social-sharing)

A Vue.js component for sharing links to social networks

一个Vue.js组件，用于共享指向社交网络的链接

For Vue.js prior to < V2 use vue-social-sharing v0.x

对于低于V2的Vue.js，请使用vue-social-sharing v0.x

For SSR and Vue.js 2 support use vue-social-sharing v2.x

对于SSR和Vue.js 2支持，请使用vue-social-sharing v2.x

View demo 查看演示 Download Source 下载源

安装 (Installation)

# Yarn
yarn add vue-social-sharing

# NPM
npm install --save vue-social-sharing

# Bower
bower install vue-social-sharing

用法 (Usage)

加载库 (Loading the library)

Browserify / Webpack (Browserify / Webpack)

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

Vue.use(SocialSharing);

HTML (HTML)

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

使用社交分享组件 (Using the social sharing component)

<social-sharing url="https://vuejs.org/"
                      title="The Progressive JavaScript Framework"
                      description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
                      quote="Vue is a progressive framework for building user interfaces."
                      hashtags="vuejs,javascript,framework"
                      twitter-user="vuejs"
                      inline-template>
  <div>
      <network network="email">
          <i class="fa fa-envelope"></i> Email
      </network>
      <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="line">
        <i class="fa fa-line"></i> Line
      </network>
      <network network="linkedin">
        <i class="fa fa-linkedin"></i> LinkedIn
      </network>
      <network network="odnoklassniki">
        <i class="fa fa-odnoklassniki"></i> Odnoklassniki
      </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="skype">
        <i class="fa fa-skype"></i> Skype
      </network>
      <network network="sms">
        <i class="fa fa-commenting-o"></i> SMS
      </network>
      <network network="telegram">
        <i class="fa fa-telegram"></i> Telegram
      </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>

可用属性 (Available properties)

List of available props to use in the component:

组件中可用的道具列表：

Prop	Data Type	Default	Description
url	String	current	URL to share.
title	String		Sharing title (when available).
description	String		Sharing description (when available).
quote	String		Facebook quote (Facebook only).
hashtags	String		A list of comma-separated hashtags (Twitter only).
twitter-user	String		Twitter user (Twitter only).
media	String		Url to a media (Pinterest only).

Struts	数据类型	默认	描述
url	串	当前	分享网址。
title	串		共享标题(如果有)。
description	串		共享说明(如果有)。
quote	串		Facebook报价(仅限Facebook)。
hashtags	串		逗号分隔的主题标签列表(仅适用于Twitter)。
twitter-user	串		Twitter用户(仅限Twitter)。
media	串		指向媒体(仅限Pinterest)。

可用事件 (Available events)

Events are emitted on the vue $root instance:

事件在vue $ root实例上发出：

Name	Data	Description
social_shares_open	Network object, shared url	Fired when a sharing popup is open
social_shares_change	Network object, shared url	Fired when the user open a new sharing popup while another is already open
social_shares_close	Network object, shared url	Fired when a sharing popup is closed or changed by another popup

名称	数据	描述
social_shares_open	网络对象，共享网址	打开共享弹出窗口时触发
social_shares_change	网络对象，共享网址	当用户打开一个新的共享弹出窗口而另一个已经打开时触发
social_shares_close	网络对象，共享网址	当共享弹出窗口关闭或被另一个弹出窗口更改时触发

You can listen to a vue-social-sharing $root event by using the following code:

您可以使用以下代码来监听vue-social-sharing $ root事件：

Vue.$root.$on('social_shares_open', function (network, url) {
  // your event code
});

And on the Local Vue-social-sharing instance:

在Local Vue-social-sharing实例上：

Name	Data	Description
open	Network object, shared url	Fired when a sharing popup is open
change	Network object, shared url	Fired when the user open a new sharing popup while another is already open
close	Network object, shared url	Fired when a sharing popup is closed or changed by another popup

名称	数据	描述
open	网络对象，共享网址	打开共享弹出窗口时触发
change	网络对象，共享网址	当用户打开一个新的共享弹出窗口而另一个已经打开时触发
close	网络对象，共享网址	当共享弹出窗口关闭或被另一个弹出窗口更改时触发

You can listen to a vue-social-sharing local event by using the following code:

您可以使用以下代码来收听vue-social-sharing本地事件：

<some-component>
    <social-sharing @open="open()" @change="change()" @close="close()">
    </social-sharing>
</some-component>

Note that the social_shares_close event is not fired for the Whatsapp, SMS and Email sharers.

请注意，不会为Whatsapp，SMS和电子邮件共享者触发social_shares_close事件。

扩展网络列表 (Extending the network list)

Since version 2.3.1 you can extend and override the list of available networks. You can see a working example of the feature in the examples/vue2-example.html file:

从2.3.1版开始，您可以扩展和覆盖可用网络列表。 您可以在examples/vue2-example.html文件中看到该功能的有效examples/vue2-example.html ：

<social-sharing ...:networks="overriddenNetworks" inline-template>
    <div>
        <network network="custom">
            Custom network
        </network>
    </div>
</social-sharing>

<script>
    ...
    
    new Vue({
      data: {
        overriddenNetworks: {
          "custom": {
            "sharer": "https://mycustomdomain.com",
            "type": "popup"
          },
        }
      }
    });
</script>

There are two available network types:

有两种可用的网络类型：

Type	Effect
popup	Open the sharing link in a new popup
direct	Open directly the sharing link (suitable for mobile apps sharing, emails, sms, ...)

类型	影响
popup	在新的弹出窗口中打开共享链接
direct	直接打开共享链接(适用于移动应用程序共享，电子邮件，短信等)

翻译自: https://vuejsexamples.com/a-vue-js-component-for-sharing-links-to-social-networks/

组件 this指向vue