4/23 复制链接、微信扫码分享、微博，qq及空间的分享组件

实现点击复制链接功能

使用插件vue-clipboard2 实现剪切板的功能

1.安装
npm install --save vue-clipboard2

2.在main.js中引入

import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);

3.应用
html

 <a  class ="shareicon" v-clipboard:copy="href" v-clipboard:success="onCopy" v-clipboard:error="onCopyError" ><img src="../assets/link.svg"/></a>

script

export default {computed:{href(){if (typeof window !== 'undefined') {return  window.location.href}}},methods:{onCopy(){alert("复制成功")},onCopyError(){alert("复制失败")}}
}

实现微信扫码分享及二维码下载

1.应用

<template><div><div class="hello"><!-- 复制链接 --><a  class ="shareicon" v-clipboard:copy="href" v-clipboard:success="onCopy" v-clipboard:error="onCopyError" ><img src="../assets/link.svg"/></a><!-- 微博分享 --><a  class ="shareicon" @click = "shareTo('sina')" ><img src="../assets/wbicon.jpeg" ></a><!-- 微信分享 --><a  class ="shareicon" @click = "shareTo('wechat')" ><img src="../assets/wxicon.jpg" ></a></div><ShareCode :isAlert="isAlert" :url="href" @alertBack="alertBackFn" ></ShareCode></div>
</template>
<script>
import ShareCode from "./ShareCode.vue"
export default {name: 'HelloWorld',components:{ShareCode},data () {return {msg: 'Welcome to Your Vue.js App',title:"微博分享时候的title",isAlert:false}},computed:{href(){if (typeof window !== 'undefined') {return  window.location.href}}},methods:{onCopy(){alert("复制成功")},onCopyError(){alert("复制失败")},shareTo(type){if(type ==="sina"){let flink = ""if(type=='sina' && typeof window !== 'undefined'){window.open('http://service.weibo.com/share/share.php?url='+document.location.href+'?sharesource=weibo&title='+this.title+'&pic='+flink+'&appkey=2706825840');}}if(type == "wechat"){this.isAlert = true;}},alertBackFn(){this.isAlert = false}}
}
</script>
<style scoped >
.hello{width:200px;height:100px;position: absolute;overflow: auto;margin: auto;top: 0;left: 0;right: 0;bottom: 0;background: red;
}
.shareicon{width:22px;height:22px;margin: 0 5px!important;cursor:pointer;
}
.shareicon img{width:25px;height: 25px;
}
</style>

二维码组件ShareCode

点击微信icon后弹出的遮罩层，可以生成二维码及下载二维码

1.安装 vue-qr二维码插件

npm install vue-qr --save

2.应用

<template><div ><div id="mask"   v-if="isAlert"> <div style="width:300px ;background:white; position:relative; padding:30px;"><p style="color:black ;text-align:center; width:100%"> 微信分享二维码 </p><p  @click="alertBackFn"  class=" close"><svg style="width:24px;height:24px;" viewBox="0 0 24 24"><path fill="currentColor" d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z" /></svg></p><div><vue-qr ref="Qrcode"  :text="downloadData.url"   colorDark="#f67b29"  :margin="10" colorLight="#fff" :logoSrc="downloadData.icon " :logoScale="0.2"  :size="200" ></vue-qr>  <p><!-- 下载二维码图片 --><a  :href="exportLink"   @click="downloadImg"  :download="downloadFilename">下载二维码</a></p></div></div></div></div>
</template>
<script>
import vueQr from 'vue-qr'// 二维码组件
export default {components: {vueQr },props:['url',"isAlert"],data() {return {downloadData: {url: 'https://cn.vuejs.org/',icon: require('../assets/logo.png'),},exportLink:"",downloadFilename:""};},methods: {alertBackFn(){this.$emit('alertBack');},downloadImg () {let Qrcode = this.$refs.Qrcodethis.exportLink = Qrcode.$el.currentSrcthis.downloadFilename = '二维码'}},
};
</script>
<style >#mask{display:flex;justify-content: center;align-items: center;position: fixed;top:0;left:0;z-index:50;width:100%;height: 100%;background: rgba(0,0,0,0.5);}.close{position:absolute ;right:20px;top:0px;color:rgba(59,130,246,0.5);   }.close :hover{color:rgba(59,130,246); }
</style>

vue-qr 常用属性介绍

