- 博客(30)
- 收藏
- 关注
RSS订阅原创 position: sticky； 网页吸顶效果，吸顶不遮盖容器滚动条
元素吸顶效果，依赖于属性；监听容器滚动，并判断容器的 scrollTop 值是否到达阈值。切换position的属性值；positionsticky和fixed两者都能在文档流中相对固定，属性值设置也相似。不同的是fixed相对于元素浮动。而sticky相对夫元素浮动。所以通常情况，以内的元素设置了fixed，会遮盖容器的滚动条。而设置sticky则不会出现这种情况。
2024-07-03 16:58:30
429
原创 Vue3 按钮根据屏幕宽度展示折叠按钮
3、当屏幕宽度缩小时，部分按钮通过 dropdown 的方式展示出来，doropdown 默认按钮使用。4、firstHideBtnIndex 边界值可自定义。2、插槽中插入父元素标签。默认效果和初始状态相同。1、获取父组件的元素，根据元素创建动态插槽。
2024-06-25 17:58:35
578
2
原创 Ant Design Vue Popconfirm 实现回车确认（Enter 确认）
操作的简单而紧凑的确认对话框。现实 Enter 触发确认事件, events API 无法满足.
2024-04-25 10:40:49
497
原创 Axios abort 请求
Axios 接口 abort 请求，依赖于 AbortController 实例的 abort 方法。单个和并行的请求，只需创建一次 AbortController 实例。Axios abort 请求，abort 方法只需调用一次。在接口请求之前更新 AbortController 实例，防止实例 signal.aborted 状态为 true，导致的接口无响应。
2024-04-12 16:43:14
568
原创 如何理解 Promise 的 resolve、reject 的调用时机
Promise 函数的返回值也是一个 Promise 对象，可以链式调用获取返回值。Promise 回调函数 resolve, reject，通常在异步操作结束后调用。如果函数返回结果同步就能获取，可以不考虑使用 Promise 的 resolve, reject。
2024-04-12 14:32:58
321
原创 select 标签 option focus 默认样式修改
修改标签属性时，会遇到自定义 option 背景色和字体不生效，及浏览器兼容性的问题。可以参考以下解决方案。
2024-01-19 18:41:59
1643
原创 Promise.all 的使用
Promise.all() 方法是 promise 并发方法之一。它可用于聚合多个 Promise 的结果。通常在有多个相关的异步任务并且整个代码依赖于这些任务成功完成时使用。
2023-12-19 17:22:56
1387
原创 el-tab 锚点监听 | 自定义滚动事件
el-tabs 自带的 el-tab-pane 无法进行滚动监听。需要隐藏 el-tab-pane ，并使用自定义样式替代-- el-tabs 插件 --> < div class = " na-wrap " > < el-tabs tab-position = " left " v-model = " userInfoType " @tab-click = " switchUserInfo " >
2023-05-08 13:19:39
1298
2
原创 Vue Admin Pro 环境搭建
Vue Admin Plus 最近无法安装依赖。查看资料，发现项目被作者投毒。其中chalk-next、chokidar-next、vue-plugin-rely 三个插件有删除项目文件的操作。
2023-03-17 15:03:16
1328
原创 echarts-extension-gmap 踩坑
echarts-extension-gmap 在 Google Map 图层上额外增加了一个 Canvas，Gmap 在非全屏状态使用，加载完成后，点击 Gmpa 右上角全屏按钮，绘制的坐标点和图表会被遮罩。Gmap 放大后触发重排重绘，但是没有对 Canvas 图层进行重绘。
2023-02-23 14:14:16
339
原创 H5 吸顶效果 | 页面滚动改变header透明度
监听页面滚动，超过设定阀值，改变position 属性（fixed| static）监听页面滚动，超过设定阀值改变透明度（切换class | 设置opcity）
2023-02-03 12:08:29
609
原创 postMessage 通信 | Iframe 通信
父级判断 Iframe 是否有效，且只有 Iframe 加载完毕后才能成功传递 message。
2023-01-30 13:21:23
1378
原创 element-ui-admin-typescript 项目搭建
npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install
2022-12-14 13:53:36
356
原创 webWorker 多线程 -- postMessage 通信
主线程中通过子线程文件，实例化一个。子线程在接受到数据后进行处理加工。主线程待处理数据通过。监听子线程返回的数据。
2022-10-22 16:39:06
1362
原创 Cookie 增、删、改、查
cookie 是前端常用的存储方式之一。常用于用户信息的保存，以及后端通信。传递验证信息给接口校验，项目使用频率比较高。以下是常用的封装方法。
2022-06-04 17:14:14
423
原创 前端浏览器事件-Browser
requestFullScreen 打开的全屏 才能用 exitFullscreen 关闭。手动（F11）打开的全屏只能手动（ESC）关闭。浏览器无法自启动以后立即触发 进入全屏。
2022-06-04 16:59:58
712
原创 Form表单 jQuery 文件上传
jq 文件上传文件上传使用 "multipart/form-data" 格式参数文件二进制流存放在 formData 实例中作为参数提交
2022-05-07 18:59:52
2008
原创 Indexeddb 创建、增删改查
虽然小伙伴平时项目用到的不多，但了解它并会使用还是很有必要。以下是本人总结 IndexedDB 的常规使用方式.2. 打开数据库3. 监听 IndexedDB 版本更新新建数据库时，新增数据表。更新数据库时，对数据表进行更新。效果图如下效果图如下效果图如下效果图如下效果图如下
2021-10-18 17:33:57
6564
原创 vue elementui 复杂表头 table
1. elementUI 实现复杂表格表头由多行多列组成，左侧和右侧部分列固定，中间部分为动态列最终效果图1.1 表格实现 HtML 内容<el-table :data="tableData" style="width: 100%" ref="tableRef" :header-cell-style="rowspanStyle" > <!-- left --> <el-table-column label="label-lef.
2021-10-02 16:48:56
10324
原创 小数精度丢失，前端 JS 运算
项目开发过程中，常会遇到浮点数加、减、乘、除运算丢失精度问题。以下是常规的解决方法思路：将小数化成整数后再作运算避免方法中出现小数相乘1. 加法转成整数相加Math.pow(10, ... ) 为整数，和除以 Math.pow(10, ... ) 不会出现小数/** * 加法运算，避免数据相加小数点后产生多位数和计算精度损失。 * @param num1 加数1 * @param num2 加数2 */function numAdd(num1, num2) { va..
2021-09-26 16:38:08
1409
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人