- 博客(19)
- 收藏
- 关注
RSS订阅原创 Vue3 + Element Plus 实现带溢出提示的历史记录菜单
实现了一个具有文本溢出提示功能的历史菜单，当文本过长时显示省略号并在悬停时展示完整内容。通过Vue的el-menu组件结合el-tooltip实现，使用isTextOverflow方法动态检测文本溢出状态，利用CSS设置white-space、overflow和text-overflow属性控制文本显示。关键代码包括：动态绑定tooltip的disabled属性、文本溢出检测函数和响应式样式设置，实现了既美观又实用的菜单交互效果。
2025-07-21 16:03:41
158
原创 vue3+elementplus自定义封装季度选择器
摘要：该代码实现了一个季度选择器组件，包含quarterPicker.vue核心组件和quarter.vue封装组件。季度选择器支持：1) 显示当前年份和季度(默认从Q1到当前季度)；2) 通过左右箭头切换年份；3) 点击选择季度；4) 支持双向数据绑定。组件采用Element-UI样式，包含遮罩层、年份切换区和季度选择区，样式隔离且响应式。父组件通过v-model绑定值，并可设置默认值。该组件适用于需要选择时间范围的业务场景，如统计报表查询等。
2025-06-24 15:13:18
197
原创 设置elementplus中的Carousel走马灯切换箭头为自定义图片
【Vue轮播组件箭头样式优化方案】通过深度选择器(:deep)修改ElementUI轮播组件箭头样式：1)重置容器为40px透明方块；2)隐藏默认图标；3)通过伪元素添加自定义箭头图片，设置contain模式保持比例，默认透明度0.57；4)分别指定左右箭头图片路径（需确保@/assets/路径正确）。该方案实现无侵入式样式覆盖，特别适合需要自定义轮播导航的场景。
2025-06-23 16:47:19
262
原创 vue3+echarts实现图表导出（包括标题、表格、图片）
本文介绍了如何使用ExcelJS和html2canvas将Echarts图表导出为Excel文件。首先需要安装相关依赖包，然后通过代码将图表转换为图片并插入Excel工作表中。方法包括：1)使用html2canvas捕获图表为图片；2)使用ExcelJS创建工作簿和工作表；3)添加标题和图片到工作表；4)最终将文件保存为.xlsx格式。代码还支持自定义文件名（包含医院名称和当前日期），提供了表格数据添加的注释说明（可选）。该方法实现了将可视化图表直接导出到Excel的功能，便于数据分享和分析。
2025-06-23 15:57:06
166
原创 使用Echarts柱状图的时候，数据的x轴横坐标文字显示不全的问题
摘要：针对ECharts柱状图横坐标显示不全问题，提出了两种解决方案：1）强制显示所有标签但会导致重叠；2）通过标签旋转防止重叠，并调整标签位置和间距。后者在不压缩图表的情况下有效解决了坐标轴内容完整显示问题。
2025-06-11 17:14:46
614
原创 vue3 + echarts-wordcloud（详细配置） 绘制词云图
词云图，是一种文本数据的视觉展示，由词汇组成类似云的彩色图形。echarts-wordcloud是基于echarts的一个词云库，本篇主要介绍它的使用方法。
2023-12-29 14:20:01
8962
7
原创 自定义el-slider实现进度条效果，并实现用js修改after伪元素的样式
JS无法直接获取元素的::after伪元素节点，因为它不是DOM节点。可以将切换的颜色设为一个变量，然后通过修改这个变量的值实现动态渲染的效果。
2023-12-26 18:24:01
1563
1
原创 类型“Element”上不存在属性“style”
ts默认用的是Element，但和原始的DOM元素有区别，所以获取不到style属性，需要处理成HTMLElement才可以获取。
2023-12-26 16:38:27
1749
1
原创 el-date-picker二次封装 自定义右侧图标
vue3+ts对el-date-picker进行二次封装，自定义右侧图标，鼠标划入时隐藏自定义图标，只显示清除图标
2023-12-07 11:54:14
1551
1
原创 vue3项目引入全局主题色
1、创建全局主题色common.less文件 2、引用common.less文件 2、以下两种任选其一即可1）在vite.config.js中添加以下代码只看css即可2）在main.js中添加以下代码3、现在就可以在全局使用自定义的主题色啦
2023-12-06 11:09:35
1180
1
原创 vue3+ts echarts的使用
vue3+ts按需引入echarts，以雷达图为例：1、安装echarts npm install echarts --save 2、在utils文件夹下创建一个echarts.js文件 3、在需要使用的页面里先定义一个容器，然后将图表放入这个容器
2023-12-06 10:17:03
778
1
原创 vue实现虚拟列表滚动
1、首先，通过npm安装vue-virtual-scroll-list；2、在vue组件中引入vue-virtual-scroll-list
2023-11-16 15:10:35
1363
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人