首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
vue日常开发
迷途小码农_前端版
创建于2023-08-15
订阅专栏
vue日常开发记录
等 8 人订阅
共25篇文章
创建于2023-08-15
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
Element 分页表格跨页多选状态保持方案(十几行代码解决)
在使用 Element-Plus/Element-UI 的分页表格(或者其他表格组件)时,默认的多选功能无法跨页保持选中状态。当切换分页请求新数据后,之前选中的数据会被清空。
解决前端竞态问题的乐观锁机制
在前端开发中,搜索框的实时搜索功能是一个常见场景。用户输入文字时,每输入一个字符就发起搜索请求。但这里存在一个潜在的竞态问题:如果后发起的请求比先发起的请求更快返回,可能会导致错误的搜索结果显示。 防
最佳移动端适配方案—REM
移动端适配方案 移动端适配最常用的方案就是使用rem。 下面介绍经过配置,我们只需要按照设计稿(例如750px宽度的页面)的px正常开发。通过postcss-px2rem自动帮我们转换成rem。完全不
性能优化:Nginx配置 GZIP 压缩、强缓存与 HTTP/2
背景 使用nginx部署web项目,调整nginx的配置进行性能优化。 GZIP 压缩:压缩响应数据,减少文件大小,提升传输效率。 强缓存:通过缓存策略减少重复请求,减轻服务器负担,提升响应速度。 H
Vue后台管理系统:实现动态组件命名与页面缓存
背景 领导要求后台管理系统实现tabs标签页功能,每个页面打开后需显示标签并缓存页面。 使用Pinia定义一个tagStore保存路由路径,并结合keepalive实现缓存。 但是遇上了缓存的页面组件
性能优化:import动态加载组件
背景 在实际开发中,封装组件是一个常见需求,尤其是在处理灵活配置的场景时。比如,一个通用表单组件需要支持动态配置表单项,并需要配置配置数据引入不同类型组件,包括自定义组件。这样的需求需要设计低耦合、高
使用 patch-package 打补丁修改 npm 包
背景 使用 patch-package 修改npm包uview-plus 的 index.js 希望禁用在 H5 环境下会加载所有组件的一段代码。 修改前: 修改后: patch-package 介绍
vite插件:记录打包完成时间,并生成version.txt文件
背景 vite项目,前端配置了自动化部署,每次git push就会自动打包。但是想知道是否打包成功,耗时多久。 插件代码 /src/plugin/build_version/ts 效果
html-to-image + print-js 生成超长图并打印
需求 需要打印表格,UI组件库的表格如果用原生的打印会出现样式显示不全的问题。边框也会不见。 网上找到个方法 使用html2canvas把表格转成长图然后使用print-js打印。 虽然html2ca
Vue3 权限控制指令:实现点击事件拦截
需求 有很多功能模块。用户等级不同可以使用的功能也不一样。但是所有模块的页面必须全部显示。 只有点击的时候如果没这个功能的权益才提示去够买。并且拦截掉原先按钮的点击事件。 形如: 思路: 思路1: 在
提升前端开发效率:Element Plus 封装 CForm 表单组件
前言 在现代前端开发中,表单是几乎每个项目都会涉及的功能模块。然而,传统的表单组件往往代码冗长、逻辑复杂,难以维护和扩展。因此,我们设计并封装了一个高效灵活的表单组件——Cform,旨在简化表单的使用
提升前端开发效率:Element Plus 封装 CTable 和 CSearch 表格搜索栏组件
在实际项目中,由于业务复杂性,组件不可封装得过于死板,因为个性化修改需求一直存在。但我们希望尽可能减少基础代码的编写,通过配置数据的方式使用组件,并且保留组件的灵活性。 本文的表格将仿照naiveUi
记录一次修复 vite+vue3.0项目 修改文字后 会加载整个页面的所有组件模块问题
背景 修改公司后台管理系统(简称系统A)的 一个页面的文字,然后发现需要等待5-7秒才会热更新到页面。 刚开始怀疑是vite的问题。看完了整个vite的官方文档和热更新相关的issue。无果。 谷歌搜
nuxt2 配置本地proxy代理开发,解决跨域问题
背景 本地开发时候总会遇上接口跨域问题,不可能每次都让后端设置接触跨域限制,因为后端也会有安全性的考量。 那么就只有在本地搭建proxy服务实现请求转发了。不然本地开发没办法调试接口。
vue3 overlay组件
用的组件库没有单独的overlay遮罩层组件,所以自己写了一个,备份下~~~~~~~~~~~~~~~
typescript 枚举利用jsdoc查看每个枚举注释
typescript 枚举利用jsdoc查看每个枚举注释typescript 枚举利用jsdoc查看每个枚举注释
优雅实现文本展开收起功能(全平台兼容)
实现文本溢出的展开收起功能,纯 CSS 方案在网页中可行,但在小程序中存在兼容性问题。 最优的解决方案就是使用 JavaScript 的二分截断法。 通过研究 vant 的 TextEllipsis
Vue3封装文件下载指令
背景 为了项目方便的下载文件,封装下载文件指令。使用时只需要: 指令源码存放到src/directives/down.ts 全局注册 在sfc模板使用 在编写渲染函数的场景结合h和withDirect
nuxt 引入qrcode 生成二维码并保存
nuxt2 引入qrcode 生成二维码并保存文件。 支持展示圆角。自适应设备大小。~~~~~~~~
vue3 uniapp 自定义底部栏
描述 uniapp vue3 自定义底部导航栏,自动占位,不需要在使用的页面使用margin-bottom或padding-bottom占位。 效果 tabbar.vue 组件代码
下一页