自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(71)
  • 收藏
  • 关注

原创 vue3监听版本更新

Vue项目版本自动检测方案摘要:通过vite插件在打包时生成version.json并写入时间戳,前端使用定时器每5分钟检查版本差异。当发现新版本时弹出提示,用户确认后自动刷新页面。主要实现包括:1) vite.config.js配置插件动态生成版本文件;2) 创建versionCheck.js工具函数进行轮询检测;3) 主入口main.js初始化检测功能。该方案利用时间戳对比实现轻量级版本控制,无需额外构建步骤即可完成前端应用更新提示。

2025-08-18 14:18:10 304

原创 uniapp基础(五)调试与错误

UniApp常见错误排查与优化指南 本文系统整理了UniApp开发中的各类错误及解决方案,主要包含: 编译错误:详细分析依赖冲突、语法错误、路径引用等10类编译错误的日志特征与解决方法 跨域处理:提供5种跨域解决方案,包括本地代理、CORS设置、JSONP请求等 错误捕获:介绍全局错误监听方法,包括onError钩子、Promise错误拦截等 小程序优化:针对白屏问题提出9项优化措施,如分包加载、骨架屏、内存管理等 类型检查:列举TypeScript常见类型错误及修正方案 特别包含各场景下的代码示例和最佳实

2025-08-05 10:03:24 750

原创 uniapp基础(四)性能优化

UniApp性能优化全攻略 本文系统介绍了UniApp开发中的性能优化策略,涵盖以下关键方面: 加载速度优化: 资源压缩(WebP图片、字体图标) 分包加载与预加载 骨架屏与懒加载技术 渲染性能提升: 虚拟列表处理长数据 合理使用v-if/v-show 避免频繁setData操作 CSS动画优化技巧 数据请求优化: 缓存策略与请求合并 防抖/节流控制频率 预加载与错误重试机制 内存管理: 及时销毁定时器和监听器 组件按需加载 内存泄漏检测方法 其他关键技术: WebWorkers多线程应用 代码分割实现方案

2025-08-04 14:27:44 1393

原创 uniapp 基础(三)

UniApp开发实用指南摘要 本文总结了UniApp开发中的10个关键功能实现方案: 表单验证:支持内置组件验证、自定义函数、第三方库(async-validator)及UI组件库集成,强调后端验证的必要性。 导航栏适配:详细说明多平台导航栏配置差异,包括条件编译、胶囊按钮适配和自定义导航栏组件实现。 自定义tabBar:从配置到组件开发的全流程,重点说明选中状态同步和生命周期处理。 状态管理:对比全局变量、Vuex和Pinia方案,提供本地存储持久化建议。 分享功能:解析uni.shareAPI使用和平台

2025-08-04 13:40:52 1590

原创 uniapp基础 (二)

1.官方组件库UniApp 内置了基础组件(如viewbuttoninput等),覆盖了大部分基础功能,可直接通过uni-前缀使用。2.第三方组件库uView UI多平台兼容(H5、小程序、App),提供丰富的组件(表单、弹窗、布局等)。支持主题定制,文档详细,适合快速开发。安装方式:通过 npm 或直接下载导入。ColorUI注重视觉效果的组件库,提供动画和个性化样式。适合需要高定制化界面的项目,但功能组件较少。ThorUI轻量级组件库,包含常用业务组件(如日历、级联选择器)。

2025-08-01 16:19:36 1009

原创 uniapp基础 (一)

UniApp 是什么?有什么优势UniApp 是一个使用 Vue.js 开发跨平台应用的框架。采用模式,显著降低开发成本支持 14+ 平台编译,覆盖主流移动端、Web 端及小程序生态开发效率提升约 300%(相较原生多端独立开发)完全兼容 Vue.js 语法,前端开发者零门槛上手支持 Vuex 状态管理、Vue Router 路由等核心能力官方插件市场提供 2000+ 即用组件支持第三方 SDK 便捷集成(如支付、推送、统计)示例:一键集成微信登录功能。

2025-08-01 15:08:15 952

原创 vue+ts 基础面试题 (四)

创建一个函数,利用useState和useEffect跟踪鼠标坐标}, [])

2025-08-01 13:48:56 756

原创 vue+ts 基础面试题 (三)

template>title="欢迎使用Vue3"/>console.log('新计数值:', newValue)console.log('组件已挂载')})</script>

2025-08-01 11:03:20 653

