目录
- 前言
- 1. 思路Demo
- 2. 实战Demo
前言
🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF
1. 思路Demo
以下Demo提供思路参考，需要结合实际自身应用代码
下述URL的链接使用百度替代！
方式 1：使用 iframe 浮窗
可以创建一个固定在页面右下角的 iframe，让它加载该 script 生成的内容
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮窗嵌入</title>
<style>
/* 浮窗样式 */
#floating-window {
position: fixed;
bottom: 20px;
right: 20px;
width: 400px;
height: 500px;
border: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background: white;
z-index: 9999;
border-radius: 10px;
}
/* 关闭按钮 */
#close-btn {
position: absolute;
top: 5px;
right: 5px;
background: red;
color: white;
border: none;
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
line-height: 25px;
text-align: center;
}
</style>
</head>
<body>
<!-- 按钮触发浮窗 -->
<button id="open-float">打开浮窗</button>
<!-- 浮窗框架 -->
<div id="floating-container" style="display: none;">
<button id="close-btn">×</button>
<iframe id="floating-window" src="https://www.baidu.com/"></iframe>
</div>
<script>
document.getElementById("open-float").addEventListener("click", function() {
document.getElementById("floating-container").style.display = "block";
});
document.getElementById("close-btn").addEventListener("click", function() {
document.getElementById("floating-container").style.display = "none";
});
</script>
</body>
</html>
方式 2：使用 div + script 动态加载
script 代码是动态生成 HTML 的，可以创建一个浮窗 div，然后在 div 里动态插入 script
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮窗嵌入 Script</title>
<style>
#floating-div {
position: fixed;
bottom: 20px;
right: 20px;
width: 400px;
height: 500px;
border: 1px solid #ccc;
background: white;
z-index: 9999;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: none;
border-radius: 10px;
}
#close-div-btn {
position: absolute;
top: 5px;
right: 5px;
background: red;
color: white;
border: none;
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
line-height: 25px;
text-align: center;
}
</style>
</head>
<body>
<!-- 按钮触发浮窗 -->
<button id="show-div-btn">打开浮窗</button>
<!-- 浮窗内容 -->
<div id="floating-div">
<button id="close-div-btn">×</button>
<div id="script-content"></div>
</div>
<script>
document.getElementById("show-div-btn").addEventListener("click", function() {
document.getElementById("floating-div").style.display = "block";
let script = document.createElement("script");
script.async = true;
script.defer = true;
script.src = "https://www.baidu.com/";
document.getElementById("script-content").appendChild(script);
});
document.getElementById("close-div-btn").addEventListener("click", function() {
document.getElementById("floating-div").style.display = "none";
});
</script>
</body>
</html>
方式 3：使用 dialog 元素
想要更现代化的 UI，可以使用 <dialog> 标签
<dialog id="floating-dialog">
<button onclick="document.getElementById('floating-dialog').close()">关闭</button>
<iframe src="https://www.baidu.com/"></iframe>
</dialog>
<button onclick="document.getElementById('floating-dialog').showModal()">打开浮窗</button>
2. 实战Demo
下述实战代码为Vue2（项目源自bladex）
初始：
集成之后：
在 avue-top 组件里嵌入一个浮窗 div，然后动态加载 script，确保它能够嵌入 Vue 组件中
<template>
<div class="avue-top">
<div class="top-bar__right">
<el-tooltip effect="dark" content="打开浮窗" placement="bottom">
<div class="top-bar__item" @click="toggleFloatingWindow">
<i class="el-icon-monitor"></i> <!-- 你可以换成任意图标 -->
</div>
</el-tooltip>
</div>
<!-- 浮窗 -->
<div v-if="showFloatingWindow" class="floating-window">
<button class="close-btn" @click="showFloatingWindow = false">×</button>
<iframe :src="floatingUrl"></iframe>
</div>
</div>
</template>
在 methods 里添加 toggleFloatingWindow 方法，控制浮窗的显示：
<script>
export default {
data() {
return {
showFloatingWindow: false,
floatingUrl: "http://xxxxx"
};
},
methods: {
toggleFloatingWindow() {
this.showFloatingWindow = !this.showFloatingWindow;
}
}
};
</script>
添加 <style> 样式
<style lang="scss" scoped>
.floating-window {
position: fixed;
bottom: 20px;
right: 20px;
width: 400px;
height: 500px;
background: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 9999;
border-radius: 10px;
border: 1px solid #ddd;
overflow: hidden;
}
.floating-window iframe {
width: 100%;
height: 100%;
border: none;
}
.close-btn {
position: absolute;
top: 5px;
right: 5px;
background: red;
color: white;
border: none;
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
line-height: 25px;
text-align: center;
}
</style>
但这样会有个bug，每次点开隐藏都会刷新下网页
优化浮窗：防止重复加载内容
可以使用 v-show 而不是 v-if，这样 iframe 只会被隐藏，而不会被销毁，内容不会丢失
<div v-show="showFloatingWindow" class="floating-window">
<button class="close-btn" @click="showFloatingWindow = false">×</button>
<iframe ref="floatingIframe" :src="floatingUrl"></iframe>
</div>
如果对应需要增加浮窗文字，可这样设置：
<el-tooltip effect="dark" content="管理小助手" placement="bottom">
<div class="top-bar__item" @click="toggleFloatingWindow">
<i class="el-icon-monitor"></i>
<span class="floating-text">浮窗</span>
</div>
</el-tooltip>
添加样式
.floating-text {
font-size: 15px; /* 调整字体大小 */
margin-left: 5px; /* 控制与图标的间距 */
color: #fff; /* 文字颜色 */
}
如果需要自定义图标，使用图片来代替：
可以使用 <img> 标签来替换 el-icon-monitor，具体修改如下：
<el-tooltip effect="dark" content="浮窗" placement="bottom">
<div class="top-bar__item" @click="toggleFloatingWindow">
<img src="@/assets/my-icon.png" class="custom-icon" alt="自定义图标" />
<span class="floating-text">xx设备管理小助手</span>
</div>
</el-tooltip>
具体样式如下：
.custom-icon {
width: 24px; /* 适当调整图标大小 */
height: 24px;
margin-right: 5px; /* 让图标和文本有一定间距 */
}
想让图片样式更加鲜艳：
.custom-icon {
width: 24px;
height: 24px;
margin-right: 5px;
filter: brightness(1.2) contrast(1.2); /* 提高亮度和对比度 */
}
文字的颜色：
使用 稍微鲜艳但不刺眼的颜色，让 文字更清晰，比如：
🔹 推荐颜色：
亮蓝色：#007bff（适合科技风）
柔和橙色：#ff9800（温暖醒目）
湖绿色：#17a2b8（清新不刺眼）
紫罗兰色：#6f42c1（优雅有辨识度）
🎨 修改 floating-text 颜色：
.floating-text {
font-size: 15px;
margin-left: 5px;
color: #007bff; /* 亮蓝色，科技感强 */
font-weight: bold; /* 让文字更清晰 */
}
