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

相关推荐
難釋懷3 分钟前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax
Qian Xiaoo5 分钟前
Ajax入门
前端·ajax·okhttp
VBA63378 分钟前
VBA之Word应用第三章第十节:文档Document对象的方法(三)
开发语言
老胖闲聊17 分钟前
Python Rio 【图像处理】库简介
开发语言·图像处理·python
爱生活的苏苏28 分钟前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪30 分钟前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
炫彩@之星36 分钟前
Chrome书签的导出与导入:步骤图
前端·chrome
码界奇点37 分钟前
Python Flask文件处理与异常处理实战指南
开发语言·python·自然语言处理·flask·python3.11
贩卖纯净水.1 小时前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
k要开心1 小时前
C++概念以及基础框架语法
开发语言·c++