- 博客(98)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 v-for 搭配 v-if 产生“failed to execute ‘insertbefore‘ on ‘node‘ parameter 1 is not of type ‘node‘“错误
Vue3 中单文件组件最好也用单个根节点包裹, 避免被其他组件遍历时, 因为组件内部存在多个根节点(以及根节点的 v-if)导致问题遍历时不要将 key 放到内部元素上, 就放在 template 上。
2024-09-12 19:15:57
252
原创 chrome 接口请求等待时间(installed 已停止)过长问题定位
消息通知有个接口, 最长有可能等 1 分钟再返回, 而浏览器对同一个域名的并发请求数限制为最多 6 个(针对 http1.1 而言), 导致开 6 个标签页后, 6 个并发请求基本全被这个接口占着了, 其他接口只能排队等某个标签页的这个接口请求完毕退出并发后才能请求, 因此速度变慢。推测是并发请求窗口数量的问题, 屏蔽部分一直 pending 的接口, 发现速度正常了, 搜到上面的参考文章, 看接口请求协议, 果然是 http1.1。测试反馈系统开 6 个标签页后, 反应变的很慢。
2024-07-26 15:43:04
778
原创 vxe-table table tooltip 超长无法显示完全 + 无法滚动问题
根据上一步的发现, 想办法给 tooltip element 加上 onmousewheel 和 stopPropagation , 在 api 中找到 cell-mouseleave 事件, 测试发现鼠标离开单元格进入单元格触发的 tooltip 中也会触发此事件, 因此监听此事件, 在此事件回调中, 选中 tooltip , 加上。如果 cell mouseleave 时, 能判断 tooltip 即将消失, 则可以在此时重置 tooltip 的 scrollTop;
2024-07-26 15:41:42
625
原创 浏览器控制台定位页面内存泄漏总结/GTM 埋点导致内存泄漏
发现展开层级中有个 ‘gtm’ 相关的 js 对象占内存最大, 点击定位源码, 发现它里面有个属性直接指向了一个大 element , 导致此 element 未销毁, 网络标签页中屏蔽掉 gtm 相关 js , 问题解决一部分, 确定定位到原因了, 之后搜到了一篇文章。本系统(vue2)有个功能是点击目录刷新右侧 router-view (先切换到空白页, 再 $router.replace 切回原页面), 所以页面操作就是点下目录刷新下, 这样刷新前后页面没变, 如果内存还飙升不降, 铁定有问题。
2024-07-26 15:33:59
749
原创 【SCSS】全局变量不生效问题； js 中使用 scss 变量问题(vue3 项目)
【代码】【SCSS】全局变量不生效问题；js 中使用 scss 变量问题(vue3 项目)
2024-07-26 15:29:05
363
原创 image-webpack-loader 和 imagemin-pngquant 等依赖报错导致项目无法运行
网上查了查, 它属于 image-webpack-loader , 而这个包我确实有在用(Vue.config.js 里用它来解析/压缩几种格式的图片), 再去看旧电脑上项目的 node_modules , 确实有这个包;照着报错信息一步步安装 imagemin-pngquant, 装完报错没有 pngquant-bin 包, 继续装它, 报错 libpng-dev 包导致前者安装出错, 而后者又说不是 windows 的包…安装卡在 Python 安装成功命令行, 按顶部链接操作。
2024-07-26 15:27:23
567
原创 css: 让下方元素遮住上方元素底部的 box-shadow
对比代码发现, 其他表格底部的分页 div 遮住了表格底部的 shadow , 对比两处代码, 找出分页 div 样式不同之处, 遮住 shadow 的分页 div 使用了 position: relative。表格底部有 shadow , UI 让去掉, 给了项目中其他正常表格示例。给下方元素加上 position: relative 解决。
2024-07-26 15:23:47
481
原创 乾坤: 微前端项目切换时样式闪动(从无样式变为正常样式需要等 css chunk 文件加载完成, 加载延时受网速影响)
项目 webpack 打包配置(以 Vue.config.js 为例), css 配置里, 设置 extract: false (不使用 ExtractTextPlugin)点击基座项目页面左侧目录, 进入微前端子项目页面, 会有短暂的样式未加载效果一闪而过, 造成页面闪烁或更严重的其他样式错位问题。
2024-07-26 15:22:42
361
原创 百度地图埋点动态插入到页面不生效, 定位发现是 document.write 缘故,不能异步引入该埋点 js
试了下放到各个位置, 都不行, 网上搜了下, 说是必须在 document.write 文档流还没关闭时引入, 所以不能异步引入 — 动态插入 script , 或者 async , defer 之类的。为提高页面加载速度, 根据地址的不同加载不同的 script (Vue 项目, 一份代码放到多个地址, 根据地址不同显示不同登录页), 结果引用的百度地图 api 失效。之前加上 script, 里面加上地址判断, 通过判断则用。加载百度地图埋点代码。
2024-07-26 15:20:55
191
原创 chrome 插件:content-script 部分逻辑在页面无法生效,可考虑插入 script 到页面上
插入代码到页面具体方法, 参考该插件, 单独弄一个可独立运行的 js 文件, 打包好, content-script 里使用 chrome.extension.getURL 获取此 js 的地址, 生成 script , 指定地址, 加载。原理不清楚, 可能 content-script 运行的环境跟 script 运行的环境不同导致的吧, 从控制台里打印的语句也能看出来, 控制台也分了层级, 默认当前页面, 底下还有各种插件的控制台。
2024-07-25 15:56:54
531
原创 定义对象变量时, 可以直接使用[variable]将变量作为对象 key
【代码】定义对象变量时, 可以直接使用[variable]将变量作为对象 key。
2024-07-25 15:53:45
288
原创 避免影响页面性能, 用 pagehide 代替 unload 和 beforeunload
某客户检测网站性能, 发现我们提供的埋点 js 有 unload , 影响性能/网站评分, 该检测网站给出了替换方案 pagehide , 并且之后搜到了张鑫旭大神的文章, 确定了修改方案。刚刚从本地文档复制到这儿发博客, 看了下文档, 居然说 deprecated , 那意思这个用不着了?
2024-07-25 15:52:41
195
原创 CSS布局:左侧一个固定元素, 右侧元素数量不定, 要求右侧元素数量多时直接另起一行, 左侧元素单独一行
当按钮有多个时, 一行放不下, 要求全选框独占一行, 按钮另起一行左对齐显示。要求当按钮只有两个时, 他们显示在同一行, 全选框左对齐, 操作按钮右对齐。列表项可选中, 选中后顶部出现操作栏, 包括全选框 + 操作按钮。
2024-07-25 15:46:45
347
原创 JS 实现逻辑同或异或
查到 JS 没有同或运算, 但有按位异或操作符号 ^ , 因为 A 和 B 都是 Boolean 型, 直接使用 A ^ B 得到 0 或 1 , 能满足我的"遍历过滤选项"需求, 所以此处可以用 ^ 符。符"这样的写法, 所以, 进一步转化条件为: (A && B) || (!第二个下拉框有一个包含全部选项的数组, 要求当’第一个下拉框值是 A’ 时, ‘第二个下拉框的选项是 B’, 否则, ‘第二个下拉框的选项从全部选项中过滤掉 B’(A ^ B) 来做为遍历过滤条件, 成功解决问题。
2024-07-25 12:26:24
234
原创 全局捕获异常
全局监听 css js 等 chunk 文件是否加载失败, 失败则提示用户刷新页面, 以此解决发版后部分用户点击页面无反应问题(用户请求的还是旧版的 chunk 文件)
2024-07-25 12:20:39
161
原创 在可编辑 div (contentEditable)末尾插入换行符(\n 或 \＜br\＞)无效的解决办法
提前给 div 末尾插入一个 <br> 就行了, 之后看自己情况要不要去掉。给可编辑 div 末尾插入换行符, 发现仍然未换行;
2024-07-25 12:17:32
373
原创 禁止浏览器自动填充密码到输入框
项目登录页需要加上"记住密码"功能, 取消勾选"记住密码"时, 要求输入框置空, 与浏览器自动填充冲突了。off 和 new-password 都不行, 找到文章。, 使用 readonly 方法实现。
2024-07-25 12:14:13
167
原创 转换网络文件 url 为 blob/File 对象
项目中现有的发送文件接口, 以及云信 web 端发送文件, 不支持发文件 url , 于是想办法把文件 url 转换为对象。复制 blob 和 File , 直接 .slice() 复制就行, 复制 File 后重命名 —给定一个网络文件 url , 下载文件到浏览器缓存, 完毕后转换其为 blob / File 对象。如果要加名字, 网上搜了下, 带上 name 转换成 File 文件就行了 —直接用 blob 文件上传, 服务器如果取文件名, 取到的就是 “blob”
2024-07-25 12:12:14
339
原创 HTML 跨平台使用同一套 emoji (twemoji) + 实现 emoji 选择
这个需要耐心, 这些个字符千奇百怪, 有的字符电脑系统不支持不能渲染出来, 有的字符后面需要接一个空格, 有的字符看上去只有一位但实际占了多位, 最多的还是由多种字符组合显示成一个表情的(字符人, 可加修饰字符: 性别, 发型, 职业, with another one …在网页版 whatsapp 上聊天, 一栏栏地点选表情, 发送, 复制下来, 此时接收到的内容已经是字符了, 把这些字符按顺序提取为数组;输入框接收选中表情, 加入到输入框中。输入框 div 相关事件。引入 twemoji。
2024-07-25 12:03:50
1019
原创 单行文本多行文本尾部追加元素样式问题
参照网页版 WhatsApp , 在文本后面加一个隐形的有宽度无高度 div , 来确保文本不和 float 的已读未读状态元素重叠。参照网页版 whatsapp 做聊天消息已读未读状态显示, 要求 — 单行文本显示在最右侧, 多行文本显示在文本底部。
2024-07-25 11:55:04
69
原创 iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
iframe 预览邮件 + 打印邮件 + 模拟滚动条
2024-07-25 11:52:08
1191
原创 多个页面 websocket 接收消息重复提醒问题
方案三还是不行, sessionStorage 同步其他标签页的数据, 需要一定时间, 而 websocket 连接更快, 有个需求是 websocket 导致 websocket onopen 检测当前标签页数组时, 只能检查到当前标签页。于是改为延时 5s 再去检测标签页数组, 如果检测到数组当前标签页是标签页数组最小时间戳, 则发送 websocket 消息踢掉其他端;网站登录成功后, 连接 websocket 接收消息, 网站可多标签页打开, 造成多个标签页都接受消息, 重复提醒。
2024-07-25 11:42:25
553
原创 定位客户网站 paypal 埋点代码与公司的埋点代码冲突问题, 过程记录
用户网站上已有 paypal 埋点, 加上公司的埋点后就不能显示 paypal 按钮(不显示或显示后消失)最终发现是聊天代码中的一句 Array.protoType.each 导致报错, 修改后就没问题了。
2024-07-22 16:19:53
132
原创 echarts 注意清除画布
遇到一个 BUG , 水平条形图, 当前时间段筛选后得到三组数据, 换一个时间段筛选后只剩一组数据, 此时图标显示错误, 仍然显示三组数据, 其他两组全部是 NaN , undefined 之类的;之后在 setOption 之前先 clear 一下就行了。
2024-07-22 16:11:13
450
原创 阻止 chrome “[保存并填写地址](chrome://settings/addresses)“ 导致输入框聚焦时出现候选项
另外, 放到 body 起始处无用的话, 可以放到表单起始处试试。
2024-07-22 14:28:50
528
原创 用“一个空格 + 一个  ；“正则替换两个空格, 避免全是  ； 无法显示换行效果
做翻译文章内容功能时, 调用翻译 api 翻译, 但 api 返回的结果会省略连续多个空格为 1 个, 于是想到, 把连续两个空格替换为 1 个空格和一个。
2024-07-22 14:27:54
79
原创 jquery 同步请求: $.when 和 $.deferred
需要保存云信聊天信息到自己的系统, 保存时后台会再确认一次接收消息客服是否还在线, 如果不在线则重新请求接口分配客服, 并转发该消息到新客服。
2024-07-22 14:25:07
220
原创 原生 js 模拟下拉弹框时, 实现弹框外空白处关闭弹框方案
表单中有些字段是多选字段, 之前代码使用输入框 + 浮层 div , 勾选浮层 div 中的选项后显示到输入框, 点击输入框 trigger() 浮层 div;现在产品要求改为点击空白处关闭浮层。给客户网站上加入埋点表单, js 中请求后端接口生成留言表单给客户网站访客填写。
2024-07-22 14:22:40
350
原创 记一次解决埋点代码的 jQuery 与客户网站版本冲突(noConflict 也无效, 与 jQuery-ui 有关)
文章目录背景解决过程:背景公司提供埋点代码给客户网站上埋点, 实现在线聊天/留言表单功能, 埋点代码中有 jQuery 代码, 客户网站也有 jQuery 代码, 客户说一埋上我们的代码控制台就报错控制台报错信息如下:jquery-ui.min.js:formatted:18 Uncaught TypeError: Cannot read properties of undefined (reading 'version')Uncaught TypeError: owl.owlCarousel i
2021-11-18 19:57:20
727
原创 第三方软件安装 Node 导致原有项目运行错误
第三方软件安装 Node 导致原有项目运行错误文章目录第三方软件安装 Node 导致原有项目运行错误背景环境解决过程背景安装一个软件时, 此软件自带 Node.js , 会安装它自带的 node , 安装后 node 版本升级导致现有项目运行不起来环境window10 x64原 node : 10.21.0第三方软件安装的 node : 14 (具体的忘了)解决过程系统 - 高级系统设置 - 环境变量 - 系统变量, 修改 Path , 将程序新加入的该软件安装的 node.js 路径移
2021-11-16 11:23:53
1315
原创 使用 width: 0 避免 flex: 1 元素宽度溢出
参考解决用flex布局时内容可能溢出的问题背景使用 flex 布局, 左右两边各一个元素, 中间 flex: 1, 中间结构为: 二行文字, 第一行不换行超长隐藏, 第二个最多支持换两行超长隐藏;结果设置文字不换行后, 中间元素溢出 flex: 1 范围解决上述参考文章, 有两种方案:中间元素 overflow: hidden但是这样会导致第二行文字不能"最多支持换两行";中间元素 width: 0成功解决...
2021-10-12 10:27:21
1246
原创 请求图片时, 图片默认打开方式是下载而不是预览
这与后端返回此文件时, http 响应头 Content-Disposition 属性有关;因为项目用的是七牛云存储的图片, 此时只需要在图片地址后面加上七牛的图片处理参数 ?imageView2/0 即可正常预览图片
2021-09-29 12:29:09
969
原创 踩坑：Notification 不显示
之前发现 Chrome (版本: 81) 浏览器不显示 Notification , 且 Notification.requestPermisson() 也没弹出请求框, 最后定位, 发现原因如下:http 链接, 不允许通知双显示屏 + 独立显示的调试窗口 + 调试窗口最大化第二点有点乱, 没总结出规律...
2021-09-29 12:28:34
2495
原创 pointer-events: none 属性让鼠标无法选中元素
如题, 在元素上设置此属性 pointer-events 可让鼠标穿透元素, 无法对元素做操作
2021-09-29 12:27:52
354
空空如也
急求！！C语言gotoxy函数实现时效果不理想求解
2015-06-27
TA创建的收藏夹 TA关注的收藏夹
TA关注的人