- 博客(147)
- 收藏
- 关注
RSS订阅
转载 跨页面通信、如何监听 LocalStorage 的变化【storage 事件】
场景：当涉及到同时打开多个tab页，操作一个tab，希望其他的tab也会同时进行更新状态。原理就是前度的跨页面通信一、当 LocalStorage 变化时，会触发storage事件。在需要改变的页面增加时间监听：window.addEventListener('storage', function (e) { if (e.key === 'ctc-msg') { const data = JSON.parse(e.newValue); const text =
2022-04-02 16:44:00
4093
2
原创 git nrm 切换镜像
1.利用npm 下载nrm：sudo npm install -g nrm2.查看可切换的镜像源：nrm ls3.切换镜像源（如淘宝）：nrm use taobao4.直接使用npm 下载包： npm install **** 或 yarn
2022-01-10 20:49:32
1448
转载 CSS相关的学习网站、JavaScript相关的学习网站、其它学习网站【转 技术胖学程序】
一、CSS学习网站1. Flex Box 冒险游戏网址：Flex Box 冒险游戏 https://codingfantasy.com/games/flexboxadventure简介：这是一个通过使用 flex box 相关知识来完成闯关的冒险游戏，一共24个关卡，更生动地带你体验 Flex 的真实应用场景2. Flexbox 格子骑士网址：Flexbox 格子骑士 https://knightsoftheflexboxtable.com/简介：这个游戏能帮助你学习不同层面的Fle
2021-12-29 10:48:40
540
转载 转载 最全前端资源汇总
最全前端资源汇总一、概要这份汇总整理，很程度上参考了GitHub最全前端资源汇总；云集前端教程、开发资源、免费书籍、手册规范、求职面试等等，旨在为前端学习 & 技能提升提供方便。当然，并不期望这成为一个前端武学收藏夹；毕竟，只有自己掌握，才是真正拥有；况且前端发展如火如荼，日新月异。这里会尽量保持探索 & 学习 & 更新。欢迎大家推荐，反馈，谢谢！二、优秀的网站JS前端开发群月报 前端开源资源库 国内老牌技术社区：OSChina、博客园、CSDN、51...
2021-05-24 17:34:32
2298
原创 简简单单的一个上传文件、react、input file、利用事件获取本地文件
一、场景我需要点击一个按钮，来选取本地的文件；获取到文件的对象后，再去处理或者上传；二、思路1、利用 H5 input 的 file 属性来选取文件；2、但是我不要展示这个控件，所以需要用一个【dom节点：比如按钮】来模拟这个 input 的 click 点击事件； 这个 input 需要隐藏：dispaly:none;3、选取文件之后、监听 onchange 事件就可以获取到文件了；input - accept 类型参考：MDN - 常见 MIME 类型列表三、实现import
2021-05-18 16:05:57
6523
原创 flex布局
一、垂直结构 display: flex; flex-direction: column;二、自动补齐剩余空间左中右结构，左右固定宽度，中间自动补齐宽度；.omni-warpper{ display: flex;}.content-left{ width: 150rpx;}.content-center{ flex-grow: 1; // 设置 flex-grow}.content-right{ width: 55rpx;}...
2021-05-17 16:04:58
396
原创 五步迁移代码：从A仓库迁移到B仓库，携带提交记录。
前期调研参考：1、https://developer.aliyun.com/article/11236382、https://zhuanlan.zhihu.com/p/443302025一、old-project % git remote -v// origin git@gitlab.AAAAAA (fetch)// origin git@gitlab.AAAAAA (push)old-project % git remote add new_remote_name1 git@gitl
2024-05-27 09:35:44
167
原创 【CV】前端如何优化打包体积，webpack5配置。自闭环项目。
map类文件是用来获取代码之前的关联关系，项目报错可以在控制台及时看到错误点。imagemin 使用插件来优化/生成图像，所以你也需要安装它们。顾名思义，有损压缩在牺牲图片质量的基础上，压缩体积更小。webpack4 使用 happypack: 参考文档。如果打完包之后发现 dist 文件夹中生成了。默认值是 false。将生产环境时的值为置为。二选一，当然大部分人还是会选择无损压缩。这里以无损压缩为例 使用方式如下。这个插件有两种压缩方式。
2024-05-14 10:33:31
767
原创 【CV】Webpack5 配置跨域代理、WebSocket代理:ws
Webpack 一般的代理配置。项目中用到了 WebSocket、与服务端对接时，需要联调代理。
2024-05-14 10:33:17
268
原创 rel=“noopener noreferrer“ 是什么意思？
noopener：当链接的 target 属性设置为 “_blank” 时，它用于防止新打开的窗口能够访问原始页面的 window.opener 属性。这可以防止被打开的页面通过 window.opener 访问和操纵原始页面的数据和行为，从而提高安全性。noreferrer：与 noopener 一起使用时，它还可以防止被打开的页面发送 Referer 头部信息。综上所述，rel=“noopener noreferrer” 是一种最佳实践，用于在新窗口中打开链接时提高安全性和隐私性。
2024-05-14 10:32:48
678
原创 可拖动、连线的React画布组件有哪些？ 官网分别是什么？
react-dagre-d3：这是一个基于React和D3.js的可拖动、连线的图形编辑器组件。react-grid-layout：这是一个可拖动、可调整大小的网格布局组件，适用于创建自定义的可拖动画布和面板布局。react-flow（https://reactflow.dev/）：react-flow是一个功能强大的React库，用于创建可拖动和连线的流程图或图表。react-flow-renderer：这是一个基于React的可拖动、连线的流程图组件。官网：https://reactflow.dev/
2024-05-14 10:32:09
258
原创 关于富文本编辑器 ReactMarkdownV9.0 无法识别 --- 分割线问题
【代码】关于富文本编辑器 ReactMarkdownV9.0 无法识别 --- 分割线问题。
2024-05-14 10:31:49
103
原创 接口返回值是 {Symbol(ORIGIN_RESPONSE): {…}} 应该如何读取其中内容？
在上述示例中，我们假设接口返回值为response对象，其中包含Symbol(ORIGIN_RESPONSE)属性。我们使用Object.getOwnPropertySymbols()方法获取所有Symbol属性的键，然后通过获取的键访问Symbol(ORIGIN_RESPONSE)的内容。最后，我们可以按需访问内容的子属性。请注意，Object.getOwnPropertySymbols()方法返回的是一个数组，我们通过索引[0]来获取第一个Symbol属性的键。
2024-05-14 10:31:16
102
原创 在输入法为中文时，打出英文需要回车添加到textarea上，如何阻止在输入法唤起时回车 导致消息发送出去？
需要明确 keyCode=13 和 keyCode=229 的区别？因此，keyCode 13 是标准回车键的键码值，而 keyCode 229 可能表示当前正在输入法处理的字符。在处理键盘事件时，需要根据具体情况对这两个键码进行区分和处理。
2024-05-14 10:31:01
216
原创 textarea 获取焦点 去除白色阴影
如果你想去掉这个白色阴影边框，可以使用 CSS 的 outline 属性进行修改。可以将 outline 属性设置为 none，这样就可以移除 textarea 元素获取焦点时的白色阴影边框。在某些浏览器中，当 textarea 元素获取焦点时，会有一个默认的白色阴影边框。这是浏览器为了显示焦点而添加的样式。
2024-05-14 10:30:37
293
原创 如何实现聊天窗口输入，最新文本置于最下方？
使用 observer.observe() 方法将 dom 元素作为观察目标，并通过传递一个配置对象来指定需要观察的变化类型。其中，childList: true 表示监听子节点的添加或删除操作。创建一个 MutationObserver 对象，并将一个回调函数作为参数传递给构造函数。回调函数通过修改目标元素的 scrollTop 属性，将滚动条位置设置为滚动内容的高度，实现将对话框滚动到底部的效果。MutationObserver 接口提供了监视对 DOM 树所做更改的能力。
2024-05-14 10:30:12
180
原创 如何设置输入框输入值不是中文和空格
上述代码中，我们使用for循环遍历输入的值中的每一个字符，并使用charCodeAt()方法获取每个字符的ASCII码。然后，我们根据ASCII码表中不符合要求的字符的范围来排除掉这些字符，只保留符合条件的字符。最后，我们使用一个新的字符串变量newValue来保存符合条件的字符，并将其赋值给输入框的value属性。
2024-05-14 10:29:56
148
原创 进入网页后，怎么判断网页刷新了几次，或者路由切换了几次
在JavaScript中，可以使用 window.performance 对象来获取页面性能数据，其中包括页面加载次数和路由切换次数等信息。具体可以使用 performance.navigation 和 performance.timing 两个属性来获取这些信息。
2024-05-14 10:29:32
249
原创 mac 如何安装 nvm
如果想要在每次打开终端时自动加载 nvm，可以将以上命令添加到 shell 的初始化文件中（例如 ~/.bash_profile 或 ~/.zshrc）。这个命令会将 zsh 的自动补全插件添加到 ~/.zshrc 文件中，如果已经存在这个文件，可以手动编辑该文件并添加以上内容。brew reinstall nvm 后，提示 zsh: command not found: nvm 怎么办。这样就可以切换到 zsh 了，再次运行 nvm 命令即可。● 安装地址：https://brew.sh/
2024-05-14 10:28:17
1885
原创 本地开发跨域问题：has been blocked by CORS policy: The request client is not a secure context and the resourc
将第一项设置为 Disabled 即可。
2024-05-14 10:27:29
1328
原创 【Bug】elementui V2 无法渲染table表格，其他的组件均可正常显示。
找到一个类似的解决方案，在 webpack.config.js中加入配置，即可解决。目前猜测 应该是某个依赖隐性更新导致。通过翻查 github。但问题原因尚未找到。
2024-05-14 10:27:09
378
原创 github 主分支如何阻止直接提交，只允许其他分支合并
在 Github 上，可以通过保护主分支的设置来阻止直接提交，只允许其他分支合并。具体步骤如下：进入 Github 仓库的设置页面，点击 “Branches”（分支）选项卡。在 “Branch protection rules”（分支保护规则）部分，点击 “Add rule”（添加规则）按钮。在 “Branch name pattern”（分支名称模式）输入框中，输入主分支的名称（如 master）。在 “Require pull request reviews before merging”（要
2023-05-04 10:55:35
5815
1
原创 如何阻止 beforeunload 弹窗的弹出时机？
全局定义一个变量 window.isCloseHint。在执行下载任务时，先将。用于控制是否返回弹窗。
2023-01-19 11:04:25
2062
原创 Vue2 slot 内容展示为 undefind 解决办法。
要注意 vue 与 vue-template-compiler 版本一致，主要原因是 vue 中 renderSlot 方法 调整，在 v2.6.13 版本，renderSlot 第二个参数支持 函数类型，同时 vue-template-compiler 编译slot 返回一个函数，但是v2.6.12 版本，renderSlot 第二个参数只是VNode，同时 vue-template-compiler 编译slot 直接返回一个VNode。，或者更低版本即可。
2023-01-16 14:21:36
1058
原创 如何禁用elementUI2 tabs组件使用方向键切换。
添加事件 @keydown.native.capture.stop.prevent。elementUI 页面涉及到左右键切换，会有对应的操作。
2022-11-08 15:10:08
1202
转载 nginx 因POST请求体内容过大导致500，设置 client_max_body_size，client_body_buffer_size
设置 client_max_body_size 和 client_body_buffer_size。
2022-11-04 16:52:24
5270
原创 js-base64 的转码和解码
// js-base64官网： https://github.com/dankogai/js-base64用法import { Base64 } from 'js-base64';Base64.encode('你好') // 转码Base64.decode("text") // 解码
2022-08-31 15:48:58
585
原创 关解决windows报错 Use `--location=global` instead. 和 found 0 vulnerabilities
npm报错npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.found 0 vulnerabilities
2022-06-14 12:51:22
11200
原创 文字滚动左出右进，纯css操作
注意点一、使用 white-space: nowrap; 阻止文字换行；二、需要滚动的 标签必须要有width属性。三、keyfrom 初始值 需要从 100% 开始。这样才会有从右进入的效果。以下是 具体实现codehtml：<div className={style.banner_textscroll}> <div>滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字</div></div>css:/* 文字滚动 *
2022-05-10 15:33:01
2418
原创 为什么高德地图 Polygon 多边形 放大就消失了？
当我们需要同时渲染多个多边形时，尽量逐个渲染，而不是将所有的渲染路径统一放到数组中渲染。问题代码： 一次性渲染多个多边形const data = [ [...], [...] ...// 假设这里有很多子元素]const polygon = new AMap.Polygon({ path: data, fillColor: color, strokeOpacity: 0.8, fillOpacity: fillOpacity ? fillOpacity: 0
2022-05-07 15:52:15
671
原创 解决Vue报错：[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘: T
解决Vue报错：[Vue warn]: Error in nextTick: “NotFoundError: Failed toexecute ‘insertBefore’ on ‘Node’: The node before which the new nodeis to be inserted is not a child of this node.”一、问题产生原因因为是在template 包裹的最外层div 上使用了v-if、当不渲染时、不符合VUE语法。<template>.
2022-04-29 15:17:53
8609
1
原创 Mac 解决控制台报错 nvm is not compatible with the npm
输入npm config delete prefixnpm config set prefix $NVM_DIR/versions/node/v6.11.1
2022-04-26 22:52:11
510
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人