- 博客(45)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue3 表格穿梭框组件
摘要：本文介绍了一个基于Vue3和vxe-table开发的双表格数据转移组件。该组件支持本地/远程数据加载，提供分页、搜索、全选等功能，具有高度可定制性。文档详细说明了组件API、运行环境（Windows10+Chrome+Node20），并展示了基础使用、远程加载、自定义表格列和表单集成四种典型应用场景。通过插槽机制可自定义表格列，组件能灵活集成到各类表单场景中，支持完善的数据变更和事件通知机制。
2025-10-16 23:37:48
311
原创 vue3 hooks 根据当前的年月日，获取前几个月的日期
本文介绍了一个基于Vue3和ElementPlus开发的日期范围计算Hook——useDateRange.js。该工具支持灵活配置基准日期、获取月份数量和是否包含当前月，提供6种内置日期格式并支持动态添加。采用响应式设计自动更新计算结果，具备健壮的无效日期处理能力，适用于报表系统、日历组件等场景。文章详细展示了基础使用、自定义配置、动态更新和组件集成四种典型用法，通过配置对象和API方法实现高度定制化的日期范围计算功能。该Hook能显著简化前端日期处理逻辑，提升开发效率。
2025-10-13 15:50:57
419
原创 javaScript(JS) 获取文件后缀名
本文介绍了一个基于Vue3+ElementPlus的文件类型识别方法，使用正则表达式匹配文件后缀名。系统环境为Windows 10、Chrome浏览器、NodeJS v20.17.0和NVM 1.1.12。核心代码通过正则表达式匹配文件名末尾的后缀（如.jpg），并转换为小写统一处理。支持jpg/jpeg/png返回"预览"，pdf/doc/docx返回"下载"，其他类型返回空操作。优势在于代码简洁、大小写兼容（通过/i标志）和扩展性强，只需修改正则即可支持更多文件类
2025-10-13 15:04:09
206
原创 vue3 + elementPlus 封装hook,检测form表单数据修改变更；示例用 script setup 语法使用
目前要实现这样一个功能，修改了form表单数据后，检测form表单数据修改前，修改后的变化，记录下来，传递给后端，后端偷懒让前端来做，花了一天时间，缝缝补补优化后，没有什么问题，记录一下。运行终端：Goodle Chrome(谷歌) 浏览器。开发框架：vue3 + elementPlus。开发环境：nodeJS v20.17.0。运行系统：windows 10。nvm 版本：1.1.12。
2025-06-26 13:21:07
472
转载 vue3:Teleport传送组件
Teleport 是一种能够将模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。通过to 属性 插入指定元素位置 to=“body” 便可以将Teleport 内容传送到指定位置。
2025-04-04 11:26:27
87
转载 vue3:keep-alive缓存组件
有时候我们不希望组件被重新渲染影响使用体验；而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。include 和 exclude 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中。初次进入时： onMounted> onActivated。include: 缓存指定组件。exclude：不缓存指定组件。max：最大可缓存的数量。
2025-04-01 11:08:43
113
转载 vue3:父子组件传参
创建子组件 water-fall.vue ,defineProps接收父组件传递过来的参数。defineExpose 子组件给父组件暴漏一个属性或者方法。父组件读取子组件数据，子组件给父组件暴漏一个属性或者方法。defineProps 接收父组件传递过来的数据。defineEmits 给父组件传值。子组件给父组件暴漏一个属性或者方法。父组件接收来自子组件传递的数据。例1：子组件给父组件传值。例2：子组件给父组件传值。父组件向子组件传递数据。
2025-03-09 18:47:59
486
转载 vue3:生命周期
beforeCreate created setup语法糖模式是没有这两个生命周期的 setup 去代替。onRenderTracked 调式。·获取的是更新之前的dom;获取的是更新之前的dom;
2024-11-22 11:06:29
39
原创 vue3:scss引用
3. 全局引用，在 vite.config.ts 文件下做如下配置。4. 开始使用，全局引用之后就可以在所有页面使用了。2.在src目录下创建bem.scss文件。1. 首先需要在项目根目录下安装scss。
2024-11-20 12:49:53
1920
原创 vue3:watchEffect
停止监听：赋值给一个变量，watchEffect会返回一个函数，变量作为函数调用会停止监听。flush：pre 组件更新之前调用， sync 同步执行， post 组件更新之后执行。可以传递一个参数作为回调函数，在数据发生变化之前做一些操作。watchEffect 是非惰性的，一进入页面会自动调。onTrigger:数据发生变化后断点调试。flush 执行时机，可选参数如下。
2024-11-18 11:55:15
323
原创 vue3： toRef, reactive, toRefs, toRaw
【代码】vue3： toRef, reactive, toRefs, toRaw。
2024-11-15 03:16:01
292
原创 vue3: ref, reactive, readonly, shallowReactive
【代码】vue3: ref, reactive, readonly, shallowReactive。
2024-11-15 02:41:55
445
原创 vue3: ref, isRef, shallowRef, triggerRef, customRef
原文关注公众号，后台里留言可进行提问，可在后台留言向作者提问解答问题!
2024-11-14 15:51:31
360
原创 vueJS中wowjs、animate、swiper的使用
如果要在swiper使用动画需要引入 swiper.animate.min.js，在官网手动下载自行引入。npm 安装 wow.js，安装 wow.js后animate.css会自动安装；data-wow-offset（元素的位置露出后距离底部多少像素执行）data-wow-iteration（动画执行次数）data-wow-duration（动画持续时间）data-wow-delay（动画延迟时间）npm 安装 animate.css。在main.js中加入。
2024-10-11 18:31:53
806
原创 vue3 挂载全局公共方法/变量/数据
vue 中的 getCurrentInstance 方法返回了 ctx 和 proxy，控制台打印 ctx 和 proxy 发现和 vue2.x 中的 this 等同，习惯使用 this 的朋友可以用 proxy 进行替代。1、在 main.js 通过两种方法注入全局函数 asyncDate ，分别利用了 app.config.globalProperties 和 provide。-------------------------正文开始---------------------
2024-09-29 11:39:05
1185
原创 JS 通过年份获取月，季度，半年度，年度
因为调用了月份函数setMonthData，导致生成的季度产生了重复数据，就是用了 removeDuplicateObjects 函数去重。实例化完成后，需要调用此函数来调用实例化函数内部其他数，给一些关键性数据赋值，并且回把生成好的数据return出去。当值是 false 时，使用了JS的 splice 移除了当前年，月，季度，和当前年的下半年。实例化一个函数，给函数内传递不同的参数，获取从起始年份到现在年度所有的月份，季度，半年度，年度。2.9 this.setMonthData 生成月度数据。
2023-10-18 16:06:13
671
原创 VueJS实现模糊查询
VueJS实现迷糊查询新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入前言：前端人员已经拿到后端返回的所有数据，由前端人员自行实现迷糊查询前置条件:开发环境：windows开发框架：vue2.5 ,vue-cli 4
2022-03-25 13:51:11
1816
2
原创 JS 转盘抽奖效果
阅读原文,微信扫描二维码， 手机关注公共号酒酒酒酒，搜索 JS 转盘抽奖效果JS 转盘抽奖效果前置条件：开发环境：windows开发框架：vue，elelemtUI，js编辑器：HbuilderX正文开始：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="description" content=""> <
2021-07-31 13:44:00
396
2
原创 设置App桌面图标上显示的角标数字
原文手机微信搜索公众号设置App桌面图标上显示的角标数字原文前言：新的前置条件:正文：代码：文档地址：API参数：平台支持：前言：使用uni-app开发苹果应用App和安卓应用App，已经有一年半的时间了，期间一直在记录自己遇到的坑，和对知识的整理，最近有童鞋问到数字角标，那么今天就补发一下吧新的前置条件:开发环境：windows开发框架：uni-app , H5+，nativeJS编辑器：HbuilderX兼容版本：安卓已作测试，IOS已测试正文：首先需要使用到 nativeJS
2021-05-16 17:40:50
6516
20
原创 APP跳转小程序，小程序跳转APP
前置条件：开发环境：windows开发框架：uni-app , H5+，nativeJS，mpvue编辑器：HbuilderX兼容版本：安卓已作测试,IOS已测试App开发用的是uni-app小程序开发用的是mpvueAPP 跳转小程序文档地址:https://uniapp.dcloud.io/api/plugins/share相关错误代码：https://ask.dcloud.net.cn/article/2871.1 首先需要在微信开放者平台将APP和微信小程序关联起
2021-03-02 13:21:50
1033
1
原创 Vuex入门、同步异步存取值进阶版
Vuex入门、同步异步存取值进阶版关注公众号，搜索Vuex入门、同步异步存取值进阶版，查看原文vueX介&绍安装Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化vueX 安装npm install vuex --sa vuex --savevueX使用3.1 首先在src下面创建store文件3.2在store文件下分别创建 actions.js、getters.js、in
2021-02-25 18:07:38
316
原创 vue-cli环境搭建
原文扫码搜索 vue-cli环境搭建vue-cli环境搭建项目构建前期准备工作：开始构建vue-cli项目：安装环境：windows运行环境：nodeJS项目构建前期准备工作：1、首先安装好nodeJS环境nodeJS下载地址：http://nodejs.cn/download/可根据自身情况，下载对应的nodeJS安装包1.1、 安装成功后，运行 node -v 命令查看nodeJS版本，运行成功后，会出现以下内容；2、运行 npm install -g vue-cli 全局安装v
2020-12-26 18:41:24
262
原创 uni-app 监听返回按钮
扫码查看原文前置条件：开发环境：windows开发框架：uni-app , H5+，nativeJS编辑器：HbuilderX 2.8.13兼容版本：安卓，IOS已作测试进入正题：文档地址uni-app：https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9funi-app自定义返回逻辑教程:https://ask.dclou
2020-12-04 14:55:46
3177
2
原创 微信H5分享外部链接，缩略图不显示
微信公众号酒酒酒搜索 “微信H5分享外部链接，缩略图不显示” 查看原文前言：最近做了一款推广茶的APP软件，展厅、产品需要分享功能；从APP内分享到H5网页；微信内打开H5网页，点击微信内右上角三个点，可再次分享；注意：大多数情况下，点击右上角三个点，再次分享后，缩略图不显示，需要做特殊处理。废话结束，正文开始，以下页面是在H5页面中执行。前置条件：开发环境：windows开发框架：uni-app , H5+，nativeJS编辑器：HbuilderX 2.8.13兼容版本：安卓，IOS已
2020-12-02 16:17:43
3960
1
原创 uni-app 动态控制下拉刷新
前置条件：开发环境：windows开发框架：uni-app , H5+，nativeJS编辑器：HbuilderX 2.8.13兼容版本：安卓，IOS已作测试此代码可以直接复制到uni-app项目中使用正文开始：首先，在 pages.json 中配置目标页面的 style->enablePullDownRefresh 为 true。page.json代码如下：{ "path": "pages/index/index", "style": { "navi
2020-11-14 09:47:46
2507
原创 uni-app支付功能
uni-app支付功能扫码查看原文前言近期一直在使用APP开发多端应用，IOS的APP、安卓的APP和H5网页，其中开发的APP使用到了微信和支付宝的支付，在此给大家分享出来，一起使用前置条件：开发环境：windows开发框架：uni-app , H5+，nativeJS编辑器：HbuilderX 2.8.13兼容版本：安卓，IOS已作测试此代码可以直接复制到uni-app项目中使用正文开始：首先需要做一些相关配置1.1 打开HbuilderX，配置manifest.json，选
2020-09-29 13:54:04
1471
原创 vueX 的使用
vueX 的使用前置条件：正文：方法一：方法二：方法三：使用 mapGetters，部分内容参照方法二；原文可扫码查看，搜索 vueX 的使用前置条件：开发环境：nodeJS开发框架：vue-cli 3.0vueX 文档 https://vuex.vuejs.org/zh/installation.html正文：方法一：使用npm安装vueX1.1 在项目根目录下执行vue命令：npm install vuex --save，安装vueX插件。安装成功以后，在src目录下新建一个文件
2020-09-08 09:32:10
249
原创 H5 腾讯地图无法导航
uni-app 打包H5腾讯地图无法导航前言：解决方案如下：前言：最近几天用uni-app开发安卓和iOS应用，打包成APP安装包后，APP内做地图导航没有问题，APP内使用的是高德地图；但是打包成为H5页面后，运行在微信内置浏览器或者运行在第三方浏览器（UC/QQ浏览器），默认运行的是腾讯地图，地图可以打开，却无法进行导航。具体错误可查看帖子：https://ask.dcloud.net.cn/question/86216##前置条件：开发环境：windows；开发框架：uni-app ,
2020-08-31 11:21:25
2769
原创 H5移动端字体自适应（也适用于宽高）
阅读原文扫码查看：自己研究摸索了几种H5移动端字体自适应的方法，分享出来和大家一起共享。方法一：纯css方法, 精确度高，IOS 和 安卓 字体大小同等比例1.1 以16px为基准，在根元素html下，字体为62.5%1.2 此时1rem=10px;/* css代码 */html { /* 10÷16=62.5% */ font-size: 62.5%;}body { font-size: 12px; /* 12÷10=1.2 */ font-size: 1.2re
2020-08-10 09:57:36
9410
原创 uniapp、nativeJS、H5+退出APP应用(IOS+安卓)
uniapp、nativeJS、H5+退出APP应用(IOS+安卓)点击此处文字，扫码进入此链接可阅读原文直接扫码进入此链接可阅读原文前言：近几日使用uni-app 开发移动应用APP，在用户首次安装的时候，需要仔细阅读隐私政策后，方可继续使用APP，否则就直接退出APP废话结束, 正式进入开发前置条件：开发环境：windows开发框架：uni-app , H5+，nativeJS编辑器：HbuilderX兼容版本：安卓，IOS未作测试此代码可以直接复制到uni-app项目中使
2020-07-31 17:44:10
2020
2
原创 h5+ 检测 APP 是否开启应用通知权限
h5+ 检测 APP 是否开启应用通知权限原文可查看此处,搜索 h5+ 检测 APP 是否开启应用通知权限https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg3NTAzMzAxNA==&scene=124#wechat_redirect如果此链接在浏览器中无法打开，可将此链接发送给微信好友或者发送到微信文件传输助手。在点击打开——————————————————————————————————————————前置
2020-07-09 14:20:01
1325
原创 uni-app 使用个推推送系统消息
uni-app 使用个推推送系统消息前置条件：1.1 开发环境：windows1.2 开发框架 : uni-app 、H5+1.3 编辑器 : hbuilderx2. 进入个推官网 ，注册申请账号，登录进入开发者中心，创建应用。2.1 创建应用步骤：我的/应用管理/创建应用2.2 创建完应用以后，查看应用信息，得到appId、appKey、appSecret3. 打开 hbuilderx ，在 manifest.json 文件里面的源码视图下面配置 sdkConfigsd 对象下的 pu
2020-07-08 19:02:22
876
1
原创 uni-app动态修改顶部导航栏标题
动态修改顶部导航栏标题有两种方法方式一、使用自定义到导航栏，覆盖原生导航栏缺点：自定义到导航栏性能远远不如原生导航栏，手机顶部状态栏区域会被页面内容覆盖，这是因为窗体是沉浸式的原因，即全屏可写内容；如果存在下拉刷新，下拉刷新会从导航栏上面开始下拉加载，解决方案可采用offset偏移量，自定义下拉圈出现的位置优点：可根据实际业务场景，开发符合自己UI的样式1、会覆盖手机屏幕状态栏，解决方法:1.1、要把状态栏的位置从前景部分让出来,可写一个占位符div<view class="statu
2020-06-13 16:14:25
5996
1
原创 uni-app热更新
开发工具HbuilderX开发框架 uni-app、h5+1、生成 App 资源升级包1.1、修改版本号1.2、首先，更新 manifest.json 中的版本号。比如之前是 1.0.0，那么新版本应该是 1.0.1 或 1.1.0 这样。2、发行2.1、然后，在 HBuilderX 中生成升级包（wgt）。2.2、菜单->发行->原生App-制作移动App资源升级包2.3、生成结束会在控制台告知升级包的输出位置。3.安装资源升级包3.1、应用的升级需要服务端与客户端
2020-06-13 14:44:32
1649
2
原创 JS 数组转对象 对象转数组 对象数组互相转换
数组转对象、对象转数组(针对嵌套深层次比较深的对象或者数组)声明一个函数，arr_obj ，里面接收一个参数，参数类型只接受对象或者数组如果没有传递任何参数 或者 传递的参数类型不符合要求，就会抛出错误异常无论是没有传递参数 或者 传递的参数类型不符合要求，抛出异常 并 打印出传递的参数如果要查看当前函数的对象，请通过 new 的方式实例化函数 arr_obj ，自行在控制台打印输出调用此函数，传入数组会自动转换为对象；传入对象会自动转换为数组// 数组转对象、对象转数组function
2020-06-08 14:09:07
4970
1
echarts.txt
2019-11-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人