vue项目引入社交分享插件
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 |
vue项目引入社交分享插件的更多相关文章
- vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)
1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...
- vue 项目引入字体报错
vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url
- 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示
在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...
- 实战:vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...
- 15 款 jQuery 社交分享插件
过去几年中社交媒体越来越流行了,能够分享音乐.视频.图像甚至是其他的 docs 文档到互联网上去,这样子还能够提高页面的点击量.通常,一些社交媒体插件都能允许你的用户分享你网站上的内容到其他的社交平台 ...
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
- vue项目引入element
前提工作-安装并配置好以下环境: 1.安装node 2.安装git 1.初始化项目 vue init webpack vue-elementui npm run dev 2.安装element np ...
- 【vue】vue项目引入 Element-UI
根据vue项目的搭建教程,接下来记录下如何在Vue-cli创建的项目中引入Element-UI. 1.安装直接用命令 (推荐) npm install element-ui 2.直接在根目录下的pac ...
- vue项目引入bootstrap正确姿势
vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...
随机推荐
- 使用c:forEach 控制5个换行
今天做项目的时候碰到一个问题,我须要显示不确定数目的图片在网页上(图片是从数据库查出来的),用的是<c:forEach>循环取值的.就须要做成一行显示固定个数的图片.代码例如以下(我这里是 ...
- mybatis启动报错Result Maps collection already contains value forxxx
ssm搭建过程中启动tomcat,报错: Cause: java.lang.IllegalArgumentException: Result Maps collection already conta ...
- HDUOJ---1171
http://acm.hdu.edu.cn/showproblem.php?pid=1171 Big Event in HDU Time Limit: 10000/5000 MS (Java/Othe ...
- MNIST数据集和IDX文件格式
MNIST数据集 MNIST数据集是Yan Lecun整理出来的. NIST是美国国家标准与技术研究院(National Institute of Standards and Technology)的 ...
- Windows CMD常用命令大全 运行命令
http://blog.163.com/lixunhuan@126/blog/static/122060620075124142658/ CMD命令大全 net use \\ip\ipc$ " ...
- 修改注册表值解决ie被恶意窜改的问题
修改注册表值解决ie被恶意窜改的问题 IE消失 运行—Regedit 主键HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\HideDes ...
- C# 采用钩子捕获键盘和鼠标事件-验证是否处于无人操作状态
原文地址:https://www.cnblogs.com/gc2013/p/4036414.html 全局抽象类定义 using System; using System.Collections.Ge ...
- DataGridView合并单元格(多行多列合并)
一.点击在拖入的显示控件(TreeList)右上方的箭头,在Treelist任务中选择数据源,添加项目数据源,依次选择数据库.数据集,新建连接,浏览选择数据库(*.mdb),依次点击 下一步,选择“表 ...
- Python 元组 max() 方法
描述 Python 元组 max() 方法返回元组中元素最大值. 语法 max() 方法语法: max(T) 参数 T -- 指定的元组. 返回值 返回元组中元素最大值. 实例 以下实例展示了 max ...
- Android-SQLiteOpenHelper
Android-SQLiteOpenHelper 一 概念 是对SOLiteDatabase的封装.主要用于建立和版本号控制,方便我们去建立库表结构 二 用法 又一次封装一个MySqliteOpenH ...