- 博客(22)
- 收藏
- 关注
RSS订阅原创 van-calendar实现农历日期选择器
本文介绍了一个封装农历日历组件的实现方案。组件基于Vant的Calendar组件，通过lunar-javascript库实现农历日期转换功能。核心代码包括：1）在template中使用van-calendar标签，设置最小可选日期和颜色样式；2）通过formatter方法将公历日期转换为农历显示；3）引入lunar-calendar库实现公历转农历的功能。使用方法是在需要的地方引入组件，通过@confirm事件获取选中的日期并进行转换处理。该组件实现了公历与农历的双向转换展示，方便用户选择并查看农历日期。
2025-08-12 16:30:08
233
原创 Vue3+Element Plus 日历标注功能：让重要日期一目了然的开发指南
本文介绍了使用Vue3和ElementPlus实现动态标注活动日期日历组件的方法。通过el-calendar组件搭建基础日历结构，自定义插槽显示日期和活动标记。核心逻辑包括：使用ref获取日历实例，处理月份切换时调用API获取活动日期数据，利用响应式更新标注显示。实现关键点在于组件通信、异步处理和月份过滤，确保只在当前月日期上正确显示标记。该方法既利用UI组件基础功能，又满足业务需求，代码简洁易维护，可扩展更多标注类型等功能。
2025-07-10 14:40:20
616
原创 Vue2 中播放.svga 格式动画的实现方法
摘要：本文介绍了在Vue2项目中集成SVGA动画的完整方案。首先通过npm安装svgaplayerweb库，然后封装可复用的Svgaplayer.vue组件，实现动画播放、循环控制、回调处理等功能。组件支持动态生成唯一ID，确保多个动画同时播放不冲突，并在销毁时自动释放资源。最后说明了组件使用方法、关键功能及性能优化建议，为Vue项目集成SVGA动画提供了完整解决方案。（150字）
2025-06-16 11:20:08
365
原创 如何获取引入 JS 文件的自定义参数
HTML中通过data-*属性传递参数给脚本的方法：在<script>标签上定义data-*属性传递参数（如data-param="value"），复杂参数可用JSON字符串格式。在JS中通过document.currentScript获取当前脚本元素，再使用getAttribute读取参数值，JSON数据需解析后使用。该方法简单高效，适用于脚本参数化场景。
2025-06-13 15:11:34
139
原创 Vue 实现渐变色的进度条：打造视觉惊艳的环形进度组件
本文介绍了在Vue项目中通过ElementUI结合SVG渐变技术创建渐变色环形进度条的方法。主要内容包括：1）基础实现使用el-progress组件构建环形进度条框架；2）通过SVG线性渐变定义和CSS样式覆盖实现渐变色效果；3）提供完整应用示例，包含进度控制与动画演示。该方案能够显著提升界面视觉效果，同时保持ElementUI组件的易用性，为开发者提供了一种美化进度条显示的实用方案。
2025-06-13 15:03:21
749
原创 Vue + Vant UI 实现 H5 调用钉钉扫码功能全攻略
本文介绍了在Vue项目中集成钉钉扫码功能的实现方法，通过VantUI和dingtalk-jsapi库完成开发。主要内容包括：环境配置（安装JSAPI库）、核心代码实现（扫码按钮、结果展示等交互逻辑），以及关键功能解析（环境检测、API参数配置等）。重点优化了异步处理（Promise封装）和用户体验（loading状态、Toast提示）。开发时需注意权限配置和版本兼容性，建议在真机环境测试确保稳定性。
2025-06-10 09:33:37
536
原创 Vue2 实现扫码功能：基于 vue-qrcode-reader 的完整指南
在移动端应用开发中，扫码功能是常见需求。本文将详细介绍如何在 Vue2 项目中使用插件实现扫一扫功能，包括环境搭建、组件封装及使用注意事项。
2025-06-10 09:27:08
1090
原创 Vue 项目中使用 JSAPI 调起微信支付的完整指南
本文详细介绍了在Vue项目中调用微信支付JSAPI的实现方法，包含完整代码示例和常见问题解决方案。主要内容包括：1. 微信支付JSAPI标准调用流程；2. 核心代码实现，涵盖支付参数获取、WeixinJSBridge监听和支付结果处理；3. 如何解决ESLint报错问题；4. 开发注意事项，强调支付参数必须后端生成、微信环境限制等要点。通过本文指导，开发者可以快速在Vue应用中集成微信支付功能，并避免常见错误。
2025-06-06 10:08:43
914
原创 深入解析：使用 requestFullscreen () 后下拉框和提示不显示问题
全屏模式下ElementUI组件失效问题及解决方案 摘要：文章分析了requestFullscreen()全屏API导致ElementUI下拉框(el-select、el-cascader)和消息提示失效的原因：全屏层与原页面隔离导致挂载到body的组件无法正常显示。提供了两种解决方案：1)通过设置popper-append-to-body=false让下拉组件挂载到父容器；2)自定义封装消息提示组件，控制其挂载位置。这些方法有效解决了全屏模式下的组件显示问题，提升了Web应用的用户体验。
2025-06-06 09:05:36
393
原创 vue3+element plus省市区选择
1.安装element-china-area-data。2.在需要的页面引入并使用。3.若需要在其他地方回显。
2025-06-05 09:43:30
402
1
原创 vue3+element plus实现农历日期选择器
solarLunarDate为日期选择器显示的值。2.封装日期组件DatePicker.vue。solarDate为日期选择器绑定的值。3.在需要使用日期的文件中引入组件。1.安装所需要的插件。
2025-06-05 09:33:23
417
原创 echarts+echarts-gl实现3d饼图
1.安装echartsnpm install echarts2.安装echarts-glnpm install echarts-gl根据ehcarts版本安装,这里我用到的是这个3.引入插件import 'echarts-gl';import echarts from 'echarts';4.完整代码如下<template> <div class="ybjgtzz"> <!-- 饼图 --> <div c
2024-11-07 16:51:51
736
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人