nuxt3网站文章分享微信 ,QQ功能
1.安装npm install qrcode --save-dev
2.组件利用
<div class="share">
<div style="line-height: 69px; color: #fff;width: 100px;">
<p style="text-align: center;">分享:</p>
</div>
<div @click="shareToMicroblog()" class="BJ_WB">
<a class="weibo" />
<a>微博</a>
</div>
<!-- <div @click="shareToQQ()" class="BJ_QQ">
<a class="qq"></a>
<a>QQ好友</a>
</div> -->
<div
class="BJ_WX"
@mouseover="showQR = true"
@mouseleave="showQR = false"
>
<div class="weixinall">
<a class="weixin" />
<a>微信</a>
</div>
<div
class="weixincode"
:class="{ 'qrcode-visible': showQR }"
style="
position: absolute;
top: -220px;
opacity: 0;
transition: opacity 0.3s ease;
width: 200px;
height: 200px;
background-color: #fff;
"
>
<canvas
id="QRCode_header"
style="width: 165px; height: 165px; margin: auto"
/>
<p
style="
color: #818181;
font-size: 12px;
line-height: 16px;
margin-left: 15px;
"
>
打开微信扫一扫<br />将您喜欢的内容分享微信朋友圈
</p>
</div>
</div>
<div class="BJ" @click="shareToQQRom()">
<a class="qqkj"></a>
<a>QQ</a>
</div>
</div>
<script setup lang="ts">
import QRCode from "qrcode";
const route = useRoute();
const id = ref(route.params.id);
const showQR = ref(false);
const shareUrl = `https://XXXXXXX.COM/XXXXXXXXXX/${id.value}`;
//分享到QQ
// const shareToQQ= function() {
// window.open(
// `https://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&title=${sysInfo}&source=${shareUrl}&desc=${sysInfo}&pics=`)
// }
//分享到微信
onMounted(() => {
const QR_OPTIONS = {
errorCorrectionLevel: "H",
width: 165,
height: 165,
margin: 3,
color: {
dark: "#000",
light: "#fff",
},
};
QRCode.toCanvas(
document.querySelector("#QRCode_header"),
shareUrl,
QR_OPTIONS,
(error: any) => {
if (error) console.error("二维码生成失败:", error);
}
);
});
//分享到微博
const shareToMicroblog = function () {
window.open(
`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${details.value.productBackground}`
);
};
//分享到qq空间
const shareToQQRom = function () {
const pics = encodeURIComponent(details.value.productBackgroundImage);
const desc = encodeURIComponent(details.value.productBackground);
window.open(
`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${shareUrl}&title=${details.value.productBackground}&summary=${details.value.productBackground}&desc=${desc}&pics=${pics}`
);
};
</script>
<style scoped lang="scss">
.share {
display: flex;
flex-wrap: nowrap;
width: 100%;
justify-content: center;
.weibo {
display: block;
width: 24px;
height: 21px;
background-image: url("/assets/img/wb.png") !important;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.BJ_WB {
background-color: #e6162d;
width: 110px;
height: 40px;
margin-top: 15px;
margin-right: 15px;
display: flex;
border-radius: 8px;
justify-content: center;
align-items: center;
color: #fff;
cursor: pointer;
&:hover {
background-color: #f75567;
transform: translateY(-2px);
}
}
.BJ_QQ {
background-color: #2384cc;
width: 110px;
height: 40px;
margin-top: 15px;
margin-right: 15px;
display: flex;
border-radius: 8px;
justify-content: center;
align-items: center;
color: #fff;
cursor: pointer;
&:hover {
background-color: #5faae2;
transform: translateY(-2px);
}
}
.BJ_WX {
background-color: #3cb034;
width: 110px;
height: 40px;
margin-top: 15px;
border-radius: 8px;
/* position: relative; */
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.2s;
color: #fff;
cursor: pointer;
&:hover {
background-color: #7dd377;
transform: translateY(-2px);
}
}
.BJ {
background-color: rgb(255, 206, 0);
width: 110px;
height: 40px;
display: flex;
border-radius: 8px;
justify-content: center;
align-items: center;
color: #fff;
margin: 15px;
cursor: pointer;
&:hover {
background-color: #ffde52;
transform: translateY(-2px);
}
}
.qq {
display: block;
width: 28px;
height: 28px;
background-image: url("/assets/img/qq.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.qqkj {
display: block;
width: 28px;
height: 28px;
background-image: url("/assets/img/qqkj.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.weixinall {
position: relative;
display: flex;
justify-content: center;
.weixin {
display: block;
width: 28px;
height: 28px;
background-image: url("/assets/img/wx.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.weixincode {
position: absolute;
left: -60px;
z-index: 1000 !important;
}
}
}
.qrcode-visible {
opacity: 1 !important;
pointer-events: auto;
}
</style>
效果
https://i-blog.csdnimg.cn/direct/68330a2eb46540e8915a559bf3caf6c3.png
https://i-blog.csdnimg.cn/direct/1847833068cb421ab89e44bb3be27b8f.png
https://i-blog.csdnimg.cn/direct/fe2735ddcd3f4b51aa8905b2cdaf56b5.png
https://i-blog.csdnimg.cn/direct/07ee2d74c7db49fc9e2f0eb48733d2bb.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]