文档章节

基于vue-element-admin框架改造——支持第三方iframe网站

avue_smallwei
 avue_smallwei
发布于 01/30 18:06
字数 325
阅读 6321
收藏 24

先来看个效果图

码云地址:https://gitee.com/smallweigit/vue-element-admin.git

例:http://localhost:9527/#/iframe/urlPath?src=https://www.baidu.com (访问百度)

格式:http://localhost:9527/#/iframe/urlPath?src=第三方的网站

并且支持判断iframe是否加载完成的等待框以及浏览器窗口变化做出的响应

Avue一个神奇的框架http://avue.top

改造代码

./src/views/iframe/index.vue(第三方iframe组件)

<template>
	<iframe v-if="$route.query.src" :src='$route.query.src' class="iframe" ref="iframe" v-loading.fullscreen.lock="fullscreenLoading"></iframe>  
  <iframe v-else :src="urlPath" class="iframe" ref="iframe" v-loading.fullscreen.lock="fullscreenLoading"></iframe>  
</template>

<script>
export default {
  name: 'myiframe',
  data() {
    return {
      fullscreenLoading: false,
      urlPath: this.getUrlPath()
    }
  },
  created() {
    this.fullscreenLoading = true
  },
  mounted() {
    this.iframeInit()
    window.onresize = () => {
      this.iframeInit()
    }
  },
  props: ['routerPath'],
  watch: {
    routerPath: function(val) {
      this.urlPath = this.getUrlPath()
    }
  },
  components: {},
  methods: {
    iframeInit() {
      const iframe = this.$refs.iframe
      const clientHeight = document.documentElement.clientHeight - 90
      iframe.style.height = `${clientHeight}px`
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', () => {
          this.fullscreenLoading = false
        })
      } else {
        iframe.onload = () => {
          this.fullscreenLoading = false
        }
      }
    },
    getUrlPath: function() {
      let url = window.location.href
      url = url.replace('/iframe', '')
      return url
    }
  }
}
</script>

<style>
.iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>

./src/router/reouter/index.js(增加路由)

{
    path: '/iframe',
    component: Layout,
    redirect: '/iframe', // you can set roles in root nav
    children: [{
      path: ':routerPath',
      component: _import('iframe/index'),
      name: 'iframe',
      meta: {
        title: 'iframe',
        icon: 'people'
      }
    }]
  },

./src/store/modules/tagsView.js(让vue-router路由可以获取完整的url路径)

将全部的view.path改成view.fullPath

if (state.visitedViews.some(v => v.path === view.fullPath)) return
      state.visitedViews.push({
        name: view.name,
        path: view.fullPath,
        title: view.meta.title || 'no-name'
      })
      if (!view.meta.noCache) {
        state.cachedViews.push(view.name)
      }

 

© 著作权归作者所有

共有 人打赏支持
avue_smallwei
粉丝 21
博文 12
码字总数 7506
作品 1
集宁
程序员
私信 提问
加载中

评论(2)

avue_smallwei
avue_smallwei

引用来自“来自山卡拉的你”的评论

不错,支持一下,我现在也在用vue-element-admin

嘻嘻,主要这个框架原作者厉害
来自山卡拉的你
来自山卡拉的你
不错,支持一下,我现在也在用vue-element-admin
Avue 1.0 发布了,像 easyUI 一样写 vue

vue1.0发布了,像easyUI一样写vue 欢迎点击演示地址体验 演示地址:http://122.4.205.228:7777——jenkins+docker+git钩子自动部署 码云地址:https://gitee.com/smallweigit/avue github地址:...

avue_smallwei
03/15
11.8K
25
laden666666/vue-element-resize-event

vue-element-resize-event 一个扩展vue的时间,使其可以监听普通元素的resize事件。HTML中如果在窗口或框架被调整大小时发生resize事件,但是元素尺寸变化的时候却没有对应的事件。但是基于j...

laden666666
05/09
0
0
Avue 是一个后台集成解决方案支持SSR(服务端渲染)和SPA(单例页面),

https://gitee.com/smallweigit/avue.git vue只是刚起步,很多功能还在开发中敬请期待...... 简体中文 欢迎加入QQ交流群,互相学习 一键加群: 简介 是一个后台集成解决方案支持SSR(服务端渲...

Smallwei小伟
02/08
0
0
使用 vue-cli + element-ui 快速搭建项目

一、前言 的到来,凭借这其简单易学、完善的API中文文档、丰富的生态系统,成为国内目前十分受欢迎的前端框架, 是基于 的 框架,由饿了么团队开发维护的,目前是vue的ui库中最受欢迎的一个框...

玄学酱
06/25
0
0
基于 vue+element 的后台集成方案 - vue-element-admin

vue-element-admin 本项目的定位是后台集成方案,不适合当基础模板来开发,模板建议使用 vueAdmin-template , 桌面端 electron-vue-admin 注意:该项目目前使用 element-ui@1.4.1 版本,所以...

匿名
2017/08/23
0
19

没有更多内容

加载失败,请刷新页面

加载更多

集成测试——Spring TestContext框架支持详细解说

概述 集成测试是在单元测试之上,通常是将一个或多个已进行过单元测试的组件组合起来完成的,即集成测试中一般不会出现Mock对象,都是实实在在的真实实现。 对于单元测试,如前边在进行数据访...

呐呐丶嘿
8分钟前
0
0
爬取豆瓣电影TOP250的所有电影名称,网址为:https://movie.douban.com/top250

所谓静态页面是指纯粹的HTML格式的页面,这样的页面在浏览器中展示的内容都在HTML源码中。 目标:爬取豆瓣电影TOP250的所有电影名称,网址为:https://movie.douban.com/top250 1)确定目标网...

linjin200
9分钟前
0
0
ES6私有变量的实现

1. 约定 实现 class Example { constructor() { this._private = 'private'; } getName() { return this._private }}var ex = new Example();console.log(ex.getName()); // ......

peakedness丶
11分钟前
0
0
SQLServer AlwaysOn在阿里云的前世今生

缘起 早在2015年的时候,随着阿里云业务突飞猛进的发展,SQLServer业务也积累了大批忠实客户,其中一些体量较大的客户在类似大促的业务高峰时RDS的单机规格(规格是按照 内存CPUIOPS 一定比例...

阿里云官方博客
16分钟前
0
0
绑定域名到 GitHub Pages

GitHub Pages 绑定来自阿里云的域名 简介 我在阿里云上注册了一个新域名:yuanzb.com,我已经在GitHub Pages上建立了自己的博客:http://yuanzb.github.io/yuanzb/。现在我希望将yuanzb.com映...

临江仙卜算子
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部