vue專案引入社交分享外掛
阿新 • • 發佈:2018-11-20
vshare
基於百度分享開發的支援VUE2.X的分享外掛,為您帶來更多的流量!提供多種風格按鈕,程式碼載入更快,引入社會化流量,提升網頁抓取速度等優點。
github地址:https://github.com/1006008051/vshare,歡迎star。
安裝
npm install vshare -S
使用
注入
// ES6
import vshare from 'vshare'
//or requirevar 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 |