基于 MZGantt 的Vue 3封装组件在浏览器中以组件形式嵌入甘特图支持编辑、导出图片、多语言等能力具体能力以底层 MZGantt 版本为准。一、安装在项目根目录执行npminstallmzgantt-vue3 mzgantt若使用 pnpm / yarnpnpmaddmzgantt-vue3 mzgantt# 或yarnaddmzgantt-vue3 mzgantt安装完成后在package.json的dependencies中应能看到mzgantt-vue3与mzgantt。二、在 Vite Vue 3 项目中接入详细步骤以下步骤与官方示例工程mzgantt-vue3-sample的用法一致可按顺序操作。步骤 1确认工程为 Vue 3使用 Vite 创建的项目需在package.json中依赖vue^3.x入口一般为main.js/main.tsimport{createApp}fromvueimportAppfrom./App.vuecreateApp(App).mount(#app)步骤 2在页面中注册组件在需要使用甘特图的 Vue 单文件组件如App.vue的script setup中引入默认导出importMZGanttfrommzgantt-vue3无需再注册全局组件script setup下导入的组件可直接在模板中使用。步骤 3编写模板与数据在模板中放置组件并传入数据、配置与事件。下面是一段与示例项目等价的结构含工具栏与加载状态可按需删减template div classdemo-container div classtoolbar button clickexportImage导出图片/button button clickrefresh刷新甘特图/button button clickchangeScale(day)日刻度/button button clickchangeScale(week)周刻度/button button clickchangeScale(month)月刻度/button button clicktoggleEditable{{ editable ? 切换只读 : 切换编辑 }}/button button clickreloadData :disabledloading重新加载数据/button /div div classgantt-wrapper :style{ position: relative } MZGantt refganttRef :dataganttData :configganttConfig :editableeditable :exportabletrue :onBeforeInithandleBeforeInit scaleday langcn clickBaronClickBar loadedonLoaded / div v-ifloading classloading-overlay div classspinner/div /div /div /div /template script setup import { ref, onMounted } from vue import MZGantt from mzgantt-vue3 const ganttRef ref(null) const editable ref(true) const loading ref(false) const ganttData ref([]) const ganttConfig { columns: [ { name: seq, field: seq }, { name: name, field: name, title: 任务名称, width: 150 }, { name: resId, field: resId, title: 责任人, width: 80 }, { name: planStart, field: planStart, title: 计划开始, width: 120 }, { name: planEnd, field: planEnd, title: 计划完成, width: 120 }, { name: pctComp, field: pctComp, title: 完成度, width: 80 } ], showTrack: 1, showDependencies: 1, ganttStatus: e, rowHeight: 40, leftSideWidth: 300 } /** 初始化前回调可在此写入 MZGantt 官方提供的授权逻辑请使用您获得的授权代码 */ const handleBeforeInit (MZGanttApi, props) { // 将授权相关代码粘贴于此示例项目中含完整演示 } const getMockData () [ { id: 1, name: 任务 A, plan: [{ start: 2025-03-10, end: 2025-03-12, dur: 3 }], resId: 张三, pctComp: 30 } ] const fetchData () new Promise((resolve) { setTimeout(() resolve(getMockData()), 100) }) const loadData async () { loading.value true try { ganttData.value await fetchData() } finally { loading.value false } } const reloadData () loadData() const exportImage () { ganttRef.value?.exportImage(60, 甘特图示例) } const refresh () { ganttRef.value?.refresh() } const changeScale (scale) { ganttRef.value?.changeScale(scale) } const toggleEditable () { editable.value !editable.value } const onClickBar (row, eventXY) { console.log(点击进度条:, row?.name, 日期:, eventXY?.date) } const onLoaded (instance) { console.log(甘特图加载完成, instance) } onMounted(() { loadData() }) /script步骤 4启动开发服务器npmrun dev浏览器打开控制台确认无模块解析错误甘特图应随ganttData渲染。步骤 5生产构建npmrun build将产物部署到静态服务器或集成到现有后端模板即可。三、组件 API 说明3.1 Props属性类型默认值说明dataArray[]甘特图数据需符合 MZGantt 数据模型configObject{}列、行高、左侧宽度等配置见 MZGantt 文档scalestringday时间刻度day/week/month/quartereditablebooleantrue是否可编辑exportablebooleantrue是否启用导出图片能力langstringcn语言cn/en/jplicenseKeystring授权 Key若官方提供该方式widthstring100%容器宽度heightstring500px容器高度showInitLoadingObject | nullnull初始化加载动画相关配置onBeforeInitFunction | nullnull在核心库init之前执行签名为(MZGanttApi, props)常用于注入授权3.2 事件Emits事件名说明loaded甘特图实例创建完成参数为底层实例clickBar点击进度条dblClickBar双击进度条rightClick右键cellRender/rowRender/barRender单元格 / 行 / 条渲染clickRow点击行cellBlur单元格失焦barDragEnd/rowDragEnd拖拽结束4.3 通过 ref 调用的方法defineExpose在子组件上使用refganttRef后可通过ganttRef.value调用方法说明updateData(newData)更新数据并重绘refresh()刷新绘制getAllRows()获取所有行getSelectedRows()获取选中行exportImage(titleHeight?, titleStr?)导出图片changeScale(newScale)切换刻度getInstance()获取底层 MZGantt 实例示例与演示项目一致ganttRef.value?.exportImage(60,甘特图示例)ganttRef.value?.changeScale(week)四、数据与进阶配置任务数据结构、config各字段含义、与后端对接方式请以MZGantt 官方文档为准。列配置中的field需与数据字段对应plan等字段格式需符合核心库约定。五、常见问题安装后报找不到mzgantt请确认已执行npm install mzgantt且版本满足mzgantt-vue3的peerDependencies。样式异常核心样式由mzgantt提供若使用构建后的mzgantt-vue3产物请按发布版本说明是否需额外引入dist/style.css以当前发布包为准。本地调试组件源码可在业务项目package.json中使用mzgantt-vue3: file:../mzgantt-vue3链接本地包修改后需在组件包目录执行构建再刷新示例。