vue分享插件

vshare

基於百度分享開發的支持VUE2.X的分享插件,爲您帶來更多的流量！提供多種風格按鈕，代碼加載更快，引入社會化流量，提高網頁抓取速度等優勢。
github地址:https://github.com/1006008051/vshare，歡迎star。

安裝

npm install vshare -S

使用

注入

// ES6
import vshare from 'vshare'
//or require
var vshare = require('vshare')

Vue.use(vshare)

組件使用

<vshare></vshare>

默認展現

配置

// 組件
<vshare
  :vshareConfig="vshareConfig"
>
</vshare>
// 數據
data () {
  vshareConfig: {
          shareList: [
            // 此處放分享列表（ID）
          ],
          common : {
            //此處放置通用設置
          },
          share : [{
            //此處放置分享按鈕設置
            }
          ],
          slide : [
            //此處放置浮窗分享設置
          ],
          image : [
            //此處放置圖片分享設置
          ],
          selectShare : [
            //此處放置劃詞分享設置
          ]
        }
}

vshareConfig

shareList

配置項名稱	說明	類型	可選值	默認值
----	此處放分享列表（ID）	array	mshare（一鍵分享 ） qzone（QQ空間） tsina（新浪微博 ） renren（人人網 ） tqq（騰訊微博 ） bdxc（百度相冊 ） kaixin001（開心網 ） tqf（騰訊朋友 ） tieba（百度貼吧 ） douban（豆瓣網 ） tsohu（搜狐微博 ） bdhome（百度新首頁 ） sqq（QQ好友 ） thx（和訊微博 ） bdysc（百度雲收藏 ） meilishuo（美麗說 ） mogujie（蘑菇街 ） diandian（點點網 ） huaban（花瓣 ） duitang（堆糖 ） hx（和訊 ） fx（飛信 ） youdao（有道雲筆記 ） sdo（麥庫記事 ） qingbiji（輕筆記 ） people（人民微博 ） xinhua（新華微博 ） mail（郵件分享 ） isohu（個人搜狐 ） yaolan（搖籃空間 ） wealink（若鄰網 ） ty（天涯社區 ） fbook（Facebook ） twi（Twitter） linkedin（linkedin） copy（複製網址 ） print（打印 ） ibaidu（百度我的中心 ） weixin（微信 ） iguba（股吧 ）	[‘more’, ‘qzone’, ‘tsina’, ‘tqq’, ‘renren’, ‘weixin’]

common

配置項名稱	說明	類型	可選值	默認值
bdText	分享的內容	string	自定義
bdDesc	分享的摘要	string	自定義
bdUrl	分享的Url地址	string	自定義
bdPic	分享的圖片	string	自定義
bdSign	‘on’: 默認值，使用正常方式掛載迴流簽名（#[數字簽名]）‘off’: 關閉數字簽名，不統計迴流量’normal’: 使用&符號鏈接數字簽名，不破壞原始url中的#錨點	string	on off normal
bdMini	下拉浮層中分享按鈕的列數	int	1 2 3
bdMiniList	自定義下拉浮層中的分享按鈕類型和排列順序。	array	同shareList
onBeforeClick	在用戶點擊分享按鈕時執行代碼，更改配置。cmd爲分享目標id，config爲當前設置，返回值爲更新後的設置。	function	function(cmd,config){}
onAfterClick	在用戶點擊分享按鈕後執行代碼，cmd爲分享目標id。可用於統計等。	function	function(cmd){}
bdPopupOffsetLeft	下拉浮層的y偏移量	int	正｜負數
bdPopupOffsetTop	下拉浮層的x偏移量	int	正｜負數

share

配置項名稱	說明	類型	可選值	默認值
tag	表示該配置只會應用於data-tag值一致的分享按鈕。若是不設置tag，該配置將應用於全部分享按鈕。	string	與data-tag一致
bdSize	分享按鈕的尺寸	int	16 24 32
bdCustomStyle	自定義樣式，引入樣式文件	string	樣式文件地址

slide （如不須要不傳參數或者傳false）

配置項名稱	說明	類型	可選值	默認值
bdImg	分享浮窗圖標的顏色。	string	0 1 2 3 4 5 6 7 8
bdPos	分享浮窗的位置	string	left right
bdTop	分享浮窗與但是區域頂部的距離(px)	int

image（如不須要不傳參數或者傳false）

配置項名稱	說明	類型	可選值	默認值
tag	表示該配置只會應用於data-tag值一致的圖片。若是不設置tag，該配置將應用於全部圖片。	string	與data-tag一致
viewType	圖片分享按鈕樣式。	string	list collection
viewPos	圖片分享展現層的位置。	string	top bottom
viewColor	圖片分享展現層的背景顏色。	string	black white
viewSize	圖片分享展現層的圖標大小。	int	16 24 32
viewList	自定義展現層中的分享按鈕類型和排列順序。	array	同shareList

selectShare（如不須要不傳參數或者傳false）

配置項名稱	說明	類型	可選值	默認值
bdSelectMiniList	自定義彈出浮層中的分享按鈕類型和排列順序。	array	同shareList
bdContainerClass	自定義劃詞分享的激活區域。	string	myclassname