element-ui vue2 iframe 嵌入外链新解

效果如图

实现原理

在路由中通过 props 传值

html 复制代码
  {
    path: '/iframe',
    component: Layout,
    meta: { title: '小助手', icon: 'example' },
    children: [
      {
        path: 'chatglm',
        name: 'chatglm',
        props: {  name: 'chatglm',url: 'https://chatglm.cn' },
        component: () => import('@/views/iframe/common'),
        meta: { title: 'ai-智普清言', icon: 'table' }
      },
]

组件中获取数据 this.$props.url

html 复制代码
<template>
    <div class="iframe-container">
      <iframe :src="src" scrolling="auto" frameborder="0" class="frame" :onload="onloaded()">
      </iframe>
    </div>
  </template>
  
  <script>
  export default {

    props: ['url']  ,

    data() {
      return {
        src: this.$props.url,
        loading: null
      };
    },
    methods: {
      // 获取路径
      resetSrc: function(url) {
        this.src = url
        this.load()
      },
      load: function() {
        this.loading = this.$loading({  
          lock: true,
          text: "loading...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.5)",
          // fullscreen: false,
          target: document.querySelector("#main-container ")
        })
      },
      onloaded: function() {
        if(this.loading) {
          this.loading.close()
        }
      }
    },
    mounted() {
      this.resetSrc(this.$props.url);
    },
    watch: {
      $route: {
        handler: function(val, oldVal) {
          // 如果是跳转到嵌套页面,切换iframe的url
          this.resetSrc(this.$props.url);
        }
      }
    }
  };
  </script>
  
  <style lang="scss">
  .iframe-container {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;;
    bottom: 0px;
    .frame {
      width: 100%;
      height: 100%;
    }
  }
  </style>
  

参考

src/views/IFrame/IFrame.vue · 朝雨忆轻尘(Louis)/kitty-ui - Gitee.com

Vue 路由组件传参的 8 种方式 - 掘金

相关推荐
烛阴9 分钟前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
crary,记忆18 分钟前
Module Federation 和 Native Federation 的比较
前端·webpack·angular
why技术23 分钟前
翻译翻译,什么叫“编程专用”的显示器?
前端·后端
tkevinjd37 分钟前
C++中线程库的基本操作
开发语言·c++
CodeWithMe1 小时前
【C/C++】不同防止头文件重复包含的措施
c语言·开发语言·c++
拉不动的猪1 小时前
JQ常规面试题
前端·javascript·面试
子豪-中国机器人1 小时前
C++ 信息学奥赛总复习题答案解析
开发语言·c++·算法
海上彼尚1 小时前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
oioihoii1 小时前
C++11列表初始化:从入门到精通
java·开发语言·c++
zdy12635746881 小时前
python第48天打卡
开发语言·python