跳到主要内容

UI组件动态加载

描述​

平台在vue3版本支持 Ant Design Vue、Element Plus、Vant 三个主流 Vue 3 UI 框架的组件动态加载。 this.$uiManager用来加载不同框架的组件，有两种加载方式：加载单个 / 多个组件、加载完整框架。

1. 按需加载组件（推荐）​

按项目需要，加载用到的组件，常用方法如下：

要加载的框架方法名简单说明
Element PlusloadElementPlusComponent加载 Element Plus 的组件
Ant Design VueloadAntDesignComponent加载 Ant Design Vue 的组件
VantloadVantComponent加载 Vant 的组件

用法示例：

  • 加载单个组件（以 Element Plus 的 Button 为例）：
// 在Vue组件的方法里使用 
await this.$uiManager.loadElementPlusComponent('Button')

加载多个组件（以 Vant 的 Button、Field 为例）：

await this.$uiManager.loadVantComponent(['Button', 'Field'])

2. 加载完整框架（不推荐，除非需要所有组件）​

如果项目要用到某个框架的所有组件，可以直接加载完整框架：

框架名称方法名用法示例
Element PlusloadElementPlusawait this.$uiManager.loadElementPlus()
Ant Design VueloadAntDesignawait this.$uiManager.loadAntDesign()
VantloadVantawait this.$uiManager.loadVant()

实际场景示例​

1. 在 Vue 组件里用​

在 Vue 文件中，通过按钮点击加载组件，加载完成后显示组件：

<template>
  <div>
    <button @click="loadBtnComponents">加载按钮组件</button>
    <!-- 加载完成后才显示对应的按钮 -->
    <el-button v-if="showElBtn">Element Plus按钮</el-button>
    <van-button v-if="showVanBtn">Vant按钮</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showElBtn: false, // 控制Element Plus按钮显示
      showVanBtn: false  // 控制Vant按钮显示
    }
  },
  methods: {
    async loadBtnComponents() {
      try {
        // 加载Element Plus的Button组件，加载完显示按钮
        await this.$uiManager.loadElementPlusComponent('Button')
        this.showElBtn = true
        
        // 加载Vant的Button组件，加载完显示按钮
        await this.$uiManager.loadVantComponent('Button')
        this.showVanBtn = true
      } catch (error) {
        console.error('组件加载失败了', error)
      }
    }
  }
}
</script>

2. 路由跳转时加载组件​

进入某个页面（如管理页）时，提前加载页面需要的组件，让页面显示更流畅：

// 在router/index.js文件中 
const routes = [
  {
    path: '/admin', // 管理页路由
    component: () => import('@/views/Admin.vue'),
    // 进入页面之前加载组件

    beforeEnter: async (to, from, next) => {
      try {
        // 加载管理页需要的Table、Form组件
        await window.$uiManager.loadElementPlusComponent(['Table', 'Form'])
        next() // 加载完成，进入页面
      } catch (error) {
        console.error('组件加载失败', error)
        next() // 即使失败，也进入页面
      }
    }
  }
]

如何查看已加载的组件​

如果想知道哪些组件已经加载过，可以用以下方法：

  1. 查看某个框架下已加载的所有组件：
// 查看Element Plus已加载的组件 
const loadedElComponents = this.$uiManager.getLoadedComponents('elementPlus')
console.log('已加载的Element组件：', loadedElComponents)
  1. 检查某个组件是否已加载：
// 检查Element Plus的Button是否已加载 
const isBtnLoaded = this.$uiManager.isComponentLoaded('elementPlus', 'Button')
console.log('Button是否已加载：', isBtnLoaded) // 结果是true或false