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

admin2024-04-03  0

在项目原有vue(例如首页)基础上引入html页面
1、存放位置
Vue项目中引入html页面(vue.js中引入echarts数据大屏html [静态非数据传递!] ),在这里插入图片描述,第1张
vue3原有public文件夹下 我这边是新建一个static文件夹 专门存放要用到的html文件 复制拖拽过来
Vue项目中引入html页面(vue.js中引入echarts数据大屏html [静态非数据传递!] ),在这里插入图片描述,第2张
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、效果展示
Vue项目中引入html页面(vue.js中引入echarts数据大屏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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!