- 博客(42)
- 收藏
- 关注
RSS订阅
原创 Ant design Vue3 中的 a-select 组件使用方法详解
本文介绍了 Ant Design Vue 中 a-select 选择器组件的使用指南，涵盖基础用法、常见问题和高级功能。主要内容包括：标准 label-value 格式和自定义字段名的数据绑定方法；解决 placeholder 显示问题的技巧；通过 @change 事件获取选中项完整数据的实现；多选模式的使用方式；以及数据类型定义、搜索优化等最佳实践。该组件支持灵活配置，能够满足单选、多选、搜索等多种业务场景需求，特别适合处理不同格式的后端数据。
2024-06-20 09:46:43
4374
原创 前端实现在线预览、编辑Office文档（vue版）
WEB前端实现在线预览、编辑Office文档，介绍如何在web前端引入JS插件实现在线预览、编辑Office文档。
2023-03-06 16:26:50
16426
2
原创 Vue3 + Ant Design Vue RangePicker 自定义样式与预设范围实现详解
本文介绍了基于Vue3和Ant Design Vue的自定义日期范围选择器实现方案。核心功能包括动态预设日期范围（今天、昨天、本周等）、自定义下拉面板样式和响应式日期计算。通过Composition API管理响应式数据，使用Day.js进行日期处理，实现了灵活的事件处理和样式自定义。文章详细展示了组件结构、预设范围计算逻辑、事件处理机制以及CSS样式覆盖方法，并提供了完整的组件代码示例。该方案可满足业务场景中对日期选择器的多样化需求，具备良好的可扩展性和实用性。
2025-09-09 10:21:55
455
原创 Ant Design Vue3 a-table 表格合并行实用指南
本文介绍了如何使用Ant Design Vue的a-table组件实现表格行合并功能。通过customCell属性和rowSpan计算逻辑，可以实现基础列合并、复杂跨列合并以及条件合并等场景。关键注意事项包括数据必须预先排序、性能优化、边界处理以及样式兼容问题。文章提供了完整示例代码，并针对合并后边框异常、行高不一致等常见问题给出了解决方案。表格行合并能有效提升数据展示清晰度，但需根据实际业务需求平衡功能实现与性能表现。
2025-08-06 10:13:30
451
原创 vue3使用vue-pdf-embed实现前端PDF在线预览
本文介绍了使用Vue3和vue-pdf-embed插件开发PDF预览组件的实践。组件核心功能包括页面切换（上一页/下一页）、缩放控制（放大/缩小）以及总页码显示。通过Vue3的响应式系统管理状态，计算属性处理动态样式，并优化了用户体验设计和性能考虑。文章还分享了开发过程中遇到的技术问题及解决方案，提供了完整的组件实现代码和使用示例。该PDF预览组件具有响应式设计、良好的用户体验和稳定性能等特点。
2025-08-01 18:20:19
653
原创 基于 xlsx-js-style 的 Excel 导出工具实现导出excel
本文介绍了一个基于xlsx-js-style库的Excel导出工具实现。该工具可将数据数组导出为Excel文件，支持自定义表头、字段选择、工作表命名和丰富的样式设置。核心功能包括数据验证与转换、表头处理、单元格样式配置（对齐、边框、字体等）和自动文件下载。工具提供了简洁API，支持Vue等前端框架集成，并包含错误处理机制。通过示例代码展示了基础用法（全字段导出）和高级用法（部分字段导出），以及如何在Vue组件中调用该工具。该方案适用于后台管理系统中的数据导出需求，具有配置灵活、样式丰富、使用简便等特点。
2025-07-29 17:47:42
461
原创 基于 Node.js 的 HTML 转 PDF 服务
该项目是一个基于 Node.js 的 Web 服务，旨在将 HTML 内容转换为 PDF 文件。项目使用 Express.js 作为后端框架，Puppeteer 作为 PDF 生成引擎，并提供了简单易用的 API 接口。开发工具包括 Nodemon 用于热更新，CORS 用于跨域支持。项目结构清晰，核心功能通过 pdfGenerator.js 模块实现，支持自定义页面大小、边距、背景打印和缩放。用户可以通过 POST 请求将 HTML 内容和样式发送到 /generatepdf/htmlToPdf 接口，生
2025-05-21 15:31:31
701
原创 vue3自定义audio音频播放【进度条，快进，后退，音量加减，播放速度】
本文将介绍如何使用Vue3构建一个功能完备的自定义音频播放器，包含进度条控制、快进/后退、音量调节和播放速度控制等功能。相比使用浏览器默认的audio控件，自定义播放器可以提供更一致的用户体验和更灵活的设计空间，复制粘贴即可使用，可自行优化封装效果展示。
2025-05-07 18:14:07
864
原创 marked+highlight.js实现代码高亮效果加复制
marked是对markdown进行解析的插件，它可以把markdown语法解析成html语法，从而实现页面效果，而highlight.js是对解析出的代码实现高亮效果。加载常用的 import hljs from ‘highlight.js/lib/common’;**安装 marked highlight.js clipboard **加载全部 import hljs from ‘highlight.js’;使用marked对代码块进行高亮显示和增加复制功能。
2025-03-17 15:12:38
1067
1
原创 Vue3ts封装一个可任意拖拽的浮动气泡组件，允许 x 和 y 轴方向拖拽，吸附到 x 轴方向最近一边，可点击
用户可以通过拖拽操作，在屏幕的 x 轴（水平方向）和 y 轴（垂直方向）上自由移动悬浮球。当用户停止拖拽时，悬浮球会自动吸附到 x 轴方向上距离最近的屏幕边缘，确保其位置稳定且符合用户操作习惯。时记录初始位置和鼠标位置，在 mousemove 时根据鼠标移动更新气泡位置，在 mouseup 或鼠标离开时结束拖拽并调用吸附逻辑。吸附逻辑：在拖拽结束时，判断气泡与页面边缘的距离，如果小于阈值则吸附到最近的 x 轴方向的边缘。isDragging 标志，点击事件触发时检查该标志，若为 true 则阻止点击事件。
2025-03-13 14:32:06
544
原创 vue3使用 xlsx-js-style导出Exce 动态合并表头
本文介绍了如何使用xlsx-js-style插件实现带样式的Excel导出功能。首先通过npm安装xlsx-js-style插件，它是对xlsx的增强版，支持单元格样式调整。文章详细演示了数据处理流程：准备示例数据和列配置，将数据转换为二维数组，创建工作表，并设置单元格样式（包括边框、对齐方式等）。重点说明了如何动态合并表头单元格，最后生成并导出Excel文件。文中还提供了完整的Vue3实现代码，包含数据转换、样式设置和合并单元格等关键步骤，可直接用于实际项目开发。
2024-09-06 14:05:45
766
原创 vue3-print-nb实现打印pdf分页
本文介绍了一个基于Vue 3和Ant Design Vue的表格打印分页解决方案，重点解决复杂表格在打印时的分页控制问题。该方案采用v-print插件实现打印功能，通过动态DOM计算和CSS @page规则实现智能分页。核心功能包括动态表格渲染、复杂表格结构处理、分页算法优化等，支持横向A4打印和避免表格行截断。技术栈使用Vue 3组合式API、SCSS预处理等技术，为客商评价明细表等复杂表格提供了完整的打印分页支持。
2024-07-26 11:38:56
3323
10
原创 vue3+vite+ts+pinia+router4后台管理-动态路由生成
实现思路1.在路由钩子里面判断是否首次进入系统(permission.ts)2.判断token是否有值。没有值回到登陆页面，3.token有值判断MenusList是否有值，没有则获取路由4.解析路由,拼接路由，放行路由。
2024-07-15 15:55:14
940
原创 基于vue3 + ant-design 使用阿里图标库iconfont.cn
对于使用 iconfont.cn 的用户，通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段，symbol 生成链接粘贴进去即可。即可轻松地使用已有项目中的图标。组件封装 IconFont。
2024-06-21 10:59:08
1041
2
原创 vue3 echarts 堆叠柱状图动态多柱堆叠
在使用echarts堆叠柱状图的时候，常规堆叠柱状图每条柱子的堆叠种类是相同的，实际开发中可能存在不同的数据格式，此处以地区结合材料进行说明，例如 华南地区包含材料（金，银）华北地区包含（铜，金）这样就会出现数据出现差异的情况，echarts现有的堆叠柱状图无法满足需求，需要去手动转换数据。
2024-05-28 10:58:28
778
转载 VUE3 兄弟组件通
1、兄弟组件通信：可以先把值传给父组件，再通过父组件传给另一个子组件，就做到了兄弟组件的传参，但是问题就是及其麻烦，所以引出第二种方式。2、通过消息的发布订阅来实现，定义一个bus（可实现任意组件通信）如果此时A组件发送了多个事件，B组件可以用*接收，写法如下。该方法不仅方便，且可以实现任意组件通信，极其方便实用！该方法不仅方便，且可以实现任意组件通信，极其方便实用！现在来使用刚刚定义的bus，将A组件的值传递给B组件。引入完成，使用方式和手写的基本一致，只不过名字不同。这样就完成了一个兄弟组件的传参。
2024-05-09 14:34:36
830
原创 qiankun 微前端应用实践
qiankun这个库只需要在基座引入，在main.ts 中注册子应用,为了方便管理，我们将子应用的配置都放在：/src/qiankun.js下。主应用注册这个路由时给 path 加一个 *，注意：如果这个路由有其他子路由，需要另外注册一个路由，仍然使用这个组件即可。基座采用是的 Vue3 + vite + ts，只负责导航的渲染和登录态的下发，为子应用提供一个挂载的容器div，由于路由模式为history，需要匹配子应用的入口规则，修改src/router/index。然后在src/main.ts中引入。
2023-12-08 14:28:51
493
原创 vue3 antd 自定义切换主题色
主题切换组件 theme.vue 在layout组件里使用。vue3 antd 自定义切换主题色。maints引入antd css。切换颜色hook文件 统一管理。在appvue里使用。
2023-07-28 17:52:15
1575
原创 antd-vue 表格关闭弹窗重置表格搜索条件
clearFilters参数是antd自带的清空输入框内容的方法，定义一个变量把clearFilters赋值给这个变量clearTabSearch,在弹窗取消或者关闭的的时候调用清除表格搜索框得方法。
2022-12-21 14:05:35
1279
原创 vue2后台管理项目动态加载路由
后台管理系统项目中的路由需要权限管理，不同的角色登录看到的页面是不一样的，所以路由应该是后端动态返回，然后前端拿到路由表进行处理后调用router.addRoutes([])添加到前端的静态路由表中形成完整路由表。
2022-12-05 16:40:48
5646
原创 antd table 固定列之后滚动条无法拖动
使用a-table的fixed属性固定表格列的时候滚动条被固定列覆盖部分无法拖动。解决方法将固定区域底部留出一个滚动条高度的距离。主要的问题就是固定区域盖住了横向滚动条。设置bottom值，使得不盖住滚动条。可以使用下面配置来解决。...
2022-07-27 12:32:50
2764
转载 Ant-design-vue 国际化
.在public文件夹下新建languages文件夹，在新建langs文件夹和i18n.js，langs文件夹下新建index.js、cn.js、en.js。on(),这个是组件传值的一种方式，需要在main.js中配置。4.在app.vue文件中引入多语言文件和我们写切换的方法。.........
2022-07-19 11:00:30
2370
原创 antd table组件点击表格行变色，单双行颜色不同
项目需求，采用ant design table展示数据，需要点击行变色，表格行之间有颜色区分（斑马色）效果图：
2022-07-06 13:43:16
3785
原创 Antd表格customRender与scopedSlots同时使用
行列合并与插槽同时使用普通的table插槽是在column对象中配置scopedSlots: { customRender: ‘xxx’ }，并在标签中写相应的代码实现的，与此处关系不大，不做过多的介绍。行列合并时要对customRender做配置，相应单元格的重写则需要写在customRender返回的children中，使用的是类似React的jsx语法：例子如下，我希望在实现行合并的同时操作按钮有二次确认事件效果如图：如果需要对插槽中的元素添加事件：...
2022-07-05 14:50:47
4558
原创 记录一下antd vue 导入excel数据在本地使用不使用上传组件
安装依赖> npm install -S file-saver xlsx> npm install -D script-loader代码片段-html// handleUpBtns 触发导入事件的方法（table是用来判定导入数据的用处）<div style="margin-bottom: 10px"> .
2022-01-12 09:09:57
770
原创 vue+ Element-UI 中 使用Upload上传图片关于action的使用
<el-form-item label="图片"> <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeA...
2020-12-10 11:24:08
6054
2
原创 前端开发中的数据处理
把俩个对象数组合并成一个对象数组用的是ES6的map方法map() 方法返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。map() 方法按照原始数组元素顺序依次处理元素。注意： map() 不会对空数组进行检测。注意： map() 不会改变原始数组。注意：函数的作用是对数组中的每一个元素进行处理，返回新的元素。这是我们公司后端返回的数据，我想要一个对象数组，结果返回来俩个，还要另外再加一个属性，都需要自己去处理，苦逼的搬砖生活。看代码吧 this.rest..
2020-10-09 16:35:37
438
原创 工作中实用的css小技巧
一、设置input 的placeholder的字体样式input::-webkit-input-placeholder { / Chrome/Opera/Safari /color: red;}input::-moz-placeholder { / Firefox 19+ /color: red;}input:-ms-input-placeholder { / IE 10+ /color: red;}input:-moz-placeholder { / Firefox 18- /
2020-09-10 15:10:58
120
原创 微信小程序滑动切换之swiper
小程序项目中遇到几个需要滑动切换效果，上来用的swiper组件 写了几行之后发现有的代码不见了，调试代码之后发现swiper高度问题导致的 ，swiper默认高度150 超出之后隐藏了查询之后发现sweiper无法设置动态高度，只能设置固定高度，百度了之后网上有几种方法，试过之后都不太好用试过百度的2种方法：1 在swiper之间嵌套scorll-view 这个需要先获取屏幕高度 用了之后发现不好使 弃用2 在swiper-item 的内容部的前后加俩个空标签 来获取内容高度 实验之后发...
2020-05-29 11:27:22
1923
原创 点击加载更多拼接数据
wxml代码 <view class="fdsa" bindtap="loading" data-ind="{{index}}">共{{item.coment.length}}条评论，查看更多</view>js代码data里面的数据 plist下面的comentcoment: [{ cingUrk: 'http://cgcp.thirdclassroom.com//Upload/team/57/16485215063.jpeg', cname: '张三',
2020-05-28 17:53:51
320
原创 微信小程序轮播图swiper指示点自定义问题
在开发过程中遇到自定义指示点在轮播下面的问题自己写的自定义指示点绑定轮播图轮播图<swiper bindchange="swiperChange" current="{{swiperCurrent}}"> <swiper-item wx:for="{{swiperList}}" wx:key="index"> <view class="tswiper-top mtb"> <view class="tswiper-top-title
2020-05-21 14:58:34
1132
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人