zoukankan      html  css  js  c++  java
  • vue2接入qiankun / iframe自适应高度

    先占坑 后续补充别的

     vue2接入qiankun

    官方网址: https://qiankun.umijs.org/zh/guide/

    good教程 附带github https://github.com/taosin/micro-front-vue  (主要是能运行)  https://juejin.cn/post/6917848537686507533#heading-1 

    需要注意 :

    (1)主应用写了 默认是1,如果你访问的是2 3 访问失败会自动调回1

    // 设置默认子应用,与 genActiveRule中的参数保持一致
    setDefaultMountApp("/app1");

    (2)不用设置在主应用同级别目录下,可以用localhost也可以用代理域名,也可以是不同服务器只要能访问到就可以。

    自己踩坑:

    (1)主要是用的vue2,没有vue.config.js

    新建 vue.config.js配了半天不生效,原来vue2还是用webpack.dev.config.js

    (2)主要解决的是跨域问题,在webpack.dev.config.js 里配devServer就ok

    headers: {
          'Access-Control-Allow-Origin': '*',
    },

    (3)按照官方的文档如果访问不了就之间把${packageName} 改成固定的,也ok,注意output要写在外面,不在devServer里

    output: {
        library: `vue-test`,
        libraryTarget: 'umd'// 把微应用打包成 umd 库格式
        jsonpFunction: `webpackJsonp_vue-test`,
    },

    (4)主要来说就是上面两个webpack配置

    还有main.js 全换掉为了识别,qiankun模式

    最后就是public-path.js ,不复杂,踩坑再补充

    histroy模式这种, main.js里重写的时候已经定义好了~

     (5)最后就是package-json里面的 名字要统一

    心理活动:

    vue.config.js端口配错-》 不生效-》完全不生效 
    原来是因为就在webpack.dev.config.js 在这里配才可以  这样才算大概是入门了吧
    相比的下前面都在瞎搞不知道往哪使劲了 
     
    然后 用webpack 里的output 什么不认得 
    那找找webpack4文档里应该怎么写
    emmmmmm  4 5 都有 emmmm
    发现不能写在devServer里要在外面就认识了
    真坑啊 
    !!!!泪目  这样做即使是vue2也成功了  vue2完全ok。。

    -----------------------------------------------

    然后。。。。这边成功之后 往里接又不成功 甚至页面都显示不了了

    而且发现之前成功的vue2 router也显示不了路由的内容。。。

    iframe自适应高度

    参见 https://juejin.cn/post/6977194597915033607

    为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在喉的感觉。

    首先设置样式

    body{margin:0; padding:0;}
    复制代码

    如果不设置body的margin和padding为0的话,页面上下左右会出现空白。

    html代码如下

    <iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" frameborder="0"></iframe>
    复制代码

    下面就是今天小编写的时候遇到的问题,考虑到有些朋友可能没怎么用jquery就直接用js吧。

    方法一

    var ifm= document.getElementById("myiframe");
    
    ifm.height=document.documentElement.clientHeight;
    复制代码

    这个方法可以达到让iframe自适应高度的效果,但是如果你将窗口放大或缩小效果就不出来了,也就是本文开头讲的。需要再次刷新,那就不属于自适应了。

    那么问题来了,需要解决当窗口改变大小的时候执行js事件,以让iframe自适就高度。那么就需要将相关的代码写成函数,并且给iframe加上onLoad="changeFrameHeight()",也就是下面的方法二了。

    方法二

    <iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" οnlοad="changeFrameHeight()" frameborder="0"></iframe>
    复制代码

    js代码也得跟着改

    function changeFrameHeight(){
        var ifm= document.getElementById("iframepage"); 
        ifm.height=document.documentElement.clientHeight;
    
    }
    
    window.οnresize=function(){  
         changeFrameHeight();  
    
    } 
    复制代码

    window.onresize的作用就是当窗口大小改变的时候会触发这个事件。

    所以,使用方法二就可以完美的、真正的让iframe自适应高度了,试试看吧,并且兼容多种浏览器。


    作者:刺心疯
    链接:https://juejin.cn/post/6977194597915033607

  • 相关阅读:
    .net core 3.1 使用Redis缓存
    JavaSE 高级 第11节 缓冲输入输出字节流
    JavaSE 高级 第10节 字节数组输出流ByteArrayOutputStream
    JavaSE 高级 第09节 字节数组输入流ByteArrayInputStream
    JavaSE 高级 第08节 文件输出流FileOutputStream
    JavaSE 高级 第07节 文件输入流FileInputStream
    JavaSE 高级 第06节 初识I、O流
    JavaSE 高级 第05节 日期类与格式化
    JavaSE 高级 第04节 StringBuffer类
    JavaSE 高级 第03节 Math类与猜数字游戏
  • 原文地址:https://www.cnblogs.com/lx2331/p/15624857.html
Copyright © 2011-2022 走看看