学生版 建设网站软件下载,小程序店铺,广告业网站开发,网站建设的方式目录 前言1. 思路Demo2. 实战Demo 前言 #x1f91f; 找工作#xff0c;来万码优才#xff1a;#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 1. 思路Demo
以下Demo提供思路参考#xff0c;需要结合实际自身应用代码
下述URL的链接使用百度替代#xff01;
方式 1… 目录 前言1. 思路Demo2. 实战Demo 前言 找工作来万码优才 #小程序://万码优才/r6rqmzDaXpYkJZF 1. 思路Demo
以下Demo提供思路参考需要结合实际自身应用代码
下述URL的链接使用百度替代
方式 1使用 iframe 浮窗 可以创建一个固定在页面右下角的 iframe让它加载该 script 生成的内容
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title浮窗嵌入/titlestyle/* 浮窗样式 */#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 idopen-float打开浮窗/button!-- 浮窗框架 --div idfloating-container styledisplay: none;button idclose-btn×/buttoniframe idfloating-window srchttps://www.baidu.com//iframe/divscriptdocument.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 langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title浮窗嵌入 Script/titlestyle#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 idshow-div-btn打开浮窗/button!-- 浮窗内容 --div idfloating-divbutton idclose-div-btn×/buttondiv idscript-content/div/divscriptdocument.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 idfloating-dialogbutton onclickdocument.getElementById(floating-dialog).close()关闭/buttoniframe srchttps://www.baidu.com//iframe
/dialogbutton onclickdocument.getElementById(floating-dialog).showModal()打开浮窗/button2. 实战Demo
下述实战代码为Vue2项目源自bladex
初始
集成之后
在 avue-top 组件里嵌入一个浮窗 div然后动态加载 script确保它能够嵌入 Vue 组件中
templatediv classavue-topdiv classtop-bar__rightel-tooltip effectdark content打开浮窗 placementbottomdiv classtop-bar__item clicktoggleFloatingWindowi classel-icon-monitor/i !-- 你可以换成任意图标 --/div/el-tooltip/div!-- 浮窗 --div v-ifshowFloatingWindow classfloating-windowbutton classclose-btn clickshowFloatingWindow false×/buttoniframe :srcfloatingUrl/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 langscss 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-showshowFloatingWindow classfloating-windowbutton classclose-btn clickshowFloatingWindow false×/buttoniframe reffloatingIframe :srcfloatingUrl/iframe
/div如果对应需要增加浮窗文字可这样设置
el-tooltip effectdark content管理小助手 placementbottomdiv classtop-bar__item clicktoggleFloatingWindowi classel-icon-monitor/i span classfloating-text浮窗/span/div
/el-tooltip添加样式
.floating-text {font-size: 15px; /* 调整字体大小 */margin-left: 5px; /* 控制与图标的间距 */color: #fff; /* 文字颜色 */
}如果需要自定义图标使用图片来代替
可以使用 img 标签来替换 el-icon-monitor具体修改如下
el-tooltip effectdark content浮窗 placementbottomdiv classtop-bar__item clicktoggleFloatingWindowimg src/assets/my-icon.png classcustom-icon alt自定义图标 /span classfloating-textxx设备管理小助手/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; /* 让文字更清晰 */
}
