大灰狼


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

2、引用到main.js中


import SocialSharing from 'vue-social-sharing' //引入

Vue.use(SocialSharing);  //注册

3、修改文件

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

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

// 第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、在你需要展示的文件中引入

<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

vue-social-sharing 社交化组件

1、安装vue-social-sharing

2、引用到main.js中

3、修改文件

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

猜你喜欢

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