实现点击复制链接功能
使用插件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.Qrcode
this.exportLink = Qrcode.$el.currentSrc
this.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)(可选)