码迷,mamicode.com
首页 > 其他好文 > 详细

大灰狼

时间:2019-12-25 23:48:34      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:from   pup   modules   share   nbsp   body   widget   type   html   

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

大灰狼

标签:from   pup   modules   share   nbsp   body   widget   type   html   

原文地址:https://www.cnblogs.com/lijianming180/p/12099607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!