电子教材阅读器
parent: 300c9e79 | 补丁 | 提交 | ignore whitespace
YM
2024-04-24 aa3e8ddc722750cf131d61253579f3fa81a64c32 
加载子应用
6个文件已修改
107 ■■■■■ 已修改文件
index.html 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/main.css 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/child.ts 69 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main.ts 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/index.ts 6 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/home.vue 26 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 index.html


@@ -8,7 +8,7 @@


    <title>数字教材阅读器</title>


  </head>


  <body>


    <div id="app"></div>


    <div id="parentApp"></div>


    <script type="module" src="/src/main.ts"></script>


  </body>


</html>




 src/assets/main.css


@@ -1,6 +1,6 @@


@import './base.css';




#app {


#parentApp {


  width: 100%;


  height: 100%;


}




 src/child.ts


@@ -1,47 +1,50 @@


import { registerMicroApps,setDefaultMountApp} from "qiankun";


import { registerMicroApps, setDefaultMountApp, start } from 'qiankun'


const microApps = [


  {


    // - 必选，微应用的名称，微应用之间必须确保唯一


    name: "vue-app", 


    name: 'app-content',


    // - 必选，微应用的入口


    entry: 'http://192.168.3.196:8080/',


    entry: '//182.92.203.7:3007/books/test/',


    // entry: '//192.168.3.196:8080/',


    // - 必选，微应用的容器节点的选择器或者 Element 实例


    container: "#container",


    container: '#container',


    // - 必选，微应用的激活规则


    //支持直接配置字符串或字符串数组，如 activeRule: '/app1' 或 activeRule: ['/app1', '/app2']，当配置为字符串时会直接跟 url 中的路径部分做前缀匹配，匹配成功表明当前应用会被激活。


    //支持配置一个 active function 函数或一组 active function。函数会传入当前 location 作为参数，函数返回 true 时表明当前微应用会被激活。如 location => location.pathname.startsWith('/app1')。


    activeRule: "#/app-content",   //匹配所有以/subPath开头的为子应用


    activeRule: '/home' //匹配所有以/subPath开头的为子应用


    //loader - (loading: boolean) => void - 可选，loading 状态发生变化时会调用的方法。


    //可选，主应用需要传递给微应用的数据。


    props: {


      _parent_base: '/app-content/',


      msg:'这是主应用传给子应用的消息'


    },


  },


];


// 乾坤提供的子应用生命周期钩子  可用于加载loading


const mount={


    beforeLoad: () => {


      //开始加载loading


      console.log('子应用加载前')


    },


    beforeMount: () => {


      console.log('子应用挂载前')


    },


    afterMount: () => {


      //结束加载loading


      console.log('子应用挂载后')


    },


    beforeUnmount: () => {


      console.log('子应用卸载前')


    },


    afterUnmount: () => {


      console.log('子应用卸载后')


    },


    // props: {


    //   _parent_base: '/app-content/',


    //   msg:'这是主应用传给子应用的消息'


    // },


  }


]


// 乾坤提供的子应用生命周期钩子  可用于加载loading


const mount = {


  beforeLoad: () => {


    //开始加载loading


    console.log('子应用加载前')


  },


  beforeMount: () => {


    console.log('子应用挂载前')


  },


  afterMount: () => {


    //结束加载loading


    console.log('子应用挂载后')


  },


  beforeUnmount: () => {


    console.log('子应用卸载前')


  },


  afterUnmount: () => {


    console.log('子应用卸载后')


  }


}


//注册子应用


registerMicroApps(microApps,mount);


registerMicroApps(microApps, mount)


//设置默认启动子应用


setDefaultMountApp('/subPath');


setDefaultMountApp('/home')


//启动qiankun | 不可重复启动 | 如果子应用入口在app.vue里可以在这启动否则会报错找不到子应用结点


//start()


start({


  prefetch: false,


})




 src/main.ts


@@ -48,4 +48,4 @@


  app.component(key, component)


}




app.mount('#app')


app.mount('#parentApp')




 src/router/index.ts


@@ -1,10 +1,10 @@


import { createRouter, createWebHashHistory } from 'vue-router'


import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'


import Layout from '@/layout/layout.vue'


const Home = () => import('@/views/home.vue')


const Login = () => import('@/views/login.vue')




const router = createRouter({


  history: createWebHashHistory(import.meta.env.BASE_URL),


  history: createWebHistory(import.meta.env.BASE_URL),


  routes: [


    {


      path: '/',


@@ -23,7 +23,7 @@


          path: '/home',


          name: 'home',


          meta: { auth: true },


          component: Home


          component: Home,


        }


      ]


    }




 src/views/home.vue


@@ -99,7 +99,7 @@


              <div><img :src="zoomOut" @click="changePageSize('reduce')" /></div>


            </div>


            <div class="brushImgBox">


              <div><img :src="huabi2" class="brushImg" />画笔</div>


              <div @click="loadChild"><img :src="huabi2" class="brushImg" />画笔</div>


              <!-- <el-switch v-model="headerData.brushToolShow"  @change="brushToolShow"/> -->


            </div>


          </div>


@@ -422,6 +422,13 @@




<script setup lang="ts">


import { ref, reactive, watch, onMounted } from 'vue'


import { useRouter, useRoute } from 'vue-router'




//获取路由器


let $router = useRouter()


//获取当前路由的信息


let $route = useRoute()




import { ElMessage } from 'element-plus'


import mulu from '@/assets/images/menu/mulu.png'


import biji from '@/assets/images/menu/biji.png'


@@ -492,12 +499,8 @@


import zoomIn from '../assets/images/operation/zoomIn.png'


import zoomOut from '../assets/images/operation/zoomOut.png'


import huabi2 from '../assets/images/operation/huabi.svg'


import { start } from 'qiankun'


onMounted(() => {


  


  start()


 


})


import { loadMicroApp } from 'qiankun'




// 菜单


const menuData = reactive([


  {


@@ -1049,6 +1052,15 @@


    ctx = canvas.value.getContext('2d') as CanvasRenderingContext2D


  }


}




const loadChild = () => {


  // loadMicroApp({


  //   name: 'book',


  //   entry: '//192.168.3.196:8080/',


  //   container: document.querySelector('#container')


  // })


  // $router.push({path: "/aa"})


}


</script>




<style lang="less">