- 博客(190)
- 资源 (12)
- 收藏
- 关注
原创 VantUI Picker实现动态时间(日、时、分)选择——类似滴滴预约时间选择弹窗
文章摘要: 本文实现了一个自定义的日期时间选择器组件,基于Vant UI的Picker组件开发。组件包含日期、小时和分钟三列选择,支持显示今天、明天和后天三个日期选项,并根据当前时间动态调整可选时间范围。当选择"今天"时,小时和分钟选项会从当前时间开始计算,避免选择过去时间。组件提供了初始化当前时间、确认选择和关闭弹窗等功能,并显示温馨提示信息。该组件适用于需要选择未来时间的场景。
2026-01-25 08:00:00
206
原创 js处理数字——添加数字的千位分隔符
本文介绍了四种数字千分位格式化方法:1)正则表达式替换法;2)toLocaleString()内置方法,支持国际化;3)Intl.NumberFormat对象,可指定语言地区(如en-US、zh-CN);4)手动分割处理法
2025-11-11 11:00:00
340
原创 vue div标签可输入状态下实现数据双向绑定
摘要:该代码实现了一个可编辑div与输入框的双向绑定功能。使用contenteditable属性使div可编辑,并通过@input事件更新数据。但由于直接修改el-input内容时未触发div更新,导致两者未能完全同步。建议在set方法中手动更新div内容或使用watch监听数据变化来实现完整双向绑定。
2025-10-30 09:43:21
199
原创 element table 表格多选框选中高亮
本文介绍了如何在Element UI表格中实现选中行高亮效果。通过设置highlight-current-row为false禁用当前行高亮,使用selection-change事件和row-style方法动态为选中行添加背景色。核心实现包括:1)监听选中行变化,记录选中行索引;2)通过rowClass方法根据索引判断是否添加高亮样式。当用户多选时,选中行会显示蓝色背景(#ecf5ff),而单击当前行不会高亮,满足了特定场景下的UI交互需求。
2025-08-20 20:00:00
434
原创 setTimeOut 切换浏览器窗口倒计时时间误差的解决
这段代码实现了一个误差修正的倒计时功能。通过记录每次执行的误差时间(offset),动态调整下一次执行的间隔时间(nextTime),从而减少累计误差。主要逻辑:1)清除原有计时器;2)计算总倒计时时长;3)利用setTimeout递归执行doFunc;4)每次执行记录误差并调整下次间隔;5)倒计时结束时触发回调函数goFunc。使用时可传入自定义回调处理倒计时逻辑,适用于需要精确计时的场景。
2025-07-31 14:16:29
207
原创 van-swipe进行滑动时报错:Uncaught TypeError: Cannot read properties of null (reading ‘width‘)
摘要: 在使用VantUI的van-overlay嵌套van-swipe实现弹窗轮播时,出现无法滑动且报错Cannot read properties of null (reading 'width')的问题。原因是Swipe组件在隐藏状态下无法正确计算宽度。解决方案:1)通过v-if控制Swipe的延迟渲染;2)显示后手动调用resize()方法重新计算尺寸;3)临时使用定时器延迟初始化(不推荐)。核心思路是确保Swipe在可见DOM环境中初始化或触发尺寸重算。
2025-07-18 08:00:00
544
原创 vue使用post请求处理接口返回EventStream数据并进行展示
本文介绍了在Vue中使用SSE.js插件实现POST请求EventStream数据的方法。首先安装SSE.js插件,创建SSE连接时配置POST请求头和参数,通过onmessage回调处理实时返回的数据流。文章还提供了Markdown文本解析的完整实现方案,包括代码高亮、数学公式渲染、链接处理等功能,使用markdown-it、KaTeX和DOM净化等库实现。最后给出了断开SSE连接的方法,确保资源释放和内存管理。
2025-05-28 09:10:03
1012
原创 搭建NodeJS项目使用独立 Express 服务器模拟 SSE(实现模拟调用接口返回EventStream数据)
搭建nodejs项目使用独立express服务器模拟SSE,并实现vue本地模拟调用接口返回EventStream数据进行展示
2025-04-25 08:00:00
557
原创 element-ui动态设置tabel的columns时,切换columns数据表格抖动
elementUI table动态设置columns,切换数据表格抖动
2025-01-14 14:17:29
585
原创 vue打包报错ERROR in static/js/vendor.js from UglifyJs Unexpected token: operator (>) [static/js/vendorjs
ERROR in static/js/vendor.js from UglifyJs Unexpected token: operator (>) [static/js/vendorjs 报错
2024-12-18 16:43:36
652
原创 vue强制刷新组件的三种方式:$forceupdate、v-if、key
项目中遇到父组件给封装子组件传值,传的值改变后,页面显示没有进行相对的更改,针对解决这个问题进行三种组件刷新方式的使用记录。
2024-09-24 16:28:44
1967
原创 npm ERR! request to https://registry.npm.taobao.org/fastclick failed, reason: certificate has expire
npm报错:request to https://registry.npm.taobao.org failed, reason certificate has expired
2024-02-25 14:07:27
447
原创 This method should not be called on the main thread as it may lead to UI unresponsiveness报错
ios加载H5显示This method should not be called on the main thread as it may lead to UI unresponsiveness报错
2024-01-12 17:35:53
3502
原创 vant List组件实现上拉加载中 首次进行load事件执行两次的问题
list组件上拉加载第一次加载去执行load事件时,该事件执行两次的问题解决
2023-07-06 15:22:21
3170
原创 关于IE11的样式兼容问题记录
1、布局如下<div class="map-label" :class="{active:isActive}" :style="{marginTop:`${marTopVal}px`}"> <transition name="slide-fade"> <div class="transition-out" v-if="show"> <div class="circle-out" :style="{left:circleLeft,top:circleTo
2023-06-28 15:07:09
990
原创 修改elementUI carousel组件源码实现轮播图卡片化宽度自适应及样式调整
项目中要实现下图效果三说明:效果二和效果三是说明不同宽度达到的组件的效果纯css实现宽度自定义并居中通过elementUI API中发现没有暴露出轮播图卡片化的自定义的宽度,通过查看样式得知是固定的50%的宽度,那么要实现修改宽度可以进行样式覆盖,代码如下:.el-carousel__container { .el-carousel__item--card { width: 850px !important; background: #fff; } .el-carousel__ite
2023-05-29 14:12:37
4092
原创 axios get请求 (failed)net::ERR_CERT_AUTHORITY_INVALID
问题描述:vue项目,使用axios.get请求一个接口,出现如下图所示错误点开详情:但是在地址栏内输入完整的链接进行请求,可以成功返回数据。定位问题:1、首先根据CORS error这个错误定位接口是跨域;2、用跨域浏览器重新加载页面请求接口后返回:axios (failed)net::ERR_CERT_AUTHORITY_INVALID这个错误,定位:因为https请求,谷歌浏览器认为是不安全的链接,可重新在跨域浏览器中输入完整的接口地址,跳出需要确认跳往这个不安全链接后,就可以正常进行
2023-02-28 10:21:07
3511
4
原创 vue computed内计算属性方法传参及使用
项目中有需求对某些字段进行处理,vue中computed内计算属性无法直接传参进行使用,想要对字段进行动态过滤。html:<div class="order-card" v-for="item in xcDataList" :key="item.orderId"> <div class="info-date"> <div class="date-left">05月13日 周五</div> <div class="date-right">
2023-02-06 17:15:46
1411
原创 vue升级报错:[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead
vue升级报错:[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead
2022-12-19 09:50:28
2294
原创 vue el-select搜索功能--区分输入内容后得到的是否是下拉框选择数据
区分elementui使用select组件,进行输入后得到的值是输入的值还是通过下拉框选取的值
2022-11-22 18:02:44
2364
原创 vue npm install报错:post install error, please remove node_modules before retry!
报错:× Install fail! RunScriptError: post install error, please remove node_modules before retry!
2022-10-24 17:31:42
13459
3
vue项目(基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子)
2018-06-21
vue实现表头固定、表体可下拉刷新上拉加载
2019-04-26
vue项目分环境打包配置不同命令
2018-06-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