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 种方式 - 掘金

相关推荐
涵信5 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
谈不譚网安5 分钟前
CSRF请求伪造
前端·网络安全·csrf
夜夜敲码7 分钟前
C语言教程(十六): C 语言字符串详解
c语言·开发语言
TT模板11 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩11 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
宋康13 分钟前
C语言结构体和union内存对齐
c语言·开发语言
去伪存真17 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
居然是阿宋23 分钟前
Kotlin高阶函数 vs Lambda表达式:关键区别与协作关系
android·开发语言·kotlin
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
Cao1234567893211 小时前
简易学生成绩管理系统(C语言)
c语言·开发语言