- 博客(90)
- 收藏
- 关注
RSS订阅原创 前端读取excel文件中的数据--前端自定义导入数据
/ 读取时指定表头（假设第一行是标题）// 或 { header: ["列1", "列2"] }读取多个工作表});写入Excel（导出）{ name: "张三", age: 20 },{ name: "李四", age: 25 }]);XLSX.writeFile(newWorkbook, "导出数据.xlsx");4. 注意事项文件类型兼容性支持.xlsx.xls.csv。大文件处理如果文件很大（>10MB），建议分片读取或使用 Web Worker 避免页面卡顿。安全过滤。
2025-03-25 15:34:18
187
原创 前端多角色权限页面（同浏览器同时登录）数据互串解决
我具体的解决办法是：将token缓存到本地缓存和vuex中，我在接口请求的时候在前置守卫中比较vuex中的token和本地缓存的Token，如果这两个token相同，那么什么都不处理正常发送请求。现在的问题是，在同个浏览器打开两个标签页（都是登录页面），A标签页先登录A的账号，然后B标签页登录B账号。然后回到A标签页对A账号进行操作，调用接口时，我的token是用的本地缓存的Token，这就造成了，A的请求是用的B的Token，这绝对是有问题的。还有的就是A、B两个账号的权限是不同的。
2025-03-06 19:21:08
359
原创 ＜a-upload-dragger＞在设置了accept=“.pdf, .doc, .docx“的情况下拖拽不会触发beforeUpload进行文件类型校验的问题
<a-upload-dragger>在设置了accept=".pdf, .doc, .docx"的情况下拖拽不会触发beforeUpload进行文件类型校验的问题
2025-03-01 10:43:00
118
原创 当上传文件的弹窗正好悬浮在＜iframe＞上面的时候，拖拽文件上传无法成功的解决办法
主要是拖拽文件无法将文件放到上传组件的触发区域，被<iframe>拦截住了。有时候还真不是你组件的原因，可能是其他元素造成的。解决办法：就是给iframe使用这个属性pointer-events: none;让他的的鼠标事件。当然如果你还需要iframe进行交互，可以在上传的时候给他使用这个属性，关闭弹窗的时候，放开这个属性。使用vue的动态class等等。
2025-02-21 13:31:14
168
原创 VUE对接deepseekAPI调用
关于其中 /your-endpoint-path 是需要你自己去api文档中查看的，文档具体地方在最后面。在 Vue 项目中，通常会将 API 调用的逻辑封装到一个单独的文件中，例如。1.先去开放平台注册账号申请api key。2.你的项目需要有发送请求的axios或者自己写。在你的 Vue 组件中，可以调用上面封装的。
2025-01-23 15:51:02
4301
原创 在 Webpack 中使用 预加载（Preloading） 技术可以通过动态导入（import()）以及指定预加载的方式来进行优化
在中使用技术可以通过动态导入（import()）以及指定预加载的方式来进行优化。与 Webpack 不同，Vite 使用的是，所以你可以通过一些简单的配置来实现资源的预加载。
2025-01-14 08:56:31
772
原创 文件上传时遇到的问题：在上传状态变化的时候只触发了uploading状态往后就没触发了不论是done还是error。是因为html写的有问题，在上传的时候，把上传的dom给删了，所以才造成这个原因
我之前写法是用v-if来控制状态的切换，结果就遇到了那个问题，原因就是因为我在uploading状态的时候我把上传的html给删了，这就导致它只能走到这，不能往下走了，所以，后面换成了v-show。反思：好好考虑v-if的使用场景，不能上来就用，得想一想能不能使用。
2025-01-08 10:02:31
251
原创 ＜a-modal＞设置动态的最大高度，使用max-height: v-bind(modalHeight)；发现不生效的原因
例如：:getContainer="() => $refs.modal"你需要将绑定到具体的元素上。
2025-01-03 09:10:14
256
原创 vue中的h
h是一个 JavaScript 函数，用来创建虚拟 DOM 节点。它通常作为render函数的一部分被使用，可以代替 Vue 的模板语法进行视图渲染。h的全称是，它的参数可以是组件、元素类型、属性和子节点。hh函数是 Vue 3 中构建虚拟 DOM 的重要工具，能够让开发者更细致地控制 Vue 组件的渲染。通过h，你可以更灵活地创建元素、传递属性和子节点，以及在运行时动态决定渲染内容。虽然通常 Vue 的模板语法已经足够方便，但在某些情况下，使用h可以提供更强的控制力，尤其是在需要动态渲染复杂内容时。
2025-01-02 09:04:41
747
原创 ＜a-form＞进行表单校验，如果你校验的字段类型是对象或者数组，并且你该字段的校验规则中有whitespace: true，就会出现校验不通过的情况。删除这个校验规则就行
是针对字符串字段的规则，不能直接用于对象字段。如果你有对象字段，需要对其进行字符串校验时，应当在规则中指定具体的字符串属性，而不是对整个对象进行校验。如果需要对对象进行复杂的校验，可以使用自定义的校验规则来处理对象的各个字段。
2024-12-25 20:09:09
342
原创 vue插槽的使用，在作用域插槽中无法直接使用父组件中的变量及解决办法
遇到了一个问题，这个问题就是，我在父组件中使用了一个具名插槽，但是我想在这个具名插槽中使用父组件中的一个变量。但是一直报错，无法直接访问。虽然问题看着简单，但是在开发中真正使用的时候，还真无法一眼看出来问题，因为，这玩意我嵌套了好几层组件，在插槽中还使用了组件，父组件外面还有层组件。但根本问题还是上面描述的问题，就是作用域插槽无法直接在父组件中使用父组件的变量问题。问题的根本原因插槽内容是父组件的模板，它并不是由父组件的作用域来控制的，而是由子组件来接收的。这意味着，。当你尝试在插槽中直接使用。
2024-12-21 09:13:36
333
原创 从短信、邮件、微信外网页等场景打开微信小程序
通过服务端接口或在小程序管理后台生成后，自行开发中转H5页面。将带有中转H5链接的短信内容通过开发者自有的短信发送能力或服务商的短信服务进行投放，实现短信打开小程序。iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。该跳转方法可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。开发者无需调用平台接口，在声明后，可自行根据如下格式拼接appid和path等参数，作为明文 URL Scheme 链接。
2024-12-20 10:02:51
1783
原创 String.prototype.padStart() 方法来实现日不足两位时补充零
你可以使用方法来实现日不足两位时补充零，这样代码更简洁。padStart()会在字符串的前面填充指定的字符，直到字符串达到给定的长度。对于你的需求，会将day补充成两位数（如果day是单数的话）。这是优化后的代码，使用了padStart()
2024-12-20 10:02:09
530
原创 页面卡顿监听PerformanceObserver
/ 监听 longtask// 判断任务持续时间是否超过50ms// 你可以在这里处理卡顿逻辑，如记录日志，发送监控数据等});});// 启动观察器使用可以非常方便地监听页面的性能问题，特别是卡顿问题。当你想要捕捉页面中的长任务时，监听longtask类型的事件非常有效。通过检测执行时间较长的任务，能够帮助你识别那些可能影响用户体验的性能瓶颈。
2024-12-10 08:26:46
414
原创 关于＜a-table＞使用的时候bordered处理
主要是我使用<a-table>并且使用了bordered属性，但是我看浏览器的滚动条样式太丑，我自己修改了一下，结果，就造成了我的table表格表头和表体的线对不齐，我排查了一天多，才修改好，主要是涉及一下几个原因。1、我修改了滚动条的宽度，这个其实是不必要的，想让滚动条样式变瘦一些完全可以设置scrollbar-width: thin;2、还有就是得给table表格增加这个属性：:scroll="{x: 'max-content'}"3、就是table的字段宽度如果没设置好，可能也会造成这样。
2024-12-05 13:53:54
236
原创 使用sass实现文字替换
在 SASS（Syntactically Awesome Stylesheets）中，你不能直接使用像 JavaScript 中的字符串替换那样的功能。不过，你可以利用 SASS 的内置功能（如混入、变量和条件判断等）来模拟一些“文字替换”的效果。这通常应用于动态类名、内容、样式修改等场景。
2024-12-04 08:40:14
387
原创 AJAX和XHR、fetch、axios的关系
Fetch API 是现代的、基于 Promise 的 API，提供了更简洁的语法，易于使用，尤其是与async/await 结合使用时，代码更加清晰和可维护。Fetch API 是现代浏览器中新加入的用于发起网络请求的 API，相比XMLHttpRequest，Fetch 提供了更简洁、更强大的语法，并且它基于 Promise，支持更直观的异步操作。- 支持同步和异步请求：可以选择同步（阻塞）或异步（非阻塞）请求，但同步请求会导致浏览器冻结，影响用户体验，因此通常不推荐使用同步请求。
2024-12-04 08:31:43
846
原创 Encrypted Media Extensions API防截屏和防录屏功能
然而，EME API 并不能直接实现完全的防截屏和防录屏功能，但它在保护加密内容方面起到了非常重要的作用，尤其是通过与加密媒体播放技术（如 Widevine、PlayReady 等）结合使用。一些受保护的媒体内容在录制尝试时，可能会显示黑屏。EME API 本身并没有直接提供防止用户截屏或录屏的功能，但它确保通过 DRM 加密的视频或音频内容只能在授权的设备或环境中播放。它们会要求内容仅在符合安全要求的设备上播放，比如启用 DRM 的电视、PC 或智能手机，而在不符合安全标准的设备上则无法播放内容。
2024-12-04 08:29:58
1043
原创 Pragmatic Drag and Drop拖拽库
（或称为）是一个轻量级、简单易用的拖拽库，旨在为开发者提供一个方便的 API 来实现拖拽功能。它特别适合需要快速实现基本拖拽交互的应用程序。
2024-12-04 08:28:56
406
原创 无限视差滚动
无限视差滚动（Infinite Parallax Scrolling）结合了和，使得在滚动页面的同时，某些元素的背景或内容具有不同的滚动速度，创造出视觉上的深度感。在前端开发中，我们可以使用来实现无限滚动，同时使用 JavaScript 或 CSS 来实现视差效果。
2024-11-28 08:42:02
469
原创 Vue中为Ant Design Vue中Modal.confirm自定义内容
它是 HTML 的一部分，表示的是超文本标记语言，当我们正在处理一个脚本的时候，在虚拟 DOM 节点中去使用它进行替换已成为一种惯例。这个定义同时也被运用到其他的框架文档中。返回一个“虚拟节点” ，通常缩写为 VNode: 一个普通对象，其中包含向 Vue 描述它应该在页面上呈现哪种节点的信息，包括对任何子节点的描述。用于手动编写render。这是使用的不是组件<a-modal>而是Modal.confirm，在content配置中，我想实现自定义编辑内容的样式，这里面就使用到了一个东西h()
2024-11-06 09:15:42
596
原创 行盒的截断样式
实现目标：想在这段文本中实现某一部分的文本显示高亮效果。所以我给那段文本加了个高亮效果但是出来的效果还是差了点意思：他在换行的地方被截断了。解决办法：就是增加个css属性，box-decoration-break: clone;这样就好看多了。是一个 CSS 属性，用于控制在元素的装饰效果（例如边框、背景等）在文本分行或盒子分割时的行为。它主要用于处理包含文本的元素，特别是在多行文本的情况下。
2024-10-30 08:55:18
335
原创 vue项目中集合科大讯飞语音识别功能，web端，语音听写（流式版）WebAPI 文档
然后还要准备CryptoJS这个第三方的包import CryptoJS from 'crypto-js';，直接npm下载就行。最后是封装了一个组件，来使用。这个项目使用的是ant的组件库。先在public文件下加入了iat，也就是demo文件中的dist文件夹。这次主要是将demo改写成了vue语法，其他的都没变。
2024-10-28 11:12:47
1744
13
原创 关于＜a-upload-dragger＞实现选择文件夹，上传文件夹中符合要求的文件，并在所有符合要求文件上传完成后统一进行提示。这里面文件是直接上传到七牛云
这里要实现这样一个功能，就是批量上传图片的功能，在上传的时候，选择要上传的文件夹，这个组件会自动取读取这个文件夹中所有的文件，并挨个进行上传，我们需要再上传的时候添加个过滤条件，只有符合我们规定的文件才会调用接口完成真正的上传功能。这个具体上传的方法，用了一个防抖，主要是因为，这个 组件只要查到一个文件就会调用一次，不是等加载完所有的文件后，才取一次性调用完成上传。但其实我们在第一次就能拿到文件夹中所有的文件，所以需要加一个防抖，防止重复上传。
2024-10-28 10:47:56
550
原创 根据文本内容自动判断是否溢出，来自动判断是否超出隐藏显示省略号，并鼠标悬停显示文本提示tooltip
【代码】根据文本内容自动判断是否溢出，来自动判断是否超出隐藏显示省略号，并鼠标悬停显示文本提示tooltip。
2024-10-26 08:45:02
342
原创 Modal弹出以下错误消息Blocked aria-hidden on a ＜div＞ element because the element that just received focus mus
报错翻译：Modal弹出以下错误消息：在<div>元素上隐藏了阻塞的aria，因为刚刚收到焦点的元素不能对辅助技术用户隐藏。避免使用隐藏在聚焦元素或其祖先上的咏叹调。考虑改用惰性属性，这也会阻止焦点。关于这个报错，它不影响功能的正常使用，但看着难受，还是有解决的办法的。
2024-10-21 09:22:34
3486
2
原创 关于＜a-modal＞组件修改其自带样式有时不生效的问题
我遇到了这个问题，就是使用<a-modal>，想要将其改造成自己需要的样式，这时候就需要修改其本身的css了，在css中使用穿透，但是写完发现样式没有生效。最后发现是其<a-modal>DOM结构挂载到了外层的的html上了，样式影响不到。getContainer：指定 Modal 挂载的 HTML 节点。这种情况就需要官方文档中说的一个属性了。将其挂载到我们要用到的地方，这样就行了。
2024-10-16 19:11:02
416
原创 前端 vue3 对接科大讯飞的语音在线合成API
科大讯飞的接口，返回的是一个数组，因为需要合成的文本多，所以将数据切割成多份，然后返回的。网上提供的案例，很多都是有局限性的，我找的那个他只能读取第一段数据，剩下的不读取。看了看官方提供的demo，嗯....没看懂。最后还是去网上找的。主要的功能就是将文本转为语音，可以播放。封装了个方法，直接调用方法就可以了。
2024-09-30 11:44:24
954
1
原创 mac怎么设置ip地址映射
最近开发的项目分为了两种版本，一个自己用的，一个是卖出去的。卖出的域名是和自己的不一样的，系统中有一些功能是只有卖出去的版本有的，但我们开发完之后还得测试，那就需要给自己的电脑配置一个IP地址映射了，本地地址是127.0.0.1,github.com这个作用就是你直接访问这两个地址都能打开本地的项目，但是这两个域名还不一样，github.com就是模拟的卖出的域名。当检测到域名还有其他前缀的时候，自动判断为卖出去的版本，就能使用一些特定的功能了。
2024-09-27 15:09:25
1831
原创 display:flex；和margin的妙用
第一个想法就是使用display:flex;所以想要得到效果，一般来说还需要在盒子外面再套一层盒子才行，但是也可以使用margin来实现。
2024-09-25 17:16:41
368
原创 vue3中echarts柱状图横轴文字太多放不下怎么解决
问题：在做数据展示的时候，使用的是echarts，遇到了个问题，就是数据过多，但是设置的x轴的文字名称又太长，往往左边第一个或右边最后一个的名称展示不全，只有半个。从网上找到了几种办法，但是最总实现的效果不能通过。导致这个问题的原因就是，最边上的那条数据的宽度太小了，名称又远远超过这个宽度，再加上echarts默认的x轴文字是居中显示的。所以有一侧的名称显示不全。
2024-09-25 16:12:31
1488
原创 vue3中是用echarts的柱状图，自定义tooltip（鼠标放在柱子上显示的提示）
主要是使用的是option配置中的tooltip，自定义的话是使用了tooltip中的formatter方法，params这里面就是这个柱状图的所有信息，可以先打印一下看看自己要用哪些字段。这里主要是能使用富文本，可以自定义任何自己想要的提示。
2024-09-25 15:55:05
641
原创 ant design vue组件中table组件设置分组头部和固定总结栏
下面的代码中还有关于自定义单个头部字段的方法使用的是插槽headerCell；自定义table字段的方法，使用的是插槽bodyCell；没有值的显示--总结栏是使用的插槽summary，至于里面显示的具体数值，需要自己配置。<a-table-summary-row>：一行<a-table-summary-cell>：一列（也可以叫单元格）<a-tablev-elsebordered:locale="{emptyText: '暂无数据'}"<span>语速过快（通）
2024-09-25 15:46:58
805
原创 markdown-it:将Markdown文本转换为HTML格式，展示在页面，怎么自定义里面的a标签设置为在新标签页打开
由markdown-it将文本生成html然后渲染到页面上，但是现在你点击里面生成好的链接只能在本标签页打开，怎么将其设置为在新标签打开呢？安装markdown-it使用markdown-it。
2024-09-20 16:14:32
841
原创 ant-design-vue组件中的＜a-date-picker＞选择器设置过去时间不能选择精准到小时
我看了看官方文档，是有配置可以直接设置的，但是设置完后，遇到了几个问题就是你点击完日期后小时默认给的是现在时间的小时，但是如果现在是14:02，那么你给个14时明显不对，因为分钟和秒数自动补的是0，所以小时只能默认给15这样才对。遇到了需求，就是，选择时间的时候已经过去的时间是不让选择的，只能选择未来时间。
2024-09-16 14:35:00
561
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人