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>
相关文章:
Vue项目中引入html页面(vue.js中引入echarts数据大屏html [静态非数据传递!] )
在项目原有vue(例如首页)基础上引入html页面 1、存放位置 vue3原有public文件夹下 我这边是新建一个static文件夹 专门存放要用到的html文件 复制拖拽过来 index为html的首页 2、更改路径引入到vue中 这里用到的是 iframe 方法 不同于vue的 component…...
ASTM C1186-22 纤维水泥平板
以无石棉类无机矿物纤维、有机合成纤维或纤维素纤维,单独或混合作为增强材料,以普通硅酸盐水泥或水泥中添加硅质、钙质材料代替部分水泥为胶凝材料,经制浆、成型、蒸汽或高压蒸汽养护制成的板材,俗称水泥压力板。 ASTM C1186-22纤…...
NoSQL概述
NoSQL概述 目录 一、为什么用NoSQL 二、什么是NoSQL 三、经典应用分析 四、N o S Q L 数 据 模 型 简 介 五、NoSQL四大分类 六、CAP BASE 一、为什么用NoSQL 1、单机MySQL的美好年代 在90年代,一个网站的访问量一般不大,用单个数据库完全可以轻松应…...
爬虫实战一、Scrapy开发环境(Win10+Anaconda3)搭建
#前言 在这儿推荐使用Anaconda进行安装,并不推荐大家用pythonpip安装,因为pythonpip的坑实在是太多了。 #一、环境中准备: Win10(企业版)Anaconda3-5.0.1-Windows-x86_64,下载地址,如果打不开…...
llama.cpp运行qwen0.5B
编译llama.cp 参考 下载模型 05b模型下载 转化模型 创建虚拟环境 conda create --prefixD:\miniconda3\envs\llamacpp python3.10 conda activate D:\miniconda3\envs\llamacpp安装所需要的包 cd G:\Cpp\llama.cpp-master pip install -r requirements.txt python conver…...
【接口】HTTP(3) |GET和POST两种基本请求方法有什么区别
在我面试时,在我招人面试别人时,10次能遇到7次这个问题,我听过我也说回答过: Get: 一般对于从服务器取数据的请求可以设置为get方式 Get方式在传递参数的时候,一般都会把参数直接拼接在url上 Get请求方法…...
金陵科技学院软件工程学院软件工程专业
感兴趣的小伙伴可以私信我哦~~ 是笔者写的各种高质量作业和实验哦~~ 感兴趣的小伙伴可以私信我哦~~ 是笔者写的各种高质量作业和实验哦~~ 感兴趣的小伙伴可以私信我哦~~ 是笔者写的各种高质量作业和实验哦~~ 感兴趣的小伙伴可以私信我哦~~ 是笔者写的各种高质量作业和实验哦…...
Android 关于apk反编译d2j-dex2jar classes.dex失败的几种方法
目录 确认路径正确直接定位到指定目录确定目录正确,按如下路径修改下面是未找到相关文件正确操作 确认路径正确 ,即d2j-dex2jar和classes.dex是否都在一个文件夹里(大部分的情况都是路径不正确) 直接定位到指定目录 路径正确的…...
Django--admin 后台管理站点
Django最大的优点之一,就是体贴的提供了一个基于项目model创建的一个后台管理站点admin。这个界面只给站点管理员使用,并不对大众开放。虽然admin的界面可能不是那么美观,功能不是那么强大,内容不一定符合你的要求,但是…...
JavaScript(六)---【回调、异步、promise、Async】
零.前言 JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】-CSDN博客 JavaScript(二)---【js数组、js对象、this指针】-CSDN博客 JavaScript(三)---【this指针,函数定义、Call、Apply、函数绑定、闭包】-CSDN博客 JavaScript(四)---【执…...
vue2+elementUi的两个el-date-picker日期组件进行联动
vue2elementUi的两个el-date-picker日期组件进行联动 <template><el-form><el-form-item label"起始日期"><el-date-picker v-model"form.startTime" change"startTimeChange" :picker-options"startTimePickerOption…...
GIN实例讲解
第一个gin程序 package mainimport ("github.com/gin-gonic/gin" )func main() {// 创建一个 Gin 引擎实例r : gin.Default()// 定义一个 GET 请求的路由,当访问 /hello 路径时执行匿名函数r.GET("/hello", func(c *gin.Context) {// 获取查询…...
开源充电桩设备监控系统技术解决方案
开源 | 慧哥充电桩平台V2.5.2(支持 汽车 电动自行车 云快充1.5、云快充1.6 微服务 ) SpringBoot设备监控系统解决方案 一、引言 1.项目背景 随着物联网技术的快速发展,设备的智能化和网络化程度日益提高。在现代工业和信息化的背景下&#x…...
环形链表--极致的简便
一、要求 给你一个链表的头节点 head ,判断链表中是否有环。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&a…...
WPF中TextWrapping
在 WPF(Windows Presentation Foundation)中,TextWrapping 是一个与文本布局相关的属性,用于控制文本在遇到容器边界时是否自动换行。这个属性常用于文本展示控件,如 TextBlock、TextBox、Label 等,以确保文…...
Win10 下 git error unable to create file Invalid argument 踩坑实录
原始解决方案参看:https://stackoverflow.com/questions/26097568/git-pull-error-unable-to-create-file-invalid-argument 本问题解决于 2024-02-18,使用 git 版本 2.28.0.windows.1 解决方案 看 Git 抛出的出错的具体信息,比如如下都来自…...
简化备案域名查询的最新API接口
随着互联网的发展,越来越多的网站和域名被注册和备案。备案域名查询是一个非常重要的功能,可以帮助用户在特定时间段内查询已备案的域名信息。现在,我将介绍一个简化备案域名查询的最新API接口,该接口可以帮助用户快速查询备案域名…...
基于SpringBoot和Vue的校园周边美食探索以及分享系统
今天要和大家聊的是基于SpringBoot和Vue的校园周边美食探索以及分享系统 !!! 有需要的小伙伴可以通过文章末尾名片咨询我哦!!! 💕💕作者:李同学 💕…...
TiDB单机版安装和连接访问
TiDB单机版安装和连接访问 1、下载 $wget http://download.pingcap.org/tidb-latest-linux-amd64.tar.gz 2、解压缩 $tar -zxvf tidb-latest-linux-amd64.tar.gz 3、启动TiDB 启动PD $./bin/pd-server --data-dirpd --log-filepd.log 启动tikv $./bin/tikv-server --pd…...
Spark-Scala语言实战(13)
在之前的文章中,我们学习了如何在spark中使用键值对中的keys和values,reduceByKey,groupByKey三种方法。想了解的朋友可以查看这篇文章。同时,希望我的文章能帮助到你,如果觉得我的文章写的不错,请留下你宝贵的点赞,谢…...
Android compose 使用指纹验证
基于compose进行指纹验证 点击按钮进行验证 Button(onClick {var passed falseval biometic BiometricPrompt.Builder(applicationContext).setTitle("使用指纹解锁App").setSubtitle("证明你是手机的主人").setNegativeButton("取消验证",…...
开源模型应用落地-chatglm3-6b模型小试-入门篇(一)
一、前言 刚开始接触AI时,您可能会感到困惑,因为面对众多开源模型的选择,不知道应该选择哪个模型,也不知道如何调用最基本的模型。但是不用担心,我将陪伴您一起逐步入门,解决这些问题。 在信息时代…...
C++实现单例模式
#include <iostream> class Singleton { private: static Singleton* instance; // 指向单例实例的指针 Singleton() {} // 私有构造函数 public: // 获取单例对象的唯一全局访问点 static Singleton* getInstance() { if (instance nullpt…...
虚幻UE5智慧城市全流程开发教学
一、背景 这几年,智慧城市/智慧交通/智慧水利等飞速发展,骑士特意为大家做了一个这块的学习路线。 二、这是学习大纲 1.给虚幻UE5初学者准备的智慧城市/数字孪生蓝图开发教程 https://www.bilibili.com/video/BV1894y1u78G 2.UE5数字孪生蓝图开发教学…...
docker的安装及入门指令
目录 一、将docker安装到云服务器步骤 1.更新系统yum版本 2.安装所需依赖 3.添加docker仓库设置(使用的是阿里云) 4.安装docker引擎 5.启动docker并开启自动启动 6. 检查是否安装成功,成功会显示相应版本,否则安装失败 二、docker常用命令 1.从…...
聚能共创下一代智能终端操作系统 软通动力荣膺“OpenHarmony优秀贡献单位”
近日,由开放原子开源基金会指导,以“开源共享未来”为主题的OpenHarmony社区年会在北京成功举办。本次活动汇集OpenHarmony项目群共建单位及生态伙伴等多方力量,旨在对2023年度OpenHarmony年度开源事业全面总结的同时,吸引更多伙伴…...
云服务器ECS租用价格表报价——阿里云
阿里云服务器租用价格表2024年最新,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元,ECS u1服务器2核4G5M固定带宽199元一年,2核4G4M带宽轻量服务器一年165元12个月,2核…...
光猫桥接模式详细步骤
目录 一、前言 路由模式 (宽带默认) 桥接模式 二、桥接模式步骤 (一)图片记录备份 设备信息图 网络侧信息 远程管理密码 宽带上网设置 (二)桥接模式开始 光猫设置 路由器设置 一、前言 重点&a…...
构建开源可观测平台
企业始终面临着确保 IT 基础设施和应用程序全年可用的压力。现代架构(容器、混合云、SOA、微服务等)的复杂性不断增长,产生大量难以管理的日志。我们需要智能应用程序性能管理 (APM) 和可观察性工具来实现卓越生产并满足可用性和正常运行时间…...
SketchUp Pro 2024 for mac 草图大师 专业的3D建模软件
SketchUp Pro 2024 for Mac是一款功能强大的三维建模软件,适用于Mac电脑。其简洁易用的界面和强大的工具集使得用户可以轻松创建复杂的3D模型。 软件下载:SketchUp Pro 2024 for mac v24.0.483 激活版下载 SketchUp Pro 2024 for Mac支持导入和导出多种文…...
俄罗斯视频网站开发/线上广告投放渠道
主窗口由以下元素组成,从上到下:图1主窗口布局图标题栏包含标准的Java的窗口控件,在菜单栏,其中包含下面的下拉菜单:文件,编辑,选项,基准,椭圆形,转换和帮助&…...
用Python完善wordpress/google搜索
Duplicate keys detected: 26. This may cause an update error vue警告报错的解决方法 1、检查自己代码循环的数组products是不是有重复使用; 2、如果有重复使用,或者列表返回的id都是相同的,比如报错是26,证明列表id返回的都是2…...
台湾做电商网站有哪些/制作网站的步骤
golang中的race检测 由于golang中的go是非常方便的,加上函数又非常容易隐藏go。 所以很多时候,当我们写出一个程序的时候,我们并不知道这个程序在并发情况下会不会出现什么问题。 所以在本质上说,goroutine的使用增加了函数的危险…...
建设银行网站登录密码/如何做好一个营销方案
http://blog.csdn.net/zjq852533445/article/details/78320012转载于:https://www.cnblogs.com/lvgg/p/8118613.html...
做网站开发需要学什么软件/江苏seo外包
Spring 框架就像一个家族,有众多衍生产品例如 boot、security、jpa等等。但他们的基础都是Spring 的 ioc和 aop ioc 提供了依赖注入的容器 aop ,解决了面向横切面的编程,然后在此两者的基础上实现了其他延伸产品的高级功能。Spring MVC是基于…...