- 博客(103)
- 收藏
- 关注
RSS订阅原创 文件上传时传递的是 [object Object] 而不是真正的文件二进制数据
template><a-upload<a-button>自定义上传</a-button>// 这里的 file 已经是原始 File 对象try {});onSuccess('上传成功');onError('上传失败');</script>// ❌ 错误理解// 不需要，options.file 已经是原始文件// ✅ 正确使用// 直接使用记住这个黄金法则当需要真正的文件二进制数据时，总是使用，而不是直接使用 file-list 中的对象。
2025-10-25 15:57:04
283
原创 4.x版本的ant-table+sortablejs实现拖拽排序
解决这个问题的办法也很简单，那就是使用原生的js，给table这个盒子增加个滚动监听事件，记录每次滚动的距离，再排完序强制刷新后再让table滚动到上次记录的位置就可以了（邪修）。因为功能需求，我需要在排序完后，再对排序后的tableData进行排序检查，因为，被锁的字段只能排在最前面，如果排序后的tableData的不符合要求则会对其进行重排序，将被锁的字段放在对前面。但是现在的问题是，因为我进行了排序检查和二次排序，导致数据tableData确实是正确的，但是组件table确实不正确的。
2025-08-29 11:29:45
266
原创 element-table的合并行的使用-指定某些字段允许相邻数据能进行合并，通过传递的key键进行判断-公共方法
相邻行中指定字段（如contractId）值相同的单元格需要合并。：仅合并标记了的列（如合同名称、签订日期）。
2025-08-12 17:01:40
305
原创 css:flex:1；是谁的缩写
（当容器有剩余空间时，该项目会按比例分配剩余空间）。（当容器空间不足时，该项目会按比例收缩）。表示忽略项目的原始尺寸（如。定义项目在分配多余空间之前的。表示该项目会与其他项目。
2025-07-15 10:40:43
323
原创 v3 中的storeToRefs
是 Pinia (Vue 3 的状态管理库) 提供的一个实用函数，用于从 Pinia store 中提取属性并保持其响应性。它是 Pinia 提供的一个便捷工具，让开发者能更方便地使用 Composition API 与状态管理集成。本质上会遍历 store 的所有属性，将响应式状态转换为 ref 对象，同时跳过方法和非响应式属性。在 Vuex 中，你需要使用。提供了更简洁的语法。
2025-07-02 09:06:29
399
原创 使用ant-design-vue 写个适用于web端的条件搜索栏组件，可折叠展开
像选择器，他需要list选项，但各个选项所用到的value和label有可能是不一样的字段，这些我想的是将这个需要获取数据的搜索字段都写到一个方法里面去，然后对这些数据进行格式化，全都格式化为统一的数据结构形式，然后将这个方法再传递给组件，这样就可以实现渲染出来的组件是完全功能的组件了。思路也很简单，就是将不同的筛选字段的形式都封装到一起，包括文本输入框、单选、多选、时间选择器、radio/checkbox、联级选择器等等，此外还允许通过插槽进行自定义格式。这个组件是超过两行会显示折叠按钮。
2025-06-27 11:25:57
584
原创 vue3+vxe-table封装table组件适用于web端
作用：vxe-table提供了全套的自定义方法，很强大。table上面的操作栏也就是按钮那一行都是可以使用插槽自定义。使用，在完成组件封装后，只需要写一个配置文件.js类型。在配置文件中写上你需要展示的列配置字段就能自动显示对应的内容了。如果需要自定义某一字段的显示内容，也是可以在配置文件中设置插槽，然后自定义的。像上面的操作栏就是的封装一个这样的table组件还是很好用的，极大提高了代码的复用性和组件UI统一性。
2025-06-26 16:32:05
1245
原创 h5，原生html，echarts关系网实现
2.他关系网的缩放和移动只能按住具体的关系网矩形才能实现，这体验不好，为了解决这个问题，我添加了两个透明的节点一个在左上角，一个在右下角，这样就能让关系网矩形做到最大，来解决这个问题。3.设置层级来让不同的层级显示不同颜色的线。1.缩放和移动功能，配置roam:true。
2025-05-16 10:04:14
363
原创 前端读取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
532
原创 前端多角色权限页面（同浏览器同时登录）数据互串解决
我具体的解决办法是：将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
641
原创 ＜a-upload-dragger＞在设置了accept=“.pdf, .doc, .docx“的情况下拖拽不会触发beforeUpload进行文件类型校验的问题
<a-upload-dragger>在设置了accept=".pdf, .doc, .docx"的情况下拖拽不会触发beforeUpload进行文件类型校验的问题
2025-03-01 10:43:00
341
原创 当上传文件的弹窗正好悬浮在＜iframe＞上面的时候，拖拽文件上传无法成功的解决办法
主要是拖拽文件无法将文件放到上传组件的触发区域，被<iframe>拦截住了。有时候还真不是你组件的原因，可能是其他元素造成的。解决办法：就是给iframe使用这个属性pointer-events: none;让他的的鼠标事件。当然如果你还需要iframe进行交互，可以在上传的时候给他使用这个属性，关闭弹窗的时候，放开这个属性。使用vue的动态class等等。
2025-02-21 13:31:14
333
原创 VUE对接deepseekAPI调用
关于其中 /your-endpoint-path 是需要你自己去api文档中查看的，文档具体地方在最后面。在 Vue 项目中，通常会将 API 调用的逻辑封装到一个单独的文件中，例如。1.先去开放平台注册账号申请api key。2.你的项目需要有发送请求的axios或者自己写。在你的 Vue 组件中，可以调用上面封装的。
2025-01-23 15:51:02
5691
原创 在 Webpack 中使用 预加载（Preloading） 技术可以通过动态导入（import()）以及指定预加载的方式来进行优化
在中使用技术可以通过动态导入（import()）以及指定预加载的方式来进行优化。与 Webpack 不同，Vite 使用的是，所以你可以通过一些简单的配置来实现资源的预加载。
2025-01-14 08:56:31
1104
原创 文件上传时遇到的问题：在上传状态变化的时候只触发了uploading状态往后就没触发了不论是done还是error。是因为html写的有问题，在上传的时候，把上传的dom给删了，所以才造成这个原因
我之前写法是用v-if来控制状态的切换，结果就遇到了那个问题，原因就是因为我在uploading状态的时候我把上传的html给删了，这就导致它只能走到这，不能往下走了，所以，后面换成了v-show。反思：好好考虑v-if的使用场景，不能上来就用，得想一想能不能使用。
2025-01-08 10:02:31
367
原创 ＜a-modal＞设置动态的最大高度，使用max-height: v-bind(modalHeight)；发现不生效的原因
例如：:getContainer="() => $refs.modal"你需要将绑定到具体的元素上。
2025-01-03 09:10:14
470
原创 vue中的h
h是一个 JavaScript 函数，用来创建虚拟 DOM 节点。它通常作为render函数的一部分被使用，可以代替 Vue 的模板语法进行视图渲染。h的全称是，它的参数可以是组件、元素类型、属性和子节点。hh函数是 Vue 3 中构建虚拟 DOM 的重要工具，能够让开发者更细致地控制 Vue 组件的渲染。通过h，你可以更灵活地创建元素、传递属性和子节点，以及在运行时动态决定渲染内容。虽然通常 Vue 的模板语法已经足够方便，但在某些情况下，使用h可以提供更强的控制力，尤其是在需要动态渲染复杂内容时。
2025-01-02 09:04:41
1021
原创 ＜a-form＞进行表单校验，如果你校验的字段类型是对象或者数组，并且你该字段的校验规则中有whitespace: true，就会出现校验不通过的情况。删除这个校验规则就行
是针对字符串字段的规则，不能直接用于对象字段。如果你有对象字段，需要对其进行字符串校验时，应当在规则中指定具体的字符串属性，而不是对整个对象进行校验。如果需要对对象进行复杂的校验，可以使用自定义的校验规则来处理对象的各个字段。
2024-12-25 20:09:09
477
原创 vue插槽的使用，在作用域插槽中无法直接使用父组件中的变量及解决办法
遇到了一个问题，这个问题就是，我在父组件中使用了一个具名插槽，但是我想在这个具名插槽中使用父组件中的一个变量。但是一直报错，无法直接访问。虽然问题看着简单，但是在开发中真正使用的时候，还真无法一眼看出来问题，因为，这玩意我嵌套了好几层组件，在插槽中还使用了组件，父组件外面还有层组件。但根本问题还是上面描述的问题，就是作用域插槽无法直接在父组件中使用父组件的变量问题。问题的根本原因插槽内容是父组件的模板，它并不是由父组件的作用域来控制的，而是由子组件来接收的。这意味着，。当你尝试在插槽中直接使用。
2024-12-21 09:13:36
514
原创 从短信、邮件、微信外网页等场景打开微信小程序
通过服务端接口或在小程序管理后台生成后，自行开发中转H5页面。将带有中转H5链接的短信内容通过开发者自有的短信发送能力或服务商的短信服务进行投放，实现短信打开小程序。iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。该跳转方法可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。开发者无需调用平台接口，在声明后，可自行根据如下格式拼接appid和path等参数，作为明文 URL Scheme 链接。
2024-12-20 10:02:51
5782
原创 String.prototype.padStart() 方法来实现日不足两位时补充零
你可以使用方法来实现日不足两位时补充零，这样代码更简洁。padStart()会在字符串的前面填充指定的字符，直到字符串达到给定的长度。对于你的需求，会将day补充成两位数（如果day是单数的话）。这是优化后的代码，使用了padStart()
2024-12-20 10:02:09
652
原创 页面卡顿监听PerformanceObserver
/ 监听 longtask// 判断任务持续时间是否超过50ms// 你可以在这里处理卡顿逻辑，如记录日志，发送监控数据等});});// 启动观察器使用可以非常方便地监听页面的性能问题，特别是卡顿问题。当你想要捕捉页面中的长任务时，监听longtask类型的事件非常有效。通过检测执行时间较长的任务，能够帮助你识别那些可能影响用户体验的性能瓶颈。
2024-12-10 08:26:46
610
原创 关于＜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
308
原创 使用sass实现文字替换
在 SASS（Syntactically Awesome Stylesheets）中，你不能直接使用像 JavaScript 中的字符串替换那样的功能。不过，你可以利用 SASS 的内置功能（如混入、变量和条件判断等）来模拟一些“文字替换”的效果。这通常应用于动态类名、内容、样式修改等场景。
2024-12-04 08:40:14
483
原创 AJAX和XHR、fetch、axios的关系
Fetch API 是现代的、基于 Promise 的 API，提供了更简洁的语法，易于使用，尤其是与async/await 结合使用时，代码更加清晰和可维护。Fetch API 是现代浏览器中新加入的用于发起网络请求的 API，相比XMLHttpRequest，Fetch 提供了更简洁、更强大的语法，并且它基于 Promise，支持更直观的异步操作。- 支持同步和异步请求：可以选择同步（阻塞）或异步（非阻塞）请求，但同步请求会导致浏览器冻结，影响用户体验，因此通常不推荐使用同步请求。
2024-12-04 08:31:43
1079
原创 Encrypted Media Extensions API防截屏和防录屏功能
然而，EME API 并不能直接实现完全的防截屏和防录屏功能，但它在保护加密内容方面起到了非常重要的作用，尤其是通过与加密媒体播放技术（如 Widevine、PlayReady 等）结合使用。一些受保护的媒体内容在录制尝试时，可能会显示黑屏。EME API 本身并没有直接提供防止用户截屏或录屏的功能，但它确保通过 DRM 加密的视频或音频内容只能在授权的设备或环境中播放。它们会要求内容仅在符合安全要求的设备上播放，比如启用 DRM 的电视、PC 或智能手机，而在不符合安全标准的设备上则无法播放内容。
2024-12-04 08:29:58
1719
原创 Pragmatic Drag and Drop拖拽库
（或称为）是一个轻量级、简单易用的拖拽库，旨在为开发者提供一个方便的 API 来实现拖拽功能。它特别适合需要快速实现基本拖拽交互的应用程序。
2024-12-04 08:28:56
572
原创 无限视差滚动
无限视差滚动（Infinite Parallax Scrolling）结合了和，使得在滚动页面的同时，某些元素的背景或内容具有不同的滚动速度，创造出视觉上的深度感。在前端开发中，我们可以使用来实现无限滚动，同时使用 JavaScript 或 CSS 来实现视差效果。
2024-11-28 08:42:02
548
原创 Vue中为Ant Design Vue中Modal.confirm自定义内容
它是 HTML 的一部分，表示的是超文本标记语言，当我们正在处理一个脚本的时候，在虚拟 DOM 节点中去使用它进行替换已成为一种惯例。这个定义同时也被运用到其他的框架文档中。返回一个“虚拟节点” ，通常缩写为 VNode: 一个普通对象，其中包含向 Vue 描述它应该在页面上呈现哪种节点的信息，包括对任何子节点的描述。用于手动编写render。这是使用的不是组件<a-modal>而是Modal.confirm，在content配置中，我想实现自定义编辑内容的样式，这里面就使用到了一个东西h()
2024-11-06 09:15:42
785
原创 行盒的截断样式
实现目标：想在这段文本中实现某一部分的文本显示高亮效果。所以我给那段文本加了个高亮效果但是出来的效果还是差了点意思：他在换行的地方被截断了。解决办法：就是增加个css属性，box-decoration-break: clone;这样就好看多了。是一个 CSS 属性，用于控制在元素的装饰效果（例如边框、背景等）在文本分行或盒子分割时的行为。它主要用于处理包含文本的元素，特别是在多行文本的情况下。
2024-10-30 08:55:18
386
原创 vue项目中集合科大讯飞语音识别功能，web端，语音听写（流式版）WebAPI 文档
然后还要准备CryptoJS这个第三方的包import CryptoJS from 'crypto-js';，直接npm下载就行。最后是封装了一个组件，来使用。这个项目使用的是ant的组件库。先在public文件下加入了iat，也就是demo文件中的dist文件夹。这次主要是将demo改写成了vue语法，其他的都没变。
2024-10-28 11:12:47
2391
13
element-table的合并行的使用-指定某些字段允许相邻数据能进行合并，通过传递的key键进行判断-公共方法-列配置
2025-08-12
element-table的合并行的使用-指定某些字段允许相邻数据能进行合并，通过传递的key键进行判断-公共方法-数据案例
2025-08-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人