今天我的开源组件 @xpyjs/gantt star 数到了100。虽然没有刻意推广过，但是时不时还是会有人 star 我的仓库，很开心，这也是我持续搞它的动力。 目前我已经将 vue2 和 vue3 分成了两个版本，可以分别使用。 vue3 版本持续更新（虽然已经有阵子没动了，实在太忙了，但我会持续更新的） vue2 没有什么新内容了。如果有 bug，还是会持续改善的。 这个组件确实比较局限性，但是我觉得吧，它比目前我能搜到的开源组件还是要定制化一些，毕竟当时我是因为没有合适的，才会自己开发一个，感谢这些 sta…

在使用 TypeScript 时， *.vue 文件中经常也需要用到类型声明，但是只要是我们在组件内部定义的变量，无一例外在使用类型声明时都会报错： 这主要是 eslint 与 TypeScript 存在冲突。 eslint 中的 no-undef 规则是依赖配置的，而不是使用 TypeScript 来确定存在的全局变量 所有类型检查已经由 TypeScript 提供，所以无需在 TypeScript 项目中使用 no-undef 规则。这属于重复检查。 所以，我们只需要重写其规则即可。在 ESLint 配置文件中…

每次加载 element 的 table，当在 tabs 标签中切换时，table的宽度都会从一个较小值展开，看着就是闪烁，体验非常不好。 看了一下，我这里在它内部 table 标签不知道为什么要添加一个 style="width:320px" 的固定值，直接替换了就可以： table { width: 100% !important; } 嗯，使用起来没什么副作用。

对于 ts 项目来说，vue2 使用 vuex 是很难受的，无论怎么修改声明都不会有类型提示，这让 ts 的体验大打折扣。 常规做法，我们在 src 根目录下创建一个声明文件，然后填入： import { Stroe } from 'vuex'; declare module 'vue/types/vue' { interface Vue { $store: Store<State>; } } 这并不生效，在页面中，$store 依旧是 any 类型，因为在 no…

使用 element-ui 的时候，没有右键菜单，是个很头疼的事情。使用插件，很多功能又不能很好的兼容，于是快速封装一个，和项目贴合度 100%。 希望的方式 我希望在使需要的区域实现可以出现右键菜单，那么在这个区域的组件中添加一个右键菜单组件即可，通过属性配置菜单内容。 效果图 思路 右键菜单组件获取父组件，给父组件添加右键事件，然后渲染菜单选项。 嗯，就是这么简单。 实现 1、获取父组件 首先，要封装一个组件 ContextMenu，在挂载后，给父组件添加右键事件。 mounted() { this.$el.p…

之前不是把 Gantt 项目从 vue3 给移植到 vue2 了么，通过官方提供的 @vue/compostition-api 包可以轻松移植，虽然有一些限制，但整体还是很友好的。 但最近受到一些反馈，说挂载后初始化一直报错，我就百思不得其解，我也没修改过，本地跑一直也没问题。于是逐行查找问题，最后发现了问题。 我使用的是 vue 2.6.14 版本，如果是新项目，虽然通过 vue create 命令创建后 package.json 文件中依赖写的是 vue: ^2.6.14，但实际上会安装 2.7 的版本，这就导…

一个移动端程序，当切换页面时，通常需要配套一个进入或者渐出动画，与 app 相同，进入默认从右侧滑入，而渐出时往左滑出。 动画实现很简单，比如 vant 自带 slide-left 和 slide-right，在 <transition name="slide-left"> 中就可以直接使用，当然样式也可以自己写，这里不讨论。我们重点说一下如何实现动态判断页面该使用 left 还是 right。 很简单的思路，使用路由判断，当路由使用了 back 进行返回页面操作，就执行渐出的动画。…

开始之前 最近一直在赶项目，持续的连轴转让脑子都慢了。。。现在大概已经初步完成了，回过头来复盘一下，有很多需要优化的地方。 以下内容仅仅是列一些我们经历的、操作过的优化思路，仅供参考。 优化的目的 优化无非就是增强体验感，如果使用的时候出现卡顿、等待，甚至崩溃，那么必然体验是失败的。此时就需要进行优化。 优化的几个点 这里以我们项目中很长的一个页面为例，该页面中有大约400个组件，每个组件都需要数据请求，组件大部分都是表格和图表（echart）。嗯，这就是大概的前提。 1、拆分页面 如果可能，还是尽量不要设计信息量…

网站图片十分常用，尽可能让图片使用缓存，是一个提高页面效率的常见方法。那么页面如何判断图片是否已经缓存了呢？很简单，通过 HTMLImageElement.complete 属性就可以做到。 实现方式 const img = new Image(); img.src = 'xxx'; // 图片原地址 if (img.complete){ // 已经加载 } else { // 还没加载 } 通过这种方式，可以快速判断图片是否已经缓存，并可以结合这个方法进行不同的后续处理。 原理 利用 HTML…

起因 最近有人给我的 jz-gantt 提了个bug，说页面中放多个 gantt 组件会出现异常。我复现了一下，还真是。原因呢，也很简单，之前的升级小记中也记录过，就是因为 全局变量 冲突，当时没有意识到这会成为一个问题。这个之前还没考虑到，也是因为刚开始用 vue3，以为它会自动管理全局变量，但是，并不是~ 因为挂载多个组件，导致变量名重叠，最后只有最后一个挂载的组件中的变量会生效，这就导致了多个组件出现了异常情况。简单来说，之前那种全局变量的方法是真正的全局变量，它适合用在项目中，而并不适合用在组件中。 修改思…