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

原创
2018/01/30 18:06
阅读数 6.7W

先来看个效果图

码云地址: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)
      }

 

展开阅读全文
打赏
3
25 收藏
分享
加载中
大佬,请问用这个框架的话,我已经拿到所有路由了,侧边菜单栏想要在页面展示的话,还是需要手动在router文件下index.js中一个一个手写路由吗。上个项目我是这样做的,总感觉应该不是这样的
2019/07/08 15:36
回复
举报
切换tab页时,第三方iframe的操作会保留吗?还是说会重新加载
2019/05/29 14:54
回复
举报

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

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

嘻嘻,主要这个框架原作者厉害
2018/01/31 10:38
回复
举报
该评论暂时无法显示,详情咨询 QQ 群:912889742
更多评论
打赏
4 评论
25 收藏
3
分享
返回顶部
顶部