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> --><divclass="BJ_WX"@mouseover="showQR = true"@mouseleave="showQR = false"><div class="weixinall"><a class="weixin" /><a>微信</a></div><divclass="weixincode":class="{ 'qrcode-visible': showQR }"style="position: absolute;top: -220px;opacity: 0;transition: opacity 0.3s ease;width: 200px;height: 200px;background-color: #fff;"><canvasid="QRCode_header"style="width: 165px; height: 165px; margin: auto"/><pstyle="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>
效果
)
