element-ui vue2 iframe 嵌入外链新解

这篇具有很好参考价值的文章主要介绍了element-ui vue2 iframe 嵌入外链新解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果如图

element-ui vue2 iframe 嵌入外链新解,javascript,前端,开发语言,vue,elementui

实现原理

  • 在路由中通过  props 传值

  {
    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

<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 种方式 - 掘金文章来源地址https://www.toymoban.com/news/detail-715912.html

到了这里,关于element-ui vue2 iframe 嵌入外链新解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

领支付宝红包 赞助服务器费用

相关文章

  • vue2+element-ui 实现国际化

    在src目录下创建一个lang文件夹,同时创建zh.js(中文),en.js(英文),ja.js(日文),fr.js(法文)四个语言包js文件,并创建一个index.js文件,用来整合语言包 对于一个项目来说,一个语言包需要包含所有页面以及组件;在语言包以页面为单位,创建一个对象;对公共的title或者按钮名

    2024年02月02日
    浏览(55)
  • VUE2+Element-ui+封装Echarts图表

    封装Echarts图表,如下效果图 Home组件代码块,使用的mock.js模拟数据封装 Echarts图表组件 安装所需依赖 cnpm i axios -S 安装axios接口请求 cnpm i mockjs 或 yarn add mockjs 安装mockjs生成模拟随机数据 cnpm i echarts 或 yarn add echarts 安装echarts图表 cnpm i element-ui -S 安装element-ui组件库 安装less c

    2024年02月08日
    浏览(48)
  • vue2+element-ui实现侧边导航栏

    编写 client/src/components/LeftMenu.vue ,创建侧边导航栏: 编辑 client/src/views/Index.vue ,引入侧边导航栏:

    2024年02月02日
    浏览(48)
  • vue2&Element-ui实现表格单元格合并

    由于项目需要实现单元格合并目前只是单页没有做分页处理先上效果图 看下数据结构 Element table提供的api arraySpanMethod columnIndex=0表示从第一列开始 rowIndex表示需要操作的行数 同济医院加上合计有12行从0开始=11 判断条件是rowIndex余12===0 我们打印一下 或者改成 表示从0开始到1

    2024年02月12日
    浏览(47)
  • Vue2+element-ui后台管理系统(静态页面)

    node:https://nodejs.org/en/ git:https://git-scm.com/ vue:https://v2.cn.vuejs.org/v2/guide/installation.html element-ui:https://element.eleme.cn/#/zh-CN/component/installation 项目所需:https://pan.baidu.com/s/1ua0jp9YCtPH6slE49HDUBw 提取码:kkkk 在node和vue都调试、配置好的情况下使用vscode 在终端中输入命令 npm i -g @vue

    2024年02月06日
    浏览(58)
  • Vue2.0+element-ui实现表格的增删查改

    vue2做了个表格的demo,有增删改查的功能,记录一下,喜欢就点个赞收藏一下吧~ 效果: 1.主文件list-page.vue 列表页 2.弹窗页面(新增/编辑公用一个弹窗页面)

    2024年02月10日
    浏览(51)
  • 【Vue框架】Vue2中element-ui/mint-ui组件库——element-ui引入组件以及使用案例、mint-ui引入组件及使用案例

    element-ui 提供了大量的组件,如:布局组件、表单组件、JS组件等等。 Element-ui官网: https://element.eleme.cn/#/zh-CN 安装 Element-ui: npm i element-ui -S 1.1.1 引入组件 引入 Element 完整引入(在 main.js 中写入以下内容): 按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到

    2024年02月07日
    浏览(56)
  • vue2+element-ui el-tree树形控件封装

    1.封装 根据官网配置项封装了下el-tree 方便维护和复用,有用的话点赞收藏叭~ 2.使用 如若要对不同的一级二级节点设置不同的样式可以参考这样:

    2024年02月12日
    浏览(65)
  • 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建

    1. 从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客 一、了解Element-ui  1.Element-UI Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供一组组件 Element UI 提供组件的参考实例, 直接复制 2.官网  地址:https:

    2024年02月12日
    浏览(44)
  • Vue2+Element-UI的el-steps封装与修改样式

     

    2024年02月14日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包