项目实现网页分享QQ空间功能

信计2102罗铠威

已于 2024-03-06 17:06:44 修改

阅读量429

点赞数 3

分类专栏： Vue项目常用组件模板仓库文章标签： javascript vue.js 前端

于 2024-01-29 21:43:11 首次发布

本文链接：https://blog.csdn.net/qq_66443592/article/details/135920933

版权

Vue项目常用组件模板仓库专栏收录该内容

11 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在Vue项目中添加一个点击按钮，实现将当前页面转发至QQ空间的功能，包括HTML模板和JavaScript代码实现。

摘要由CSDN通过智能技术生成

🐒个人主页：信计2102罗铠威

 🏅Vue项目常用组件模板仓库

📖前言：

本篇博客主要提供“点击转发按钮，将本页面转发至QQ空间”源码，需要的朋友请自取
在这里插入图片描述

在这里插入图片描述

🎀源码如下：

<template>
	<div>
		<!-- 实现QQ转发功能 -->
			<button id="shareQQ" @click="shareNews()">转发到QQ</button>
	</div>
</template>

<script>
 export default {
	 data() {
		return {
			newsUrl:"https://baomidou.com/pages/24112f/",/* 准备转发的网址 */
			newsName:"我是转发标题名",/* 转发的标题名 */
		}
	},methods: {
		shareNews(){
			// this.newsUrl=window.location.href=url;//🎀获取当前页面的地址，准备转发
			document.getElementById('shareQQ').addEventListener('click',()=>{
				var url="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+this.newsUrl+"&title="+this.newsName;
				//转发分享接口
				window.location.href=url;//进行网页跳转，到QQ转发界面
				
			});
		}
	},
}
</script>