MxbcVue 组件库

安装

npm install mx-components
# 或
yarn add mx-components
# 或
pnpm add mx-components

使用

完整引入

import { createApp } from 'vue'
import App from './App.vue'
import MxbcVue from 'mx-components'
import router from './router' // 你的路由实例

const app = createApp(App)

// 方式1：直接传入路由实例
app.use(MxbcVue, { router })

// 方式2：链式调用
app.use(MxbcVue, { router }).mount('#app')

按需引入

import { createApp } from 'vue'
import App from './App.vue'
import { GenerateReport } from 'mx-components'
import router from './router'

const app = createApp(App)

// 注入路由
app.provide('$router', router)

// 注册组件
app.component('GenerateReport', GenerateReport)

app.mount('#app')

组件说明

GenerateReport 组件

报表生成组件，支持路由跳转功能。

特性

• 自动检测路由环境
• 支持 Vue Router 跳转
• 降级到 window.location.href 跳转

使用示例

<template>
  <div>
    <GenerateReport ref="reportRef" />
    <button @click="generateReport">生成报表</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { GenerateReport } from 'mx-components'

const reportRef = ref()

const generateReport = () => {
  const params = {
    // 你的参数
  }
  const totalCount = 100
  
  reportRef.value.childFn(params, totalCount)
}
</script>

路由配置

确保在使用组件库时提供路由实例：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import MxbcVue from 'mx-components'

const app = createApp(App)

// 提供路由实例给组件库
app.use(MxbcVue, { router })
app.use(router)

app.mount('#app')

降级方案

如果项目中没有配置路由，组件会自动使用 window.location.href 进行页面跳转，确保功能正常运行。

其他组件

• Empty - 空状态组件
• BarChart - 柱状图组件
• LineChart - 折线图组件
• PieChart - 饼图组件
• BatchImport - 批量导入组件
• IconSvg - SVG图标组件

注意事项

1. 如果组件需要路由功能，请确保在安装组件库时提供路由实例
2. 组件库会自动处理路由注入，无需手动配置
3. 在没有路由的环境中，组件会自动降级使用原生跳转方式