Vue.js上的社交网络共享按钮组件

社交分享 (vue-share-social)

Social NetWorking Share Button Components on Vue.js.

Vue.js上的社交网络共享按钮组件。

用法 (Usage)

install

安装

$ npm install vue-share-social

or

要么

$ yarn add vue-share-social

※ Transpile Build And node-sass, sass-loader Required. (ex: webpack, babel)

※Transpile Build和node-sass ， sass-loader必需的。 (例如：webpack，babel)

添加插件 (Add Plugin)

import Vue from 'vue'
import VueShareSocial from 'vue-share-social'

Vue.use(VueShareSocial)

or

要么

使用组件 (Use Component)

常见道具 (Common Props)

props	default	description
url	current url	shared url
windowWidth	640	popup window width
windowHeight	640	popup window height
size	m	button size at s, m, l
type	circle	button type at circle, square, rounded
elevation	5	the height of the button shadow in the range of 1 to 10

道具	默认	描述
网址	当前网址	共享网址
windowWidth	640	弹出窗口宽度
windowHeight	640	弹出窗口高度
尺寸	米	按键尺寸为s，m，l
类型	圈	圆形，正方形，圆形的按钮类型
海拔	5	按钮阴影的高度在1到10的范围内

Twitter和Hatena道具 (Twitter And Hatena Props)

props	default	description
title	-	shared title

道具	默认	描述
标题	--	共享标题

共享按钮上的图案 (Pattern On Share Button)

• Facebook Share

  脸书分享

• Twitter Like

  Twitter喜欢

• GooglePlus Share

  GooglePlus分享

• Hatena Blog Share

  Hatena博客分享

• Line Like

  像线

<template>
  <div>
    <ShareFacebook url="http://recruit.istyle.co.jp/career/"/>
    <ShareTwitter url="http://recruit.istyle.co.jp/career/"/>
    <ShareGooglePlus url="http://recruit.istyle.co.jp/career/"/>
    <ShareHatena url="http://recruit.istyle.co.jp/career/"/>
    <ShareLine url="http://recruit.istyle.co.jp/career/"/>
  </div>
</template>

<script>
import { ShareFacebook, ShareTwitter, ShareGooglePlus, ShareHatena, ShareLine } from 'vue-share-social'

export default {
  components: {
    ShareFacebook,
    ShareTwitter,
    ShareGooglePlus,
    ShareHatena,
    ShareLine
  }
}
</script>

翻译自: https://vuejsexamples.com/social-networking-share-button-components-on-vue-js/