Vue项目中引入html页面(vue.js中引入echarts数据大屏html [静态非数据传递!] )

在项目原有vue(例如首页)基础上引入html页面
1、存放位置
在这里插入图片描述
vue3原有public文件夹下 我这边是新建一个static文件夹 专门存放要用到的html文件 复制拖拽过来
在这里插入图片描述
index为html的首页

2、更改路径引入到vue中
这里用到的是 iframe 方法 不同于vue的 components: { } 命名方式

<template><div class="echarts"><iframe :src="src" frameborder="0" style="width:100%;height:100%"></iframe></div>
</template><script>export default {data(){return{src:'/static/index.html',};},}
</script><style rel="stylesheet/scss" lang="scss">.echarts{position: absolute;height: 100%;width: 100%;}
</style>

再修改宽高即可满足首页(vue页)呈现引入的html

3、效果展示
在这里插入图片描述
这里是静态展示 动态数据效果还需html页面加一个监听message的事件这篇文件不赘述
4、其他
vue调用vue页面方式

<template><div class="app-container"><Table></Table></div>
</template><script>import Table from "@/views/system/user/index.vue"export default {components: { Table },}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/786225.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式 - Mixin模式

混入&#xff08;Mixin&#xff09;是一个对象&#xff0c;我们可以使用它来向另一个对象或类添加可重用的功能&#xff0c;而无需使用继承。我们无法独立使用混入&#xff0c;它的唯一目的是向对象或类添加功能&#xff0c;而不使用继承。 比如说&#xff0c;在我们的应用程序…

权限认证SpringCloud GateWay、SpringSecurity、OAuth2.0、JWT一网打尽!

权限认证SpringCloud GateWay、SpringSecurity、OAuth2.0、JWT一网打尽 一、SpringCloud GateWay 1.它是如何工作的&#xff1f; ​ 客户端向 Spring Cloud Gateway 发出请求。如果Gateway处理程序映射确定一个请求与路由相匹配&#xff0c;它将被发送到Gateway Web处理程序。…

【Go】七、包、init函数、匿名函数、闭包

文章目录 1、包2、本质3、init函数4、匿名函数5、闭包 1、包 不同的包&#xff0c;不同的功能和业务&#xff0c;互相import 关于包&#xff1a; package 包名注意点&#xff1a; 建议包名和所在文件夹同名 main函数一定要放在main包下&#xff0c;否则编译报错 go run&a…

maven 请出缓存,重新拉取依赖

要让Maven清除本地仓库的缓存并重新下载依赖&#xff0c;你可以使用以下几种方法&#xff1a; 1. 强制更新快照&#xff08;Snapshot&#xff09;依赖 对于快照版本的依赖&#xff0c;Maven提供了一个简单的命令行选项来强制更新本地仓库中的快照版本&#xff0c;而不需要清除…

IP归属地在互联网行业中的应用

摘要&#xff1a;IP&#xff08;Internet Protocol&#xff09;地址归属地是指互联网上某个IP地址所对应的地理位置信息。在互联网行业中&#xff0c;IP归属地具有重要的应用价值&#xff0c;包括网络安全、广告定向、用户定位等方面。IP数据云将探讨IP归属地在互联网行业中的应…

3d怎么两个模型连接圆润?---模大狮模型网

在3D建模中&#xff0c;如何实现两个3d模型的圆润连接是一个常见而又关键的问题。无论是为了美观的外观设计还是为了模型的功能性&#xff0c;圆润连接都能够增加模型的整体质感和流畅度。模大狮将介绍一些常见的方法和技巧&#xff0c;帮助您实现两个模型之间的圆润连接。 一、…

Linux如何连接github仓库

一.创建一个github账号 如何创建一个github账号 二.在github上创建一个仓库 登录上github后出现这个界面 然后点击左上角头像&#xff0c;在按照图片位置点击&#xff1a; 继续按照图片上的位置进行点击&#xff1a; 创建成功&#xff1a; 三.云主机连接Github仓库 1.在linux中…

Hadoop系列总结

一、Hadoop linux基本操作 前提掌握Linux基本操作 参考 Linux基本操作-CSDN博客 1、查看hadoop指定路径下文件大小前6的文件信息 hdfs dfs[hadoop fs] -du -h /path/to/directory|sort -hr|head -n 6

宝塔 docker 安装 rabbitmq

点击宝塔目录docker 拉取镜像 docker pull rabbitmq:management创建rabbitmq容器 docker run -d --name rabbit -e RABBITMQ_DEFAULT_USERadmin -e RABBITMQ_DEFAULT_PASSadmin -p 15672:15672 -p 5672:5672 -p 25672:25672 -p 61613:61613 -p 1883:1883 rabbitmq:managemen…

