![](https://img-blog.csdnimg.cn/a9a8d6d5da854d2c90cc5b819050be0e.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端功能
文章平均质量分 76
实战里写过的功能业务
鹤渺
这个作者很懒,什么都没留下…
展开
-
vue el-table 前端js实现导出数据为Excel
使用 HTML 表格和 Blob,将数据动态生成为 HTML 表格,然后通过 HTML5 的 Blob 和 URL.createObjectURL 方法来创建一个链接,最后让用户点击链接下载生成的 Excel 文件。虽然不是真正的 Excel 文件,但可以在大多数情况下满足导出需求。原创 2024-03-20 11:47:17 · 2664 阅读 · 1 评论 -
vue实现水印功能
在页面里添加水印,一种是特定页面加水印,那么本页面加水印功能即可,用CSS/JavaScript都可以实现,另一种是全局都加水印,这种可以考虑某些页面不需要加水印,在路由守卫或者其他地方去掉即可。写在前面,水印的实现原理:创建一个canvas,画一个客户端高x客户端宽的画布,里面画满水印,并将其的层级z-index设置最高,使其一直显示在界面的最上方。原创 2024-02-28 19:46:07 · 3365 阅读 · 5 评论 -
在el-tabs中echarts图表宽高设置style=“width: 100%; height: 100%“不起效变成100px的问题
最粗暴的解决办法是给div一个固定的高度,也就是上面三种解决方案的核心,比如你遇到问题时候实时给div一个高宽恒定值,然后看看画出的图尺寸变没有,再去考虑是样式冲突或者组件渲染的问题导致这种情况。原创 2023-12-22 18:55:42 · 1904 阅读 · 0 评论 -
Vue 复制、下载 图片和文字
实现图片和文本的复制和下载方法应该挺多,而后者如果想要一张图片和文字说明都被下载,那肯定是在一起,下载成一张图片的样子,所以后者的实现方法,我暂时只想到一种:画canvas然后下载。都是需要浏览器的Clipboard 支持,大部分都支持。原创 2023-12-22 17:33:26 · 2315 阅读 · 0 评论 -
vue3+element-plus 表格全选和跨页勾选,以及全选全部功能
这个功能,需要考虑很多交互的逻辑,因为我写的是【全选全部】是一个checkbox的勾选框,所以要考虑取消勾选的功能,自然就有了上面真正实现时的难点。但是如果这个功能是通过一个按钮控制的,点击按钮就代表全选所有操作,那么自然不用考虑取消勾选和禁用的逻辑,因为全选所有时,就已经走完批量全选的流程了。两种实现方式根据业务具体的调整,这次也是为了记录实现这个功能时遇到的问题和思考。原创 2023-10-30 11:46:27 · 10962 阅读 · 0 评论 -
vue3+element-plus 高度封装搜索组件,支持多种类型
总的来说,封装搜索组件有助于提高前端应用的开发效率、质量和可维护性,特别是在大型应用中或需要频繁使用搜索功能的情况下,封装搜索组件是一个明智的选择。但是!我写的感觉还是不要高级,很多配置都是在业务堆积的过程中,一点点添加的。希望下次写个可扩展性和维护性高的。原创 2023-10-19 20:13:01 · 3733 阅读 · 2 评论 -
vue3 列表页开发【选择展示列】功能
目前我经常是通过这个方式写【选择展示列】功能,过滤那部分,没怎么考虑最优解,反正数据也不多,直接这样写了,如果有更合适的方式,欢迎分享~原创 2023-10-17 19:40:57 · 1142 阅读 · 0 评论 -
vue3+element-plus 封装列表页,分页,排序,导出
虽然是简单的业务逻辑,但是封装起来使用更方便,这里是记录这种常见类型的列表页的业务需求实现方式。还有一篇实现,可以筛选的表格列 的实现方式。原创 2023-10-17 16:49:08 · 2181 阅读 · 2 评论 -
封装当文字过长时显示省略号和tooltip,以及多行溢出时显示tooltip
项目中很多地方需要显示一些字段信息,比如项目信息,项目说明的字段,总会有需求是显示当字段内容过多的时候,加省略号显示,然后显示tooltip。原创 2023-06-06 11:57:29 · 3212 阅读 · 1 评论 -
window.open和vue router新开页面
打开新页面,并实现在新开页面中携带参数,可以使用 URLSearchParams 对象,进行参数的拼接和解析,vue router跳转新页面和window.open都可以,三种方式适应于不同场景。以上是几种常在开发中使用的几种跳转和新开页面的方式,关于router,在后续里更深入学习。原创 2023-05-18 15:46:09 · 8638 阅读 · 0 评论 -
学习防抖和节流
以上就是关于防抖和节流的记录啦!总算深入的学习了。原创 2023-05-17 19:58:14 · 374 阅读 · 0 评论 -
仿照elemenet-image的预览开发图片切换和放大缩小等功能
开发一个看图片录入的页面,可以查看图片并填写表单业务需求是页面里分为两大部分,左侧是图片大图和底部轮播图,右侧是图片的详细信息和表单,表单的内容是根据图片里的信息来填的,那么拿到这个需求,其实前端这部分只需要实现的就是图片放大缩小旋转,底部有一个略缩图可以切换选择图片等,以及填写提交功能。原创 2023-04-07 21:04:16 · 847 阅读 · 0 评论 -
VUE3 引入富文本插件 CKEditor5
vue3的可选择的富文本插件很多,这次的业务需求只是简单的文字加粗,换行等,不需要图片文件等的功能,所以我暂且需要的是简单的富文本编辑器,查找一些资料,最后选择的CKEditor5,选它是因为它开源,可免费使用到商业用途。之前尝试了tinymce,但是公司不打算申请apikey,所以alert提示框的问题解决不了……具体见文末。原创 2023-04-07 14:59:12 · 4297 阅读 · 0 评论 -
element-plus el-upload 个人设置页点击头像可以裁剪并修改头像
个人设置页面点击头像能选择头像,打开裁剪框,确定后上传给后端,再次点击后上传可以替换。原创 2023-01-07 18:20:38 · 2373 阅读 · 0 评论 -
vue 新年倒计时+准点烟花特性
新年倒计时和准点烟花。原创 2023-01-07 16:34:33 · 1344 阅读 · 0 评论 -
el-input输入校验不能为空格,不能输入全部为空的内容
输入框的校验太常见了,基本上常见的为:不能为空,不能输入空格,和不能输入全部为空的内容。这里对这个进行记录。原创 2023-01-06 19:56:36 · 7186 阅读 · 0 评论 -
vue+element-plus 密码校验及动态校验
团队想给新系统的新建/修改用户、个人设置的修改密码中的密码输入框加一个密码校验。具体加什么校验,产品参考了几个增加密码复杂度的校验,比如不能输入连续的3个数字,这种校验,但是好像密码的复杂度并不能保证系统的安全性,好像邮箱验证会比较安全?虽然密码只防君子不妨小人,但是设置密码校验也只是避免用户输入过于简单的密码,比如:123,123456,111111这种。针对我们这个项目,我们的密码校验规则是:包含英文字母大小写、数字和特殊符号且在8到16位的任意组合原创 2023-01-04 14:49:28 · 5824 阅读 · 5 评论 -
vue2+iview 图片文件上传 Upload组件
记录一个图片上传的功能,满足只能上传一张图片,并且可以需要判断上传图片是否为png,且大小不能超过2MB,除此之外,先上传图片,再点击提交按钮提交图片。原创 2022-11-16 15:20:31 · 1023 阅读 · 0 评论 -
el-table 表格列宽根据内容自适应,通过计算宽度实现
根据网上找到的几个解决方案,都是计算宽度实现的,这里我也是用的这种方式,但是由于数据有些地方缺失,还有一些地方的数据为string,里面带”\n",所以根据项目情况,我优化了这个计算宽度的函数,这里作为记录。原创 2022-11-07 15:59:23 · 5644 阅读 · 6 评论 -
el-table 树类型的表格数据和右侧内容切换,点击父节点会折叠
element ui 里面有支持树类型的表格数据展示,我想要实现既可以展示树形数据,并且点击子节点可以切换右侧内容,展示子节点的详细数据,点击父节点,会折叠收起。整体效果是如编辑器里的文件夹一样。原创 2022-10-24 11:53:50 · 2001 阅读 · 0 评论