原创 vue+ts 基础面试题 (二)

在 Vue3 中,自定义组件的 v-model 默认使用modelValue作为 prop,作为事件:</script><template><input。

2025-07-31 15:32:55 469

原创 vue+ts 基础面试题 (一 )

/ 子组件this.$emit('child-event', data) // 触发事件// 父组件methods: {console.log(data) // 接收子组件数据使用声明事件列表。在方法中调用emit函数触发事件,并传递数据。在模板中绑定事件触发器(如按钮点击)。//子组件 ChildComponent.vue// 导入 defineEmits// 定义事件列表:声明一个名为 'customEvent' 的事件// 定义一个方法,在触发时发送事件。

2025-07-31 14:32:01 1837

原创 Vue 3 + TypeScript 从基础到熟练指南

TypeScript的核心是类型。在Vue组件中,我们可以为props、emits、reactive状态等定义类型。

2025-07-31 10:22:55 458

原创 uniapp底部导航栏凸起,点击+出现弹窗

自己写的小demo 如需使用 自行clone 直接打开运行就可以点击中间按钮出现弹窗,用于发布,其他底部按钮正常跳转页面 注意: 只适用于 中间位置,底部导航两边要对称:中间按钮的图标路径。:中间按钮的高度,设置为大于其他 TabBar 项的高度即可实现凸起效果。:图标的宽度,高度会等比例缩放。注意: 没有 ,需要通过监听点击事件自定义行为。在app文件onLaunch 中放入此代码 监听凸起按钮点击事件完整代码:主要是配置 pages.jsonapp.vue效果图:

2025-07-21 11:07:55 1166

原创 vue3+ts div自由拖拽改变元素宽度

‌尺寸计算‌:记录初始宽度和鼠标位置,通过差值计算新宽度‌。明确拖拽方向提示,绝对定位确保手柄与左侧面板右边界对齐‌。结束拖拽并移除事件监听。这种设计避免了事件泄露‌。保存用户调整后的宽度,提升用户体验‌。中动态计算宽度差值,

2025-07-11 15:27:33 205

原创 vue3 input 输入密码后显示... 不使用 type=“password“

