- 博客(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 基础面试题 (三)
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 报错
问题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 组件传参
/ 暴露变量 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
原创 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
【uni-app开发】底部导航栏凸起设计与实现
2025-08-18
前端开发Vue 3与TypeScript深度整合指南
2025-08-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人