微服务qiankun中使用子应用复用主应用的ueditor组件，子应用复用主应用组件

以vue-cli 3.0版本生成的单页面项目为例

从官方下载ueditor的压缩包后解压到主应用的public目录下

如下图

安装 vue-ueditor-wrap 插件

代码语言：javascript复制

npm i vue-ueditor-wrap -D

主应用main.js 中加入这两句

代码语言：javascript复制

import VueUeditorWrap from 'vue-ueditor-wrap'

window.commonComponent = { VueUeditorWrap };

子应用使用时这样写

代码语言：javascript复制

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <vue-ueditor-wrap v-model="msg" :config="myConfig" ref="myueditor"  @ready="ready"></vue-ueditor-wrap>
    <div @click="getContent">获取编辑器内容</div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,    
    VueUeditorWrap: window.__POWERED_BY_QIANKUN__ ? window.commonComponent.VueUeditorWrap : import('vue-ueditor-wrap')
  },
  data(){
    return{
      msg: '123',
      myConfig: {        
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！部署在国外的服务器，如果无法访问，请自备梯子）
        serverUrl: 'http://35.201.165.105:8000/controller.php',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        // UEDITOR_HOME_URL: process.env.BASE_URL   'UEditor/'
        UEDITOR_HOME_URL:'http://localhost:8080/UEditor/'        
      },
      editorInstance: null
    }
  },
  methods:{
    ready(editorInstance) {
      console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
      this.editorInstance = editorInstance
    },
    getContent() {
      console.log(this.msg)
      console.log(this.$refs.myueditor)
    }
  }
};
</script>

其中有二句配置比较重要

其一：

代码语言：javascript复制

 VueUeditorWrap: window.__POWERED_BY_QIANKUN__ ? window.commonComponent.VueUeditorWrap : import('vue-ueditor-wrap')

这句是注册挂载 VueUeditorWrap组件，如果window下有__POWERED_BY_QIANKUN__ 这个变量，则认为当前是qiankun下的子应用环境，直接使用在主应用下挂载到window的组件 VueUeditorWrap

否则就 import('vue-ueditor-wrap')

UEDITOR_HOME_URL

该变量是指向UEditor的压缩文件。没有其他要求，就是指向一个可以用的资源路径，可以使用本目录中的，也可以使用其他线上的地址。

最终结果

更多用法可以查阅vue-ueditor-wrap该组件

此复用组件的方法 同时也适用于其他组件

更多关于qiankun实践的总结，可以看下这个文章。

10.1结束，明天上班。

vue.js 编程算法 其他

0 人点赞