大灰狼

vue-social-sharing 社交化组件

1、安装vue-social-sharing

1 2 3 4 5 6 7

//通过NPM安装 npm install --save vue-social-sharing //通过Yarn安装 yarn add vue-social-sharing //通过Bower安装 bower install vue-social-sharing

2、引用到main.js中

1 2 3 4

import SocialSharing from 'vue-social-sharing' //引入 Vue.use(SocialSharing); //注册

3、修改文件

在node_modules (你npm install生成的node环境依赖包) 文件夹中找到 [vue-social-sharing] 这个文件夹。

1、在vue-social-sharing.common.js 添加

1 2 3 4 5 6 7

// 第67行后边添加 var qqHome = {"sharer":"https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=www.baidu.com","type":"popup"}; var qq = {"sharer":"http://connect.qq.com/widget/shareqq/index.html?url=@url&title=@title&description=@description&image=@media&noparse=true","type":"popup"}; // 第87行后添加 qqHome: qqHome, qq: qq

2、vue-social-sharing.js 同vue-social-sharing.common.js

3、在networks.json中添加

大专栏  大灰狼an class="line">1 2 3 4 5 6 7 8 9 10

//第83行后 "qqHome": { "sharer": "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=@url&title=@title&description=@description&image=@media&noparse=true", "type": "popup" }, "qq": { "sharer": "http://connect.qq.com/widget/shareqq/index.html?url=@url&title=@title&description=@description&image=@media&noparse=true", "type": "popup" },

4、 在你需要展示的文件中引入

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<template> <div> <social-sharing url="https://vuejs.org/" inline-template> <div> <network network="weibo"> <i class="fa fa-weibo"></i> 微博 </network> <network network="qqHome"> <i class="fa fa-qqHome"></i> qq空间 </network> <network network="qq"> <i class="fa fa-qq"></i> qq </network> </div> </social-sharing> </div> </template