实现嵌入浙里办头部底部样式，以及浙里办登录
在 Vue.js 项目中引入外部 JavaScript 脚本文件可以通过以下几个步骤完成：
1. 在你的 Vue.js 项目中的?public/index.html?文件中，找到?<head>?标签，并在其中添加如下代码，引入 jQuery 脚本文件：
<script src="https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjzw2023/jquery.min.js"></script>
2.?<div id="zjzwCommonheader"> <script src="https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjzw2023/commonHeader.js" /> </div> 示例这段代码在vue中使用
我们在组件的mounted钩子函数里创建了一个<script>元素，设置其src为你提供的URL，并将其添加到具有id="zjzwCommonheader"的DOM元素中。这样，在组件挂载后，该脚本将被加载并执行。
<template>
<div class="headers">
<div id="zjzwCommonheader"></div>
</div>
</template>
<script>
export default {
mounted() {
const script = document.createElement('script');
script.src = "https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjzw2023/commonHeader.js";
script.async = true;
document.getElementById('zjzwCommonheader').appendChild(script);
}
};
</script>
<style scoped>
/* Your component styles */
</style>
3. 想要改变外部commonHeader.js中的值
const script = document.createElement("script");
script.src =
"https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjzw2023/commonHeader.js";
script.async = true;
window.zjzwIsLogin = false; //改变commonHeader.js中的zjzwIsLogin变量
window.zjzwIsNav = false;
window.zjzwIsSearch = false;
window.zjzwIsFixBox = false;
document.getElementById("zjzwCommonheader").appendChild(script);4. 想要引用外部js的方法getCookieMode
// 创建一个 <script> 元素
const scriptElement = document.createElement("script");
// 设置脚本的 src 属性
scriptElement.src = "https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/1308/2109061849141316.js";
// 设置脚本为异步加载
scriptElement.async = true;
// 定义加载完成后的回调函数
scriptElement.onload = function () {
// 脚本加载完成后，调用其中的 getCookieMode 方法
getCookieMode();
};
// 将脚本元素添加到文档尾部
document.getElementById("zjzwCommonfooter").appendChild(scriptElement);
5. 登陆
跳转浙里办登录，需要配置回调地址，回调地址带有ticketId，传入后端接口
getTicket() {
var url = window.location.href; // 获取页面路由
if (url.indexOf("ticketId") != -1) {
this.ticket = url.split("=")[2].split("#")[0];
}
console.log("登陆后的url", url, this.ticket);
//如果有票据的并且没有登录过，那么进行获取个人信息操作
if (this.ticket != "" && !localStorage.getItem("companyName")) {
this.getZLBuserInfo();
}
},