1. 程式人生 > >vue專案引入社交分享外掛

vue專案引入社交分享外掛

vshare

markdown

基於百度分享開發的支援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>

預設展示

markdown

配置

// 元件
<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