Vue中Share.js分享组件
Share.js是一款一键转发工具,它可以一键分享到新浪微博、微信、QQ空间、QQ好友、腾讯微博、豆瓣、Facebook组件、Twitter、Linkedin、Google+、点点等社交网站,使用字体图标。
以下步骤可以实现微博和微信分享
(1)修改test.vue的脚本部分。以下代码用于引入外部的js .我们这里的js采用cdn方式引入 地址为:
https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js
所需要的样式: https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css
head: {script: [{ src: 'https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js' }],link: [{ rel: 'stylesheet', href: 'https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css' }]}
(2)修改pages/gathering/_id.vue的页面部分,在合适的位置添加分享按钮
<div class="social-share" data-sites="weibo,wechat" data-url="地址" :data-title="分享标题">
</div>
选项:
url : '', // 网址,默认使用 window.location.href
source : '', // 来源(QQ空间会用到), 默认读取head标签:<meta name="site" content="http://overtrue" />
title : '', // 标题,默认读取 document.title 或者 <meta name="title" content="share.js" />
description : '', // 描述, 默认读取head标签:<meta name="description" content="PHP弱类型的实现原理分析" />
image : '', // 图片, 默认取网页中第一个img标签
sites : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 启用的站点
disabled : ['google', 'facebook', 'twitter'], // 禁用的站点
wechatQrcodeTitle : '微信扫一扫:分享', // 微信二维码提示文字
wechatQrcodeHelper : '<p>微信里点“发现”,扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
以上选项均可通过标签 data-xxx
来设置
Vue中Share.js分享组件相关推荐
- class根据状态 vue_搞懂并学会运用 Vue 中的无状态组件
啥是应用程序状态,为什么咱们需要它? 状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了.简单的说,状态是一个包含应用程序使用的最新值的对象.但是,如果咱们从结构 ...
- 有关QJ_Filecenter在vue中的使用和组件封装
有关QJ_Filecenter在vue中的使用和组件封装 QJ_FileCenter在vue中的使用和组件封装 安装 第一步:在官网下载QJ_FileCenter安装包 第二部:访问FileCente ...
- vue中,右键菜单组件v-contextmenu的使用
vue中,右键菜单组件v-contextmenu的使用 1.效果 右键菜单之禁用和子菜单 2.流程 第一步:安包 npm install v-contextmenu --save-dev npm in ...
- Vue中如何扩展⼀个组件
Vue中如何扩展⼀个组件 按照逻辑扩展和内容扩展来列举: 逻辑扩展有:mixins.extends.composition api: 内容扩展有: slots: 一.Mixin 组件和组件之间有时候会 ...
- vue中使用baidushare分享到微信无法显示bug解决方案
vue中使用baidushare分享到微信无法显示bug解决方案 参考文章: (1)vue中使用baidushare分享到微信无法显示bug解决方案 (2)https://www.cnblogs.co ...
- Vue中的Js动画与Velocity.js 的结合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- [vue] vue中什么是递归组件?举个例子说明下?
[vue] vue中什么是递归组件?举个例子说明下? 组件自己调用自己,场景有用于生成树形结构菜单 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主 ...
- vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
- vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
最新文章
- b2b2c源码 java_java B2B2C源码电子商务平台 ---搭建Eureka注册中心
- modal ajax,在Modal中调用Vue.js AJAX
- 交换esc和左ctrl ;caps lock与右ctrl
- python基础7 (来自廖雪峰的官方网站)
- DNN Module PictureGallery 效果图
- 湖人豪华助教团散伙 德帅身边恐仅剩两名帮手
- MySQL数据库最大连接数
- curl上传图片的大坑
- php求圆柱体积,认识圆柱体a href=http://ruiwen.com/friend/list.php(教师中心专稿)/a -- 小学数学教学资源网...
- 中文转拼音【真正的完整版】 拼音 驼峰命名专用
- CentOS-8 dnf 前端工具学习笔记
- 焦作大学对口计算机分数线,焦作大学录取分数线|2021焦作大学分数线|2021年焦作大学高考分数线|2021年焦作大学招生计划录取人数...
- 浅谈OA系统与BPM系统的差异化
- qq邮件如何设置html阅读,使用qq邮箱发送html格式的邮件
- Pycharm中光标变粗 光标进入改写状态
- 十二时辰和人体经络图文
- UE5 官方案例Lyra全特性详解 6.生成防御塔
- 下载频道--IT资源关东煮第三期
- 江西省计算机专业好的二本大学排名,2017年江西二本大学排名榜单
- GLU(Gated Linear Units)