前端大文件下载

思路 利用浏览器a标签进行下载 实现 // url为文件路径,name为文件名 const downloadFile = async (url, name) => { try { const a = document.createElement('a'); a.setAttrib


vue使用defineAsyncComponent优化组件加载

背景 如下图中间tab页每个页面内容都很多,加载很慢,想要加载过程中添加占位内容增强用户体验 流程 父组件渲染 ↓ 触发异步组件加载(执行 loader) ↓ ↓------------------ 如果加载时间 > delay(默认 200ms)------------------↓ ↓


vite配置打包优化

通过配置vite的assetsInlineLimit打包参数,使小于1kb的图标资源内联为base64编码以避免额外的http请求 通过配置vite的cssCodeSplit打包参数,禁用css代码拆 分,进一步优化加载时间。 // vite配置 build: { cssCodeSpli


利用IntersectionObserver API实现滚动视窗时的元素显示隐藏特效

背景 我的书签项目预览页想添加滚动时视窗内的元素显示,视窗外的元素隐藏的过渡效果,提高页面的吸引力 实现 通过IntersectionObserverj监听每一个模块是否在视窗内,结合Animate.CSS动态的添加和移除class类名 前提:main.js入口文件引入animate.css动画库


jenkins构建前端项目可选择主题和logo

背景 公司TAP项目出售给不同厂家会用到不同的主题色和logo,如果是每次打包手动修改就太麻烦且容易出错,通过在发版时构建镜像打包时选择主题和logo可以极大的提升效率。 实现 1.修改jenkinsfile文件 添加THEME和LOGO的环境变量选项,logo分别添加了AIPAAS和MINERVA


nginx的斜杠注意事项

参考:https://juejin.cn/post/7083306471697416228 代理路径不带/ location /client_labelu { proxy_pass http://172.21.6.123:31604; } location /client_labelu/ {


ifram嵌入Label U

1. 背景 公司的人工智能服务平台(TAP)需要添加新的功能:对数据集创建数据标注任务,标注完成时将文件回传至数据集。 经过一系列调研,最终我们选择了开源的Label U项目,并决定通过iframe接入的方式来使用Label U,然后根据业务需求修改Label U的源码。 2.思路 因为是通过ifr


Elment Plus dialog组件添加整体loading效果

背景 在一些dialog弹窗提交场景下,有时需要等待提交完成才能继续后面的流程,而且dialog弹窗不能做任何操作,由此需要添加一个覆盖整个dialog弹窗的loading效果,,但是element提供的v-loading指令无法直接作用在dialog上面。 方法一: 自定义一个指令 优点:通用性更