{"_id":"@cat_hua/gantt-chart-vue3","name":"@cat_hua/gantt-chart-vue3","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cat_hua/gantt-chart-vue3","version":"1.0.0","private":false,"browser":"dist/gantt-chart-vue3.umd.cjs","author":{"name":"feng yang"},"license":"MIT","description":"vue3写的甘特图，支持高度自适应、tag拖拽、显示标记线、tag支持右键菜单、任务列支持显示右键菜单、支持只读模式、支持加减n天任务持续时间效果、支持tag避让效果【需结合后端数据刷新整个甘特图】","repository":{"type":"git","url":"git+https://github.com/yangfeng727/gantt-chart-vue3.git"},"keywords":["vue","vue3.x","element-plus","Gantt chart","Gantt","vue gantt","gantt vue","甘特图"],"dependencies":{"element-plus":"^2.8.0","vue":"^3.4.35"},"engines":{"node":">= 18.0.0"},"_id":"@cat_hua/gantt-chart-vue3@1.0.0","bugs":{"url":"https://github.com/yangfeng727/gantt-chart-vue3/issues"},"homepage":"https://github.com/yangfeng727/gantt-chart-vue3#readme","_nodeVersion":"18.20.7","_npmVersion":"10.8.2","dist":{"integrity":"sha512-BYbcyt0q6Ph8DaslyWVu/plZC/PKXxTZ934UCJeEGBWcIlPrVSmD4BOXUr9hbhdiPw5yd7I7gUQoSWY9lpcmZQ==","shasum":"37a30a0df84613b52c5a4cd25968332f9d84b27e","tarball":"https://registry.npmjs.org/@cat_hua/gantt-chart-vue3/-/gantt-chart-vue3-1.0.0.tgz","fileCount":6,"unpackedSize":244280,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDXrfqf9XPm9IdNIl50oY125N/Vca8Mf801Tvu7d3SSwAIhAIZyrtUUiOtlKrPcPqkwUCXLoniIONtT66ny3z5rbL6E"}]},"_npmUser":{"name":"cat_hua","email":"1427013336@qq.com"},"directories":{},"maintainers":[{"name":"cat_hua","email":"1427013336@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gantt-chart-vue3_1.0.0_1744363018863_0.09578564555106817"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-11T09:16:58.808Z","1.0.0":"2025-04-11T09:16:59.074Z","modified":"2025-04-11T09:16:59.354Z"},"maintainers":[{"name":"cat_hua","email":"1427013336@qq.com"}],"description":"vue3写的甘特图，支持高度自适应、tag拖拽、显示标记线、tag支持右键菜单、任务列支持显示右键菜单、支持只读模式、支持加减n天任务持续时间效果、支持tag避让效果【需结合后端数据刷新整个甘特图】","homepage":"https://github.com/yangfeng727/gantt-chart-vue3#readme","keywords":["vue","vue3.x","element-plus","Gantt chart","Gantt","vue gantt","gantt vue","甘特图"],"repository":{"type":"git","url":"git+https://github.com/yangfeng727/gantt-chart-vue3.git"},"author":{"name":"feng yang"},"bugs":{"url":"https://github.com/yangfeng727/gantt-chart-vue3/issues"},"license":"MIT","readme":"# 个人测试使用\n# gantt-chart-vue3 一个使用vue3.x开发的甘特图组件\n[npm 地址](https://www.npmjs.com/package/gantt-chart-vue3?activeTab=readme)\n这个组件是我“被裁员期间”抽空给之前呆过的公司 **【重庆隆志科技有限公司】** 写的，大家**在二次开发的时候记得保留代码顶部的版权声明文件哦。**\n```\n\n```\n\n## 目录说明\nexamples/packages/components 下是 gantt-chart-vue3 组件源码 \nexamples下是demo代码，进入examples目录下执行 `npm i 和 npm run dev` 启动项目demo \n\n## 环境支持\nnode 大于 node 18.0.0\n\n## vue2.x 支持\nvue2.x 请使用 [gantt-chart-vue](https://github.com/yangfeng727/gantt-chart-vue?tab=readme-ov-file)\n\n## vue3.x 支持\n支持vue3.x，gantt-chart-vue3 是 [gantt-chart-vue](https://github.com/yangfeng727/gantt-chart-vue?tab=readme-ov-file) 的升级版本，用于支持 vue3.x。\n\n## 特别说明\n如果你的项目没有用到 element plus，gantt-chart-vue3 也是可以正常使用的，做了打包优化，内部只会引入几个用到的 element plus 组件与样式。\n\n## 功能\n* 1.甘特图精度显示到“分钟”。\n* 2.甘特图支持只读模式。\n* 3.甘特图支持点击显示标记线，标记线多个甘特图联动，通过 v-model:markLineTime 实现。\n* 4.支持在甘特图中标记当前时间-时间线，前提是当前时间在任务开始结束区间内。\n* 5.甘特图支持底部支持显示统计行。\n* 6.甘特图支持是否开启甘特图高度自适应： \n true：限定在父级设置的高度范围内，超出将显示纵向滚动条，如果父容器未设置高度，将以初始渲染的高度为准，后续都限定在此高度范围内。 \n false：甘特图自动撑开，特别注意父容器不要设置高度！！！\n* 7.甘特图支持右键菜单，通过rightClickMenuList属性配置。\n* 8.甘特图支持给左侧任务列配置右键菜单，通过taskMenuList属性配置。 \n 任务列菜单 - 每行的菜单都一样，若想给某行单独设置不同的菜单，则给row 对应行赋值 taskMenuList\n* 9.每行任务支持同时显示多种类型的tag，可拖动tag到其他行列，不同类型tag将在不同行显示。\n* 10.拖动tag时tag左侧显示时间线。\n* 11.支持给任务行设置是否禁用，禁用行可设置是否响应事件【不响应则不可拖入禁用行】，可通过disabledRowSilent属性控制是否开启。\n* 12.tag tooltip 采用 el-popover实现, 默认显示tag的tooltip、支持单个tag的tip关闭、使用插槽父组件可自行修改tag tooltip内容。\n tip 显示的优先级为：当前tag 设置的closeTip > 当前tag对应legend设置的closeTip > 都没设置则默认显示tip。**gantt-chart-vue3 新增 tipEnterable 可以选择鼠标是否可进入到 tip 中。**\n* 13.tag支持右键菜单，tag 右键菜单功能，菜单在legend中配置，点击菜单按钮抛出参数。\n* 14.想要时间更精确，当tag拖动，结束后可以弹窗选择起止时间，可通过dragTagEndShowTimeDialog控制是否开启此功能。\n* 15.tag 支持点击显示选中效果tag selected为true即可，可以全局关闭，提供获取所有选中项，清空所有选中项api。\n* 16.tag 前可以显示自定义图标，就是个类名放到tag前的 `` 标签里面，推荐使用iconfont。\n* 17.甘特图支持实现任务持续时间加减n天显示，tag拖动到有滚动条边界时滚动条滚动。\n* 18.甘特图支持tag拖动时，后面tag的避让效果。 \n 特别注意：拖动结束后需要重新触发甘特图init方法才会清除避让信息！这部分是垃圾数据，只是为了有个避让效果，和甘特图本身数据无关\n\n## 注意\n甘特图tag是以左上角点位置判断拖到的哪行。甘特图时间列宽度是根据 “甘特图总宽度 - paintLeft” 的剩余宽度均分得到的，每列设有最小列宽，计算的总宽度大于剩余宽度时将显示横向滚动条。\n\n## 效果图\n![图1](./docAssets/img1.png)\n![图2](./docAssets/img2.png)\n![动态图](./docAssets/gif.gif)\n\n## 安装\nnpm i gantt-chart-vue3 -S\n\n## 引入\n\n### 方式一：main.js中全局引入\n```js\nimport { createApp } from \"vue\";\nimport \"./style.css\";\nimport App from \"./App.vue\";\n\n// 引入 gantt-chart-vue3\nimport \"gantt-chart-vue3/dist/style.css\";\nimport * as ganttChartVue3 from \"gantt-chart-vue3\";\n\nlet app = createApp(App);\n\napp.use(ganttChartVue3);\n\napp.mount(\"#app\");\n\n```\n### 方式二：组件内单独引入\n```vue\n\n```\n\n### 基础使用\n``` vue\n\n\n\n\n\n```\n\n# 一、组件 props 属性值介绍，可查看源码 `examples/packages/components/ganttChartVue3/index.vue` 查看所有props\n## readOnly\n`boolean`，是否只读，最高优先级，为true会禁用所有编辑功能，如拖拽，右键菜单等\n## disabledRowSilent\n`boolean`，禁用行是否不触发事件，tag不可拖动到禁用行，不触发右键菜单。 true：禁止拖入， false：可以拖入。【注：“禁用行” 是根据rows中每个item的 disabled 属性判断的，disabled:true 代表此行为禁用行，禁用行背景色为 disabledBgColor 的值】\n## showSelected\n`boolean`，是否显示tag选中 - false 不会显示选中效果，true 显示选中效果【tag是否选中是通过rows中每个item的 selected 控制的】\n![tag选中效果.gif](./docAssets/tag选中效果.gif)\n\n## selfAdaptionGanTTHeight\n`boolean`，是否开启甘特图高度自适应： \ntrue：限定在父级设置的高度范围内，超出将显示纵向滚动条，如果父容器未设置高度，将以初始渲染的高度为准，后续都限定在此高度范围内 \nfalse：甘特图自动撑开，特别注意父容器不要设置高度！！！ \n\n## legend\n类型为：\n``` typescript\ninterface Ilegendtype{\n color: string;\n type: number;\n dragable?: boolean;\n closeTip?: boolean;\n btnList: {\n label:string;\n disabled?: boolean;\n }[]\n}\ntype Ilegend = Ilegendtype[]\n```\n甘特图的类型数组，重要！！！，用于控制每行tag的颜色以及行的顺序。完整值例子如：\n```js\n[\n {\n color: '#365ce5',\n type: 1, // 用于判定同一网格行内具体所属行\n dragable: true, // 此类型tag是否可以拖动，也可以在rows中配置单个tag是否可以拖动\n closeTip: false, // 显示tag tip，也可以在rows中配置单个tag是否关闭提示\n btnList: [ // 右键菜单按钮列表\n {\n label: '开启tag选中',\n disabled: false\n },\n {\n label: '关闭tag选中',\n disabled: false\n },\n {\n label: 'tag前添加图标',\n disabled: false\n }\n ]\n }\n]\n```\n* color: 这种类型tag的背景色【tip：想要设置tag自己的样式请在rows对应项中设置tags的className修改】\n* type: 用于判定同一网格行内具体所属行\n* dragable: 此类型tag是否可以拖动，也可以在rows中配置单个tag是否可以拖动\n* closeTip: 此类型是否显示tag tip，也可以在rows中配置单个tag是否关闭提示，true：不显示tip false：显示tip\n* btnList: tag上的右键菜单按钮列表，也可以设置是否禁用某个按钮，效果为:\n![右键菜单按钮](./docAssets/右键菜单按钮.png) \n【注意：tag后面显示三个点，代表有操作菜单】\n\n## title\n`string`，甘特图标题，默认值：'甘特图'。\n## startDate\n`string`，初始显示的甘特图列开始时间，默认值：'2023/12/01'。重要！！！\n## dateDuration\n`number`，任务持续时间 - 从开始时间计算，默认值：7。重要！！！\n![任务持续时间](./docAssets/任务持续时间.png)\n## decreaseDayNum\n`number`，除了dateDuration任务持续时间，当tag横向拖动到左边界时，可以往前几天时间。需求说明：\n 如甘特图为7+2天，如果tag往左移出了，甘特图时间轴需要 - 1天；往右移出则 + 1 天，此时甘特图出现横向滚动条。\n## IncreaseDayNum\n`number`，除了dateDuration任务持续时间，当tag横向拖动到右边界时，可以往后几天时间。\n## timeFormat\n`string`，标题列时间显示成的格式，默认：'YYYY-MM-DD'。\n## rows\n甘特图行数据，重要！！！类型为：\n``` typescript\ninterface Itags{\n startTime: string; // 此tag的开始时间，注意是完整时间，如：'2023/12/01 02:10:00'\n endTime: string; // 此tag的结束时间，注意是完整时间，如：'2023/12/03 06:10:00'\n label: string; // tag上显示的文本\n type: number; // 同 legend 中的type类型 Ilegendtype.type，用于判断显示在同一任务行中的哪一行\n closeTip?: boolean; // 不显示此tag的tip，注意：只有true|false才会生效\n dragable?: boolean; // 此类型tag是否可以拖动,优先级最高，不设置将取legend的dragable，都没有则禁止拖动，注意：只有true|false才会生效\n className?: string; // 可单独设置tag样式名，可以同时设置多个，如：'classA classB'，将给此tag加上样式classA和样式classB\n selected?: boolean; // 当前tag是否选中-有选中样式\n preIcon?: string; // tag 前可以显示自定义图标，就是个类名放到tag前的 标签里面，推荐使用iconfont，如'el-icon-video-camera-solid'\n hide?: boolean; // 是否隐藏此tag\n}\n\ninterface Ibtn{\n label: string; // 按钮名称\n disabled?: boolean; // 是否禁用\n}\n\ninterface IRowsItem{\n label: string; // 任务行名称\n disabled?: boolean; // 当前行是否标记为禁用行，若props.disabledRowSilent设置为true，将禁止tag拖入禁用行\n tags: Itags[];\n h?:number; // 甘特图内部会用的变量，不用传，传了也会被覆盖\n taskMenuList?: Ibtn[]; // 当前任务行中任务列的右键菜单，参数和效果同 props.taskMenuList\n // 其他属性，将不做任何修改，可以存储其他前端数据\n [[propName: string]: any;]\n}\n\ntype IRows = IRowsItem[]\n\n```\n## summaryRows\n`string[]`，甘特图底部统计行。注意上面的任务时间【包括加减n天】有几列这里就得有几列。 \n如：\n```js\n // 甘特图底部统计行\n summaryRows: {\n type: Array,\n default() {\n return [\n ['合计1', '1', '2', '3', '1', '2', '3', ''],\n ['合计2', 'a', 'b', 'c', 'd', 'e', 'f', '11'],\n ]\n }\n },\n```\n![底部合计行](./docAssets/底部合计行.png)\n## showMarkLine\n`boolean`，是否显示 markLineTime 对应时间的标记线，注意：只读模式下标线功能未禁止，同样可以显示和标记。\n## markLineTime\n`string`，标记线对应的时间，注意是完整时间，如：'2023/10/04 06:10:00'。标记线的功能为：点击甘特图内容区域，在点击的时间显示一条纵向线，后续可搭配 getTimePierceTags 方法获取所有被指定时间贯穿的tag。demo中有例子，感兴趣可以运行起来看看。\n如图：\n![贯穿tag的标记线.png](./docAssets/贯穿tag的标记线.png)\n## rightClickMenuList\n甘特图右键菜单里面的按钮，类型为：\n```typescript\ninterface Ibtn{\n label: string; // 按钮名称\n disabled?: boolean; // 是否禁用\n}\ntype IrightClickMenuList = Ibtn[]\n```\n值如：\n```js\n rightClickMenuList: {\n type: Array,\n default() {\n return [\n {\n label: '新增模型xx',\n disabled: true\n },\n {\n label: '新增停机xx',\n disabled: false // 是否禁用\n }\n ]\n }\n },\n```\n效果图：\n![甘特图右键菜单](./docAssets/甘特图右键菜单.png)\n\n## taskMenuList\n任务列菜单 - 每行的菜单都一样，若想给某行单独设置不同的菜单，则给row 对应行赋值 `taskMenuList`，上面props.rows中有讲到过。 \n类型为：\n```typescript\ninterface Ibtn{\n label: string; // 按钮名称\n disabled?: boolean; // 是否禁用\n}\ntype ItaskMenuList = Ibtn[]\n```\n值如：\n```js\n taskMenuList: {\n type: Array,\n default() {\n return [\n {\n label: '停产',\n disabled: false // 是否禁用\n },\n {\n label: '启用',\n disabled: false // 是否禁用\n }\n ]\n }\n },\n```\n效果图：\n![任务列菜单](./docAssets/任务列菜单.png)\n![任务列菜单2](./docAssets/任务列菜单2.png)\n## dragTagEndShowTimeDialog\n`boolean`，tag拖拽结束是否显示时间选择框，默认：false。\n![拖拽结束显示时间框](./docAssets/拖拽结束显示时间框.gif)\n## openTagMoveDodgeAnimate\n`boolean`，tag拖动的避让效果，只是单纯显示，原理: 修改translateX(x)，这样不会对原始数据造成影响，非必要不用开启此功能。 \n**【注意!!!：开启此功能后，将导致某些tag含有translateX 偏移，从而让甘特图表现异常-正确用法是每次拖动结束【比如调接口计算】，然后重新渲染整个甘特图】**\n![tag避让效果](./docAssets/tag避让效果.gif)\n\n## tipWdith\n`string | number`，tooltip 宽度，默认206px。\n\n## tipEnterable\n`boolean`，vue3 甘特图特有属性：鼠标是否可进入到 tag的 tooltip 中， 同 element plus tooltip enterable。\n\n### 下面几个 props 属性是样式属性\n## ganttBgColor\n`string`，甘特图背景色，默认：'#ffffff'。\n## disabledBgColor\n`string`，停用|禁用行-背景色，默认：'#ececec'。\n## paintLeft\n`string`，画布左侧 “类目列” 宽，默认：'80px'。\n## paintTop\n`string`，画布顶部 “时间列” 高，默认：'40px'。\n## gridLineColor\n`string`，网格线的颜色，默认：'#dddddd'。\n\n# 二、组件内抛出的事件\n\n## **tagDragStart** tag拖动前，参数为当前tag的数据\n```typescript\ntype ITagItem = {\n data: Itags; // Itags 为之前的 props.rows 中的Itags类型，用于存储原始数据\n parentKey: string; // 记录所属父节点 - 行\n tagId: string; // 内部生成的用于区分tag的唯一id\n timeStampDiffer: number; // 开始时间与结束时间的时间差 - tag 拖动时需要保证时间差不变\n style: { // 当前tag的样式信息\n top: number | string;\n width: number | string;\n left: number | string;\n height: number | string; // 高度\n transform: string; // 用于实现拖拽避让动画\n }\n } & Required\ninterface IParams{\n tagItem: ITagItem;\n}\n$emit('tagDragStart', params: IParams) // IParams 也就是源码中factoryTag方法的返回值类型\n```\n\n## **tagDragEnd** tag拖动结束\n```typescript\ninterface IParams{\n tagItemOld: ITagItem; // 拖拽前tag Data\n tagItem: ITagItem; // 拖拽的tag Data\n tagItemDom: HTMLElement; // 拖拽的tag Dom\n left: number; // 拖动结束相对于甘特图画布【即不包含横纵滚动的画布】的left\n top: number; // 拖动结束相对于甘特图画布【即不包含横纵滚动的画布】的top\n}\n$emit('tagDragEnd', params: IParams)\n```\n\n## **closeTagTimeDialog** 当 dragTagEndShowTimeDialog 为true，tag拖动结束后会打开时间选择弹窗用于精确控制tag的起止时间，当弹窗关闭时触发此事件\n```typescript\n$emit('closeTagTimeDialog')\n```\n\n## **tagClick** tag点击事件\n```typescript\ninterface IParams{\n e: MouseEvent; // 鼠标点击事件参数e\n tag: ITagItem; // 同上\n}\n$emit('tagClick', params: IParams)\n```\n\n## **tagContextmenu** tag上鼠标右键事件\n```typescript\ninterface IParams{\n tag: ITagItem; // 同上\n}\n$emit('tagContextmenu', params: IParams)\n```\n\n## **tagMenuBtnClick** tag上打开的右键菜单点击事件。【注意：前提是 legend 中当前类型的 btnList 有值，不然菜单都没有】\n```typescript\ninterface IParams{\n e: MouseEvent; // 鼠标点击事件参数e\n target: {\n label: string; // 按钮名称\n disabled?: boolean; // 是否禁用\n }, // 菜单触发项\n triggerIndex: btnIndex; // 菜单触发索引\n tag: ITagItem; // 同上\n}\n$emit('tagMenuBtnClick', params: IParams)\n```\n![右键菜单按钮](./docAssets/右键菜单按钮.png)\n\n## **changeMarkLineClick** showMarkLine 为 true 时，点击甘特图触发该事件。【注意：左侧任务栏不会触发此事件。】\n```typescript\ninterface IParams{\n markLineTime: string, // 当前点击点在甘特图内对应的时间\n inTags: ITagItem[] // 当前时间贯穿的所有tag\n}\n$emit('changeMarkLineClick', params:IParams)\n```\n\n## **update:markLineTime** showMarkLine 为 true 时，markLineTime的值，vue2 使用 markLineTime.sync，vue3 使用 v-model:markLineTime 可以实现多个图标记线联动效果，见demo。\n```typescript\n$emit('update:markLineTime', params:string)\n```\n\n## **rightClickMenuClick** 甘特图画布区域内右键菜单点击。\n```typescript\ninterface IParams{\n e: MouseEvent; // 鼠标点击事件参数e\n target: {\n label: string;\n disabled?: boolean;\n }; // 菜单触发项 - 即 rightClickMenuList 的item项\n triggerIndex: number; // 菜单触发索引 - rightClickMenuList 中的索引\n coordsInfo: {\n x: number; // 鼠标右键触发点x坐标像素，注：是相对于甘特图画布【即不包含横纵滚动的画布】的\n y: number; // 鼠标右键触发点y坐标像素，注：是相对于甘特图画布【即不包含横纵滚动的画布】的\n coords: [string, string] // x,y像素坐标转成的数据坐标\n };\n}\n$emit('rightClickMenuClick', params:IParams)\n```\n\n## **taskMenuBtnClick** 左侧任务列操作菜单点击事件。\n```typescript\ninterface IBtn{\n label: string;\n disabled?: boolean; // 是否禁用\n}\ninterface IParams{\n e: MouseEvent; // 鼠标点击事件参数e\n target: IBtn, // 菜单触发项\n triggerIndex: number; // 菜单触发索引\n rowData: {\n h: number;\n label: string;\n tags: ITagItem[]\n taskBtnList: IBtn[]\n }\n}\n$emit('taskMenuBtnClick', params:IParams)\n```\n\n# 三、组件重要实例方法介绍\n## getRowsData() 获取甘特图完整行数据, 格式和props.rows一致\n```typescript\ninterface IGanttChartVueInstance{\n getRowsData(): IRowsItem[];\n}\n```\n\n## getTimePierceTags('2023/10/04 06:10:00') 获取指定时间贯穿的所有tag\n```typescript\ninterface IGanttChartVueInstance{\n getTimePierceTags(time:string): ITagItem[];\n}\n```\n\n## clearAllTagSelected() 清空所有tag的选中状态，将 selected 都设置为 false\n```typescript\ninterface IGanttChartVueInstance{\n clearAllTagSelected(): void;\n}\n```\n\n## getAllSelectedTags() 获取所有被选中的tag，也就是将 selected 为 true 的过滤出来\n```typescript\ninterface IGanttChartVueInstance{\n getAllSelectedTags(): ITagItem[];\n}\n```\n\n## updateTag(tagId, newTagItem, refreshGTT) 修改tag节点，比如修改此节点的selected、className、closeTip等等属性\n```typescript\ninterface IGanttChartVueInstance{\n /**\n * 修改tag节点\n * @param {*} tagId 生成的甘特图tag唯一id\n * @param {*} newTagItem 修改后的tag\n * @param {*} refreshGTT 修改tag后是否需要刷新甘特图，不涉及宽高计算变化的可以不调用刷新，提高性能\n * @return boolean 操作成功 | 失败\n */\n updateTag(tagId: string,newTagItem: ITagItem, refreshGTT: boolean): boolean; // 操作成功返回 true，失败返回false\n}\n```\n\n## deleteTag(tagId) 删除tag节点\n```typescript\ninterface IGanttChartVueInstance{\n /**\n * 删除tag节点\n * @param {*} tagId 生成的甘特图tag唯一id\n * @return boolean 操作成功 | 失败\n */\n deleteTag(tagId: string): boolean; // 操作成功返回 true，失败返回false\n}\n```\n\n## getTagsByRowLabel(label) 获取指定label行下的所有tags\n```typescript\ninterface IGanttChartVueInstance{\n /**\n * @param {*} rowLabel 左侧任务栏的label\n */\n getTagsByRowLabel(rowLabel: string): ITagItem[];\n}\n```\n# 四、slots 插槽\n\n## tagTip 插槽可以自定义 tag 的 tooltip 效果，tag tooltip 是基于 element-plus 的 el-popover 实现的。\n```vue\n \n \n\n```\n# 五、其他说明\n文档中部分类型相同的没有再列举，全局搜索下就找到了，实例方法只是列举了几个常用的，应该能满足大部分需求了。源码注释很清晰，大家也可以二次开发，不过记得保留版权声明，或者提个issue，我看到了有时间就来改。如果 github 上文档里面的图片显示不出来，可以把项目下载下来在本地查看，引用的图片都在里面。\n\n# 关于打包发布遇到的问题\n\n### 从 vue2.x 升级到 vue3.x 版本\n1.将 element-ui 改为了 element-plus，其中 Popover 修改了下，element-ui 版本的 Popover 不能直接拿来使用。 \n2.源码内部 tag 事件名称修改，如在 vue2.x 版本的 click 改为 tagClick，contextmenu 改为tagContextmenu，blur 改为 tagBlur。因为发现取原生事件名称将导致事件重复触发，其中一次由原生事件触发。\n\n### dayjs 模块\nelement plus 内部包含了 dayjs 模块，因而不用单独引入。\n\n### 打包发布时分离 element plus\n因为vite 打包提供了 rollupOptions.external 可以分离 element plus，这样编译后的体积更小。在发布后的 package.json 里声明了的 element plus 的依赖，因此无论用户的项目是否有安装 element plus，都可以保证甘特图正常使用。\n\n### 样式问题\n甘特图样式被分离出去了，因此使用甘特图的时候要单独再引入样式。 \n分离 element plus 后甘特图内按需导入用到的 element plus 组件与其样式。 \n```js\n// element-plus 导入组件样式\nimport 'element-plus/es/components/message/style/css'\nimport 'element-plus/es/components/button/style/css'\nimport 'element-plus/es/components/dialog/style/css'\nimport 'element-plus/es/components/date-picker/style/css'\nimport { ElMessage, ElButton, ElDialog, ElDatePicker } from 'element-plus'\n```\n后改为 element plus 官网提到的 unplugin-element-plus 插件，用于替代上面手动导入样式的写法，这种方式也避免了 element plus 后续升级了如果目录变化了，样式加载不出来的情况。 \n需要注意的是**目录修改了，之前 packages 目录是在外面的，现在需要挪到 examples 目录里面**，因为 import element-plus 样式的时候找不到文件，是 vite 框架问题？element-plus 组件可以访问，为啥样式就不行，留到后面再找下原因？使用 unplugin-element-plus 插件也要求 packages 目录在examples 目录里面。\n","readmeFilename":"README.md","_rev":"1-812b4885c3075f00f40c41f518ee6607"}