属性将输入内容显示为圆点(类似密码框效果),但实际类型仍为。‌:完全控制显示逻辑,可自定义替换符号(如。通过监听输入事件,实时将输入内容替换为。‌:部分旧版本浏览器可能不支持。‌:无需额外逻辑,纯样式实现。,避免浏览器自动填充密码‌。‌:需手动处理输入事件‌。

2025-07-03 11:10:54 222

原创 vue3+原生javascript 手写日期时间选择框 滚动选择可输入

7.当输入修改时,下面的年月日会滚动到修改后的日期上面,输入框 加 @input 事件。5.获取到默认日期,给对应下拉数据 add('active') 加选中class名。4.打开日期框时,使用 appendChild(div) 动态插入年月日时分。8.当输入的值不在下拉列表中 默认第一个月 01,日01,时01,分01。6.注意一点:日期格式转换 月 日 时 分 小于10补0。11.添加打开,关闭(取消/确定) 日期框事件。3.年月日时分 下拉给默认list数据,日:根据所选中年月来判断出多少个日期。

2025-07-03 11:08:21 351

原创 vue3修改html中title标签 给 浏览器标签页 动态赋值 闪烁

使用方式1:做假动作 显示隐藏 替换 来实现闪烁效果。彩色浏览器标签页标题:目前没有纯前端解决方案‌。无标题有标题替换显示。

2025-06-26 16:08:22 381

原创 vue3 年月日 时分秒 各种转换

console.log('年月日时分秒转秒:','2025-06-24 15:01:13 ---',datetimeToSeconds('2025-06-24 15:01:13'))console.log('年月日时分转分:','2025-06-24 15:01 ---',datetimeToMinutes('2025-06-24 15:01'))console.log('时转秒:','1时---',hoursToSeconds(1),'秒')可单独放到 ts文件中。

2025-06-25 10:48:46 373

原创 vue3 列表中内容超出浏览器高度时换列显示,动态定义宽度,可多个列表

左右两个列表 挨着排列,当左边内容超出滚动条时,换列显示,右边的列表随之移动。2.左边数据:30,右边数据:5 此时:左边数据分两列显示,右边跟着移动。1.左边数据:10,右边数据:5。

2025-06-21 15:33:13 730

原创 vue3 拖动div 改变顺序

需要先安装sortablejs库(npm install sortablejs)Vue3实现的垂直可拖动排序列表案例,基于SortableJS库实现。

2025-06-20 16:02:37 696

原创 vue3 动态绑定 ref 并获取其 dom

‌:动态绑定时会传入当前 DOM 元素或组件实例。中建议用对象存储 refs 而非数组。for 循环 可使用单/多层 嵌套。

2025-06-19 15:59:11 491

原创 vue3 iframe 跨域-通讯

通过 Nginx 代理目标网址,隐藏原站点的。直接在 HTML 中使用。随后将 iframe 的。若需与嵌套页面交互,使用。‌:若目标网站设置了。

2025-06-17 16:17:29 376

原创 vue3 select 选中值时,即获得id,也获得name值并且输入框正确选中

- 合并对象和索引 -->绑定为整个对象,通过。绑定为整个对象,通过。

2025-06-16 14:22:24 493

原创 vue3 双容器自动扩展布局 根据 列表中内容的多少 动态定义宽度

左右两个列表 挨着排列,当左边内容超出滚动条时,换列显示,右边的列表随之移动。2.左边数据:30,右边数据:5 此时:左边数据分两列显示,右边跟着移动。1.左边数据:10,右边数据:5。

2025-06-13 17:08:55 379

原创 vue3 解析excel字节流文件 以表格形式显示页面上 带公式

指定输出结果为二维数组格式,每行数据以数组形式呈现。若不设置该参数或设为其他值,则默认输出键值对格式的对象数组。为空单元格设置默认值为空字符串,避免解析时跳过空值导致字段缺失。此方法适用于excel中单文件,如excel中多文件 请参考上方 封装接口方法。保留单元格原始公式而非计算结果,适用于需要获取Excel公式的场景。responseType: 'arraybuffer' 必填***封装方法,调用方法和传参形式依照自己的,这里只是示例。此代码适用于单文件,如需多文件 参考上方封装接口方法。

2025-06-13 11:03:37 1086

原创 vue3 定时器-定义全局方法 vue+ts

$timer.setInterval(() => { // 需要定时循环的内容 // }, 时间);

2025-06-09 14:20:03 328

原创 vue3 各种数据处理

findIndex()方法用于查找数组中满足条件的第一个元素的索引值。该方法会遍历数组,对每个元素执行回调函数,直到找到使回调函数返回true的元素,然后立即返回该元素的索引。如果遍历完整个数组都没有找到符合条件的元素,则返回-1。用途:想要通过id数组来取得数据源中对应数据。可直接获取指定值,或者获取其对象。用途:获取此数组中共有几个名字。

2025-05-29 14:45:08 521

原创 vue3 导出excel

需求:导出自带格式的excel表格。1.自定义二维数组格式 导出。

2025-05-29 14:03:19 341

原创 vue3 报错

问题1.v-model cannot be used on a prop, because local prop bindings are not writable.v-model改为:modelValue。

2025-05-06 14:12:55 263

原创 vue3 element-plus+sortablejs 行拖拽

【代码】vue3 element-plus+sortablejs 行拖拽。

2025-04-28 14:39:12 269

原创 vue3 组件传参

/ 暴露变量 defineExpose({ openDialogReceivingUni, });当父组件想要执行子组件方法的时候需要暴漏变量。子取值:props.checkedCities。

2025-04-22 10:58:50 263

原创 vue3 element-plus el-time-picker控制只显示时 分,并且控制可选的开始结束时间

控制只显示时分秒 HH:mm:ss。控制只显示时分 HH:mm。

2025-04-17 16:55:37 668

原创 vue3 当页面显示了 p/span/div 标签 想要转换成正常文字

vue3 使用 :deep(span) 其他方式也可以这里不做描述。返回值有标签出现时,使用v-html 解决。注意:转换后 样式不继承 需要 深度添加。解决:v-html 显示。

2025-04-16 10:23:42 143

原创 vue3 div 点击右键旁边出现弹窗 可做编辑删除 新增操作

【代码】vue3 div 点击右键旁边出现弹窗 可做编辑删除 新增操作。

2025-04-14 16:05:26 282

原创 mongodb 安装配置

解压包安装:https://pan.baidu.com/s/1Er56twK9UfxoExuCPlJjhg 提取码: 26aj。(修改端口号 :在cmd 中执行: mongod --dbpath 路径 --port 端口号。路径: C:\Program Files\MongoDB\Server\3.6\bin。mongod --config "mongodb.conf路径" --install。接下来在bin目录同级创建mongod.conf文件,这个文件一定要创建否则找不到会报错。

2025-04-14 13:59:51 663 1

原创 vue3 onMounted 使用方法和注意事项

仅在组件首次挂载时触发,不会在更新阶段重复调用‌。中执行异步操作(如数据请求),确保组件已完全渲染。按代码顺序依次执行,支持定义多个钩子函数‌。中注册了事件监听或定时器,需在。

2025-04-14 13:58:52 876

原创 vue3 dayis 动态获取指定日期

【代码】vue3 dayis 动态获取指定日期。

2025-04-02 11:15:56 211

原创 element-plus 下拉框 去掉右侧下拉图标 可搜索 可新增

【代码】element-plus 下拉框 去掉右侧下拉图标 可搜索 可新增。

2025-03-27 14:43:14 168

原创 vue3 数组嵌套多层进行搜索 取搜索的子集

问题:树形结构数据 想要根据搜索功能获取所搜到的子集数据。

2025-03-24 17:20:28 253

原创 vue3 前端 分页 element-plus +vite

【代码】vue3 前端 分页 element-plus +vite。

2025-03-12 17:00:32 126

原创 获取excel表格实际数据列数 / 所有列的列名

【代码】获取excel表格实际数据列数 / 所有列的列名。

2025-03-12 14:50:05 225

【uni-app开发】底部导航栏凸起设计与实现

内容概要:本文介绍了uniapp中实现底部导航栏中间按钮凸起并带有点击事件的方法,提供了三种不同的解决方案。方案一是通过`midButton`配置仅适用于app环境的凸起按钮,配置参数包括图标路径、高度和宽度,并通过监听`uni.onTabBarMidButtonTap`事件实现点击后弹窗发布功能。方案二是使用`wht-tabbar`组件,支持app和微信小程序,同样可以实现点击中间按钮后的自定义操作。方案三是自定义tabbar组件,完全由开发者控制,灵活性最高。文中还给出了具体配置示例和代码片段,如`pages.json`中的页面路径配置、全局样式设置以及`app.vue`中的事件监听代码。 适合人群:熟悉uniapp框架,有前端开发经验的研发人员,特别是对移动端应用开发感兴趣的开发者。 使用场景及目标:① 实现uniapp应用底部导航栏中间按钮的凸起效果,增强用户体验;② 通过点击中间按钮触发特定操作,如弹出发布窗口或其他自定义行为;③ 掌握不同方案的优缺点,选择最适合项目的实现方式。 阅读建议:由于涉及到具体的代码实现和配置,建议读者在理解理论的基础上,动手实践文中提供的示例代码,并参考提供的Gitee项目链接进行深入学习。

2025-08-18

前端开发Vue 3与TypeScript深度整合指南

内容概要:本文档详细介绍了使用 Vue 3 和 TypeScript 构建现代前端应用的完整流程。首先,文档讲解了如何使用 Vite 创建项目并搭建基础环境,包括安装核心依赖如 Vue、Pinia 和 Vue Router。接着,深入探讨了单文件组件(SFC)的编写方法,特别是如何利用 `<script setup>` 和 Composition API 结合 TypeScript 进行开发。文档还详细解释了组件间通信的类型定义(Props 和 Emits),以及状态管理和路由配置的最佳实践。此外,涵盖了一些高级 TypeScript 技巧,如自定义类型守卫和泛型组件,并介绍了组合式函数的封装与使用。最后,文档讨论了测试、调试工具的配置,并提供了从基础到精通的学习路径建议。 适合人群:有一定 JavaScript 和 Vue.js 基础的开发者,尤其是希望提升 TypeScript 技能并应用于 Vue 3 项目的前端工程师。 使用场景及目标:①学习如何使用 TypeScript 强化 Vue 3 项目的类型安全性;②掌握 Pinia 状态管理和 Vue Router 的最佳实践;③了解如何通过组合式函数提高代码复用性和维护性;④掌握从基础到高级的 TypeScript 技巧,以构建更复杂的 Vue 应用。 阅读建议:读者应按照文档提供的学习路径逐步深入,先掌握基础概念和工具的使用,再逐步探索高级特性和最佳实践。同时,建议在实际项目中不断练习和应用所学知识,确保理论与实践相结合,达到最佳学习效果。

2025-08-18

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除