支持向量机(Support Vector Machine,SVM)的功能及用法

支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;是一种监督学习算法&#xff0c;主要用于分类和回归分析。其基本思想是找到一个超平面&#xff0c;将不同类别的样本分开&#xff0c;并使得该超平面到最近的样本点的距离&#xff08;即支持向量&…

深度学习-计算机视觉入门-part1

计算机视觉入门 文章目录 计算机视觉入门一、 从卷积到卷积神经网络1.图像的基本表示2. 卷积操作3.卷积遇见深度学习3.1 通过学习寻找卷积核3.2 参数共享&#xff1a;卷积带来参数量骤减3.3 稀疏交互&#xff1a;获取更深入的特征 二、手撕卷积代码三、经典CNN模型介绍四、CNN模…

skywalking idea中启动调试报错Output path is shared between the same module error

报错信息 简单描述&#xff1a;就是多个moudle一样用了一样的输出路径&#xff0c;这样容易造成冲突 Output path is shared between the same module error 参考&#xff1a;scala - Output path is shared between the same module error - Stack Overflow 解决方法&…

机器学习(四)

贝叶斯分类器与贝叶斯学习: 贝叶斯分类器:只要是一种生成式模型&#xff0c;并且使用到了贝叶斯公式 贝叶斯学习:一定在使用分布估计 贝叶斯分类器并不等于贝叶斯学习 极大似然估计: 先假设某种概率分布形式&#xff0c;再基于训练样例对参数进行估计 集成学习: 如何得到…

WPF学习笔记-FlowDocument实现表格单元格垂直居中以及边框设置

文章目录 概述一、基本方案1.1 添加Grid1.2 添加列1.3 添加行1.4 添加Grid的时候同时添加行和列1.5 添加元素1.6 获取指定单元格的元素1.7 添加TextBlock元素1.7.1 直接添加字符串1.7.2 添加Paragraph1.8 获取文本内容1.9 获取元素二、其他操作2.1 设置边框2.2 设置隔行颜色2.3…

云计算迎变局:阿里云、腾讯云“各有千秋”

毋庸置疑&#xff0c;无论在什么时候什么行业&#xff0c;低价策略都是一柄利器。比如&#xff0c;在电商行业&#xff0c;除了拼多多将低价策略贯彻到底之外&#xff0c;淘宝、京东也将性价比作为发力重点&#xff0c;并通过补贴、秒杀等方式&#xff0c;再度强调自身的“价格…

打造安全医疗网络:三网整体规划与云数据中心构建策略

医院网络安全问题涉及到医院日常管理多个方面&#xff0c;一旦医院信息管理系统在正常运行过程中受到外部恶意攻击&#xff0c;或者出现意外中断等情况&#xff0c;都会造成海量医疗数据信息的丢失。由于医院信息管理系统中存储了大量患者个人信息和治疗方案信息等&#xff0c;…

wps 开发插件

官方文档参考wps官方文档参考 1.环境安装 安装wps https://www.wps.cn/ 安装Node.js https://nodejs.org/en 安装代码编辑器 Visual Studio Code https://code.visualstudio.com/ 环境检查-进入cmd查看 node -v2.demo 2.1 demo下载 打开vscode&#xff0c;新建终端 安装…

HWOD:字符串逆序

一、知识点 回车键的ASCII码是10 fgets()会读入回车键&#xff0c;也就是说字符串最后一个字符之后是回车键&#xff0c;再之后才是\0 字符串逆序不一定要真正的逆序&#xff0c;只需倒着从最后一个字符打印到第一个字符即可 二、题目 1、描述 将一个字符串str的内容颠倒…

Redis开源协议调整,我们怎么办?

2024年3月20日, Redis官方宣布&#xff0c;从 Redis 7.4版本开始&#xff0c;Redis将获得源可用许可证 ( RSALv2 ) 和服务器端公共许可证 ( SSPLv1 ) 的双重许可&#xff0c;时间点恰逢刚刚完成最新一轮融资&#xff0c;宣布的时机耐人寻味。 Redis协议调整&#xff0c;对云计算…

C#实现Word文档转Markdown格式(Doc、Docx、RTF、XML、WPS等)

文档格式的多样性丰富了我们的信息交流手段&#xff0c;其中Word文档因其强大的功能性而广受欢迎。然而&#xff0c;在网络分享、版本控制、代码阅读及编写等方面&#xff0c;Markdown因其简洁、易于阅读和编辑的特性而展现出独特的优势。将Word文档转换为Markdown格式&#xf…