text 二维码内容
size 二维码宽高大小，因为是正方形，所以设一个参数即可
margin 默认边距20px，
colorDark 实点的颜色，注意和colorLight一起设置才有效
colorLight 空白的颜色，注意和colorDark一起设置才有效
bgSrc 嵌入背景图地址
logoSrc 二维码中间的图片
logoScale 中间图的尺寸，不可以设太大的值否则会导致扫码失败
dotScale 小点点的大小，不建议设置

微博分享的参数

链接:

http://service.weibo.com/share/share.php?title=‘分享标题’&url=‘分享链接’…等参数

其他参数：

count：表示是否显示当前页面被分享数量(1显示)(可选，允许为空)
url, ：将页面地址转成短域名，并显示在内容文字后面。(可选，允许为空)
appkey ：用于发布微博的来源显示，为空则分享的内容来源会显示来自互联网。(可选，允许为空)
title : 分享时所示的文字内容，为空则自动抓取分享页面的title值(可选，允许为空)
pic: 自定义图片地址，作为微博配图(可选，允许为空)
ralateUid: 转发时会@相关的微博账号(可选，允许为空)
language: 语言设置(zh_cn|zh_tw)(可选)

4/23 复制链接、微信扫码分享、微博，qq及空间的分享组件相关推荐

SpringSecurity OAuth2实现单点登录,微信扫码登录,Redis缓存验证码---入门到实战
1. 认证授权 1.1 什么是认证授权例如课程发布后用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间学习什 ...
微信扫码登录功能实现
原因:很简单,公司的账号登录需要用到微信扫码登录与QQ的登录功能,所以,在做好了微信的扫码登录之后,本人就写这篇微信扫码登录功能实现的教程教程开始需要用到的网站: https://open.wei ...
微信扫码赚钱是什么意思
最近流行微信扫码赚钱,那么,微信扫码是什么意思呢?其实,微信扫码,只要用微信扫二维码就可以赚钱的意思了.下面,具体与大家谈下微信扫描二维码赚钱. 微信扫码赚钱是今年新流行的一个词,具体的微信扫码赚钱是 ...
微信小程序官方调整头像昵称获取问题；微信扫码链接wifi，wifi地推，两种可行的解决方案
微信小程序官方调整头像昵称获取问题:微信扫码链接wifi,wifi地推更新时间:2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访 ...
帝国CMS7.5微信扫码登录插件帝国cms插件分享
帝国CMS7.5微信扫码登录插件. 使用教程如下步骤一.申请微信登录接口 1,获取:AppID,AppSecret .记住微信开放平台的AppID,AppSecret 和微信公众平台的AppID,A ...
企业实战, java、spingboot微信扫码支付，页面生成微信二维码，微信扫码付款，websocket通知，处理订单！复制粘贴代码直接开干
一功能描述: 前端选择商品后生成二维码,用户微信扫码支付备注: 红色为后台给前端的接口 1.前端选择确认商品 2.调后台生成订单接口 (状态未付款) 3.返回订单的详情(订单确认页面 ...
Spring学习笔记（二十三）——实现网站微信扫码登录获取微信用户信息Demo
目录微信扫码登录介绍开发步骤微信扫码登录示例微信开放文档遇到的问题使用第三方工具实现网站微信扫码登录开发前介绍开发步骤微信扫码登录获取微信用户信息Demo实现流程实现效果实现过程 ...
微信开放平台开发——网页微信扫码登录（OAuth2.0）
1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...
微信扫码登录超详细教程
一.OAuth2 1.OAuth2介绍 2.OAuth2解决什么问题 (1)OAuth2提出的背景照片拥有者想要在云冲印服务上打印照片,云冲印服务需要访问云存储服务上的资源.(2)图例资源 ...

4/23 复制链接、微信扫码分享、微博，qq及空间的分享组件

实现点击复制链接功能

实现微信扫码分享及二维码下载

微博分享的参数

4/23 复制链接、微信扫码分享、微博，qq及空间的分享组件相关推荐

最新文章

热门文章

4/23 复制链接、 微信扫码分享 、 微博，qq及空间的分享组件

实现点击复制链接功能

实现微信扫码分享及二维码下载

微博分享的参数

4/23 复制链接、 微信扫码分享 、 微博，qq及空间的分享组件相关推荐

最新文章

热门文章

4/23 复制链接、微信扫码分享、微博，qq及空间的分享组件

4/23 复制链接、微信扫码分享、微博，qq及空间的分享组件相关推荐