坐下来喝杯茶吧-优快云博客

原创复制文本功能封装

本文实现了一个通用的复制文本工具函数copyText，支持现代浏览器的Clipboard API和旧浏览器的execCommand方法。该函数接收要复制的文本以及成功/失败提示信息，返回操作结果Promise。使用时只需导入并调用copyText(text)即可完成复制操作，并自动显示相应的提示信息。函数内部处理了多种浏览器兼容性问题，确保在不同环境下都能正常使用复制功能。

2025-08-13 10:01:07 192

原创 Vue3+TDesign Mobile+@zxing/library封装扫码组件

本文介绍了基于Vue3+TDesign移动端的扫码功能实现：使用@zxing/library库处理二维码识别，主要功能包括：1、相机扫码：通过BrowserMultiFormatReader解码视频流，自动检测设备摄像头；2、相册识别：通过隐藏input触发文件选择，使用decodeFromImage方法解码图片等。

2025-08-12 16:01:37 365

在Vue3中使用useRouter()时出现Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')错误，原因是该方法只能在setup()或Vue上下文环境中调用。解决方案是移除全局router实例，改为从路由实例文件直接导入router对象，从而避免在非组件上下文中调用useRouter()导致的问题。

2025-08-05 10:51:08 280

原创 Vue3 + Element Plus 实现带溢出提示的历史记录菜单

实现了一个具有文本溢出提示功能的历史菜单，当文本过长时显示省略号并在悬停时展示完整内容。通过Vue的el-menu组件结合el-tooltip实现，使用isTextOverflow方法动态检测文本溢出状态，利用CSS设置white-space、overflow和text-overflow属性控制文本显示。关键代码包括：动态绑定tooltip的disabled属性、文本溢出检测函数和响应式样式设置，实现了既美观又实用的菜单交互效果。

2025-07-21 16:03:41 282

原创 vue3+elementplus自定义封装季度选择器

摘要：该代码实现了一个季度选择器组件，包含quarterPicker.vue核心组件和quarter.vue封装组件。季度选择器支持：1) 显示当前年份和季度(默认从Q1到当前季度)；2) 通过左右箭头切换年份；3) 点击选择季度；4) 支持双向数据绑定。组件采用Element-UI样式，包含遮罩层、年份切换区和季度选择区，样式隔离且响应式。父组件通过v-model绑定值，并可设置默认值。该组件适用于需要选择时间范围的业务场景，如统计报表查询等。

2025-06-24 15:13:18 346

原创设置elementplus中的Carousel走马灯切换箭头为自定义图片

【Vue轮播组件箭头样式优化方案】通过深度选择器(:deep)修改ElementUI轮播组件箭头样式：1)重置容器为40px透明方块；2)隐藏默认图标；3)通过伪元素添加自定义箭头图片，设置contain模式保持比例，默认透明度0.57；4)分别指定左右箭头图片路径（需确保@/assets/路径正确）。该方案实现无侵入式样式覆盖，特别适合需要自定义轮播导航的场景。

2025-06-23 16:47:19 459

原创 vue3+echarts实现图表导出（包括标题、表格、图片）

本文介绍了如何使用ExcelJS和html2canvas将Echarts图表导出为Excel文件。首先需要安装相关依赖包，然后通过代码将图表转换为图片并插入Excel工作表中。方法包括：1)使用html2canvas捕获图表为图片；2)使用ExcelJS创建工作簿和工作表；3)添加标题和图片到工作表；4)最终将文件保存为.xlsx格式。代码还支持自定义文件名（包含医院名称和当前日期），提供了表格数据添加的注释说明（可选）。该方法实现了将可视化图表直接导出到Excel的功能，便于数据分享和分析。

2025-06-23 15:57:06 356