- 博客(30)
- 收藏
- 关注
RSS订阅原创 Vue在线预览文件（docx/xlsx/pdf）
在Vue开发中，可以利用一些第三方插件来实现文件预览功能。例如使用vue-office插件来实现文件的预览。注意：据网上资料所说，此插件还存在部分缺陷，比如docx的艺术字体、excel的多种数据格式解析不准确的问题，对此有很高要求的小伙伴慎用。文件上传时触发handleChange事件，执行操作：1. 解析文件名匹配对应预览组件，利用previewFileCom函数，2. 设置预览文件的url，3. 展示预览弹窗预览组件渲染完成、渲染失败时分别调用**render
2024-04-19 14:26:12
631
原创 Web实现纯前端输出pdf打印 print
后台管理系统中，会常用到打印功能，打印一些表格数据、信息之类的。此处做个简单的打印示例。此功能模块，主要分为三个部分打印组件作为处理，将需求跟模板文件映射起来。1. 打印模板文件，提前编写好的数据展示模板；2. 打印组件，将模板文件名跟模板文件映射起来；3. 应用demo，实际应用。
2024-04-17 16:43:38
253
原创 表单实战之分类多选实现
开发后台管理系统的过程中，会出现一些管理员配置功能的部分，比如一些开放接口权限的开通。分析一下，“开放接口权限的开通”，会有很多的权限可以开通，那就是多选。另外，开放接口肯定会进行分类，类别唯一。按类进行多选，再加上个全选的功能。支持多选的同时还需要分类，会有点复杂，就需要设计好数据结构，内部有具体类别的标识与选中的数据存储。至此，需求就分析完毕了。
2024-01-05 17:32:00
451
原创 多语言管理方案 - Excel导入与导出
前篇：结合本博客之前的国际化多语言的实现与实际业务场景，意识到人工在项目中手动配置、替换多语言花费的人力成本较高，于是衍生出其他的管理方案，解放双手，核心原理就是多语言配置文件与 Excel 文件相互转换、文件读写。因为Vika单词插入记录最多10条，此处就不演示直接与Vika进行多语言管理的实现，代码在博主本地，有需要的可以私。
2023-12-28 11:09:02
427
原创 JS xlsx 数据导出/导入excel文件格式
在做后端开发管理实际业务开发中，有时会遇到处理导入、导出Excel文件的数据，比如多语言管理和报表数据。将前端数据中对象数组格式的数据与excel格式数据进行相互转换。既然时对 Excel 文件进行处理，自然需要插件了，比如 xlsx。于是，进行简单demo的实现与演示。
2023-12-27 14:47:30
513
原创 纯前端利用emailJS发送邮件
因实际工作中有涉及到前端调用邮件发送的功能，了解到 EmailJS 插件，即出此文。需要在 EmailJS 官网中注册一个邮箱账号，并创建邮件发送服务和邮件模板，获取serviceID和templateID，进而实现功能。
2023-12-25 15:08:38
728
原创 JS Web页面指定元素保存为pdf文件
在实际业务开发中，经常需要实现将页面中的echarts图表和统计数据一键保存为pdf文件。这涉及到两个阶段功能：1. 将页面某部分内容截取出来，成为图片格式（类似于截图）；2. 将图片保存为pdf文件。于是，此处需要**html2canvas.js** 和 **jspdf.js** 两个插件。首次，需要安装此两个js插件。插件安装好后，进行引入。明确需要打印的元素、操作事件，接下来就是插件调用与逻辑处理了。需要将报表内容以图片、pdf文件的形式通过邮件发送给指定客户，此处扩展发送邮件相关内容。
2023-12-20 16:55:09
384
原创 Axios http请求拦截、封装
在实际项目开发中，请求后端接口都需要去调用http，目前常用的基于promise的网络请求库。但是实际应用时，还是需要进行封装处理，配置ip、超时时间、请求拦截、响应拦截等操作。此处涉及以下几个方面：1. 基本配置 2. 参数处理 3. request拦截器 4. response拦截器。
2023-12-13 15:27:59
54
原创 Vue自定义指令 - 权限
vue有自定义指令的功能，开发者可根据实际业务需求自定义各种功能的指令，其中常出现就的就有鉴权指令。登录时获取用户信息，包含权限列表，存储到store中。每次使用自定义权限指令时，代码都会跟store中的权限列表内权限做比对，有权限则显示该元素，否则删除其节点（其子节点也会被删除）。
2023-12-10 17:47:18
63
原创 RSA加密与解密之JSEncrypt
RSA加密算法是一种非对称加密算法，有公钥、私钥，长度越长 加密强度越大，高于768位的密钥相对比较安全，所以被广泛使用。使用公钥加密的数据，利用私钥进行解密。使用私钥加密的数据，利用公钥解密。前端放A公钥、B密钥。服务端放B公钥、A密钥。服务端用B公钥加密数据传给前端，前端用B密钥解密。
2023-12-10 17:23:37
252
原创 JS web页面实现全屏/退出全屏
部分项目在开发过程中，会有全屏功能的需求，实现指定元素全屏显示，比如数据大屏等。于是，本篇来通过调用浏览器原生API实现此功能组件。流程为进入页面，元素本为非全屏模式，监听页面全屏状态。点击全屏icon，判断浏览器是否支持全屏且目标元素存在且浏览器全屏事件存在，条件成立，调用浏览器接口。点击退出全屏icon，判断浏览器是否支持全屏且全屏元素存在且浏览器退出全屏事件存在，条件成立，调用浏览器接口。维护 isFull 字段，控制全屏icon的显示。
2023-12-06 10:31:28
194
1
原创 Vue-i18n国际化多语言-在线表格翻译
经了解，可是通过在线表格的方式，拉取最新的多语言，在编译前执行已经封装好的操作，便可直接替换已有翻译，降本提效。于是，有了这篇文章。原理：在编译前，拉取在线表格数据，替换本地多语言配置文件。Vika，NodeJS，在线表格。除此之外，还可对本地excel进行多语言翻译数据读取。
2023-11-01 16:02:36
218
4
原创 VUE3+Ant Design Vue+TS实现当前语言切换组件
当涉及到国际化的内容时，系统往往需要配有多套语言翻译文件，并支持当前语言环境的获取和切换当前语言功能，随之整个系统将切换成对应的多语言。直接在需要应用的地方引入并使用就可以，不需要传任何参数，组件自身会根据当前语言环境自动获取当前语言。
2023-10-26 14:45:21
157
1
原创 VUE3+Ant Design Vue+TS实现手机号输入组件（带区号）
VUE3+Ant Design Vue+TS实现手机号输入组件（带区号）。因实际业务需求，频繁需要使用手机号输入，包含区号的选择。此组件为区号、手机号输入组件，开放出常用配置项与onChange事件。可单独使用，也可以结合表单使用。
2023-10-26 11:28:35
881
1
原创 VSCode 实用插件分享
此篇用来记录、分享四个简单好用的 VSCode插件，非常具有实用性。 1. any-rule：正则表达式 2. Code Spell checker：拼写检查 3. TODO Highlight：待做高亮 4. Path Intellisense：路径自动补全
2023-09-21 11:29:57
218
1
原创 VUE2局部触发全局loading（provide/inject）
当前有个需求，是路由内部某个组件发生某些操作时，开启/关闭全局（整个页面）的loading效果。在收到这个需求时，考虑到关键点在于跨组件通信，于是想到以下这些方法并进行分析可行性，props、$emit、Event Bus 、Vuex、provide、inject、slots、Ref / Reactive、useAttrs、Pinia，通过以上分析，认为provide/inject的方式比较方便快捷（更熟悉），于是通过此方式实现。
2023-09-21 10:40:33
170
1
原创 VUE3+Element Plus/Ant Design Vue实现动态表格（动态生成表头，表头可配置）
常规的项目基架，安装并引入TypeScript、Pinia、Element Plus、Ant Design Vue，配置好后进行实际编码。主要分为三个部分：全量表头数据（表头项数组）、已选表头数据（十进制数字）、页面渲染。流程：从Pinia中获取已经选中的数据，转化为二进制数字，每一位对应一个表头项的显示/隐藏，根据全量表头位进行匹配处理，获得实际勾选展示的表头项数组，进而根据UI框架的要求处理成对应的结构。
2023-09-01 13:56:57
1375
1
原创 vue-i18n国际化多语言与多套UI组件库使用（Element Plus、Ant Design Vue、Naive UI）
Vue3+TypeScript+Vite+SCSS+（Element Plus、Ant Design Vue、Naive UI）因调研需要，需在同一个项目中集成好几种UI组件库的多语言实现，查看各种组件库的表现情况，以便选定组件库。注意：这只在调研过程中会如此，实际开发项目中极少存在一个项目中集成多个UI组件库的情况。本demo实际试验阿拉伯语、法语、葡萄牙语、英语、中文五种语言。
2023-08-08 16:43:16
2053
2
原创 Vue3+scss 组件内部使用全局样式不生效
全局配置了scss样式，部分组件内部使用全局样式不生效遇到这个问题时，发现在views组件中使用的样式能生效，但是子组件内使用的就不能生效，通过控制台查看，class绑定上了，但是对应的css样式没找到。
2023-08-01 17:20:31
1388
原创 component with `markRaw` or using `shallowRef` instead of `ref`.
Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. Component that was made reactive:
2023-08-01 17:02:08
327
1
原创 You are running the esm-bundler build of vue-i18n.
You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
2023-08-01 16:52:03
2449
2
原创 Vue2升级到Vue3的注意事项
因最近需要考虑使用VUE3开发新项目，但是从公司层面担心有风险造成比较大的损失，于是需要先进行技术调研VUE2升级到VUE3的一些变动。这里根据VUE官网进行了一个整体的梳理。已有VUE2项目升级到VUE3项目可参考
2023-07-28 16:42:09
720
2
原创 scss css预处理器
SCSS官方称SCSS是 “世界上最成熟、最稳定、最强大的专业级CSS扩展语言！兼容CSS： Sass完全兼容所有版本的CSS。可以无缝地使用任何可用的CSS库。特性丰富：Sass拥有比其他任何CSS扩展语言更多的功能和特性。社区庞大： 数家科技企业和成百上千名开发者为Sass提供支持。框架： 有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。SCSS是采用的Ruby语言编写的一款css预处理器语言。
2023-07-23 11:08:03
110
原创 VUE3 +TypeScript + i18n多语言结合使用
在src目录下创建lang文件夹，内部创建index.ts【多语言入口文件】 、zh.ts【中文语言配置】、en.ts【英文语言配置】。由于上一步使用了app.config.globalProperties挂载到全局，所有vue页面都可用$t来使用。但是，在ts中，直接使用是不行的，需要另外引入，setup 有两种写法。
2023-07-13 17:26:24
695
1
原创 CSS3动画实现多个跳动小球（语音输入动画）
VUE使用CSS3动画实现多个跳动小球（语音输入动画）安卓端嵌H5页面，实现语音输入并包含输入时动画，跳动的小球。通过查阅各种资料，根据实际需求场景，最终实现了其功能。在此便回顾记录一下吧。单个小球无限跳动首先，实现单个小球跳动。 分析： 小球起始位置在顶部，中间时间段到底部，最后又回到顶部，并且是无限循环的。通过相对定位与CSS3的关键帧结合实现。多个小球跳动分析： 多个小球同时跳动，相对定位需要left不相同，其次每个小球动画开始有时间差，其次就是小球颜色了。
2023-03-03 10:36:04
908
1
原创 使用Map自定义文件标签
有个场景，需要根据每篇文章所包含的附件文件类型显示对应的Tag，类似于elementUI的tag标签，并且每种文件格式对应不同的配置样式。 作为ES6的新增特性，Map是一种新的集合类型，为这门语言带来了真正的键/值存储机制。于是，在此，就使用Map来实现此功能啦。
2023-03-01 10:54:38
63
原创 Git常用命令
Git常用命令此文用于记录Git命令，常用命令大全，主要按照实际使用流程进行记录，本文主要参考廖雪峰GIt教程，进而简化提炼，适用于有一定基础的同学，如果是0基础的同学，建议先去了解清楚 git 的概念和工作流程。
2022-11-23 15:22:19
88
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人