nuxt3网站文章分享微信 ,QQ功能

1.安装
npm install qrcode --save-dev
2.组件利用

1.   
2.           <div class="share">
3.             <div style="line-height: 69px; color: #fff;width: 100px;">
4.               <p style="text-align: center;">分享:</p>
5.             </div>
7.             <div @click="shareToMicroblog()" class="BJ_WB">
8.               <a class="weibo" />
9.               <a>微博</a>
10.             </div>
12.             <!-- <div @click="shareToQQ()" class="BJ_QQ">
13.                 <a class="qq"></a>
14.                 <a>QQ好友</a>
15.               </div> -->
17.             <div
18.               class="BJ_WX"
19.               @mouseover="showQR = true"
20.               @mouseleave="showQR = false"
21.             >
22.               <div class="weixinall">
23.                 <a class="weixin" />
24.                 <a>微信</a>
25.               </div>
26.               <div
27.                 class="weixincode"
28.                 :class="{ 'qrcode-visible': showQR }"
29.                 style="
30.                   position: absolute;
31.                   top: -220px;
33.                   opacity: 0;
34.                   transition: opacity 0.3s ease;
35.                   width: 200px;
36.                   height: 200px;
37.                   background-color: #fff;
38.                 "
39.               >
40.                 <canvas
41.                   id="QRCode_header"
42.                   style="width: 165px; height: 165px; margin: auto"
43.                 />
44.                 <p
45.                   style="
46.                     color: #818181;
47.                     font-size: 12px;
48.                     line-height: 16px;
49.                     margin-left: 15px;
50.                   "
51.                 >
52.                   打开微信扫一扫<br />将您喜欢的内容分享微信朋友圈
53.                 </p>
54.               </div>
55.             </div>
57.             <div class="BJ" @click="shareToQQRom()">
58.               <a class="qqkj"></a>
59.               <a>QQ</a>
60.             </div>
61.           </div>

复制代码

1. <script setup lang="ts">
2. import QRCode from "qrcode";
3. const route = useRoute();
4. const id = ref(route.params.id);
5. const showQR = ref(false);
6. const shareUrl = `https://XXXXXXX.COM/XXXXXXXXXX/${id.value}`;
7. //分享到QQ
8. // const shareToQQ= function() {
9. //   window.open(
10. //       `https://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&title=${sysInfo}&source=${shareUrl}&desc=${sysInfo}&pics=`)
11. // }
12. //分享到微信
13. onMounted(() => {
14.   const QR_OPTIONS = {
15.     errorCorrectionLevel: "H",
16.     width: 165,
17.     height: 165,
18.     margin: 3,
19.     color: {
20.       dark: "#000",
21.       light: "#fff",
22.     },
23.    
24.   };
26.   QRCode.toCanvas(
27.     document.querySelector("#QRCode_header"),
28.     shareUrl,
29.     QR_OPTIONS,
30.     (error: any) => {
31.       if (error) console.error("二维码生成失败:", error);
32.     }
33.   );
34. });
36. //分享到微博
37. const shareToMicroblog = function () {
38.   window.open(
39.     `https://service.weibo.com/share/share.php?url=${shareUrl}&title=${details.value.productBackground}`
40.   );
41. };
43. //分享到qq空间
44. const shareToQQRom = function () {
45.   const pics = encodeURIComponent(details.value.productBackgroundImage);
46.   const desc = encodeURIComponent(details.value.productBackground);
47.   window.open(
48.     `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}`
49.   );
50. };
51. </script>

复制代码

1. <style scoped lang="scss">
2. .share {
3.   display: flex;
4.   flex-wrap: nowrap;
5.   width: 100%;
6.   justify-content: center;
7.   .weibo {
8.     display: block;
9.     width: 24px;
10.     height: 21px;
11.     background-image: url("/assets/img/wb.png") !important;
12.     background-size: cover;
13.     background-repeat: no-repeat;
14.     background-position: 50% 50%;
15.   }
17.   .BJ_WB {
18.     background-color: #e6162d;
19.     width: 110px;
20.     height: 40px;
21.     margin-top: 15px;
22.     margin-right: 15px;
23.     display: flex;
24.     border-radius: 8px;
25.     justify-content: center;
26.     align-items: center;
27.     color: #fff;
28.     cursor: pointer;
29.     &:hover {
30.       background-color: #f75567;
32.       transform: translateY(-2px);
33.     }
34.   }
36.   .BJ_QQ {
37.     background-color: #2384cc;
38.     width: 110px;
39.     height: 40px;
40.     margin-top: 15px;
41.     margin-right: 15px;
42.     display: flex;
43.     border-radius: 8px;
44.     justify-content: center;
45.     align-items: center;
46.     color: #fff;
47.     cursor: pointer;
48.     &:hover {
49.       background-color: #5faae2;
50.       transform: translateY(-2px);
51.     }
52.   }
54.   .BJ_WX {
55.     background-color: #3cb034;
56.     width: 110px;
57.     height: 40px;
58.     margin-top: 15px;
59.     border-radius: 8px;
60.     /* position: relative; */
61.     display: flex;
62.     justify-content: center;
63.     align-items: center;
64.     transition: transform 0.2s;
65.     color: #fff;
66.     cursor: pointer;
67.     &:hover {
68.       background-color: #7dd377;
69.       transform: translateY(-2px);
70.     }
71.   }
73.   .BJ {
74.     background-color: rgb(255, 206, 0);
75.     width: 110px;
76.     height: 40px;
77.     display: flex;
78.     border-radius: 8px;
79.     justify-content: center;
80.     align-items: center;
81.     color: #fff;
82.     margin: 15px;
83.     cursor: pointer;
84.     &:hover {
85.       background-color: #ffde52;
86.       transform: translateY(-2px);
87.     }
88.   }
90.   .qq {
91.     display: block;
92.     width: 28px;
93.     height: 28px;
94.     background-image: url("/assets/img/qq.png");
95.     background-size: cover;
96.     background-repeat: no-repeat;
97.     background-position: 50% 50%;
98.   }
99.   .qqkj {
100.     display: block;
101.     width: 28px;
102.     height: 28px;
103.     background-image: url("/assets/img/qqkj.png");
105.     background-size: cover;
106.     background-repeat: no-repeat;
107.     background-position: 50% 50%;
108.   }
110.   .weixinall {
111.     position: relative;
112.     display: flex;
113.     justify-content: center;
114.     .weixin {
115.       display: block;
116.       width: 28px;
117.       height: 28px;
118.       background-image: url("/assets/img/wx.png");
119.       background-size: cover;
120.       background-repeat: no-repeat;
121.       background-position: 50% 50%;
122.     }
123.     .weixincode {
124.       position: absolute;
125.       left: -60px;
126.       z-index: 1000 !important;
127.     }
128.   }
129. }
131. .qrcode-visible {
132.   opacity: 1 !important;
133.   pointer-events: auto;
134. }
135. </style>

复制代码

效果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。