litCabbage的博客

原创 clickoutside在iframe中不生效最简单方案

点击iframe，会触发外部window的blur事件，因此可以实现点击iframe能够关闭浮层。

原创 node16使用webpack打包时不退出命令行

公司类elementui库项目，从node14升级到node16时，执行多个webpack命令，不能连续执行，表现就是执行完一个打包之后，卡在那里，原因就是单个webpack命令打包完成以后，未退出命令，可以在每个webpack的config文件中添加几行代码。 ...

原创 html常用类名

HTML中的class类名可以用于标识和样式化HTML元素，它们通常与CSS样式表一起使用，以应用特定的样式和布局。 "container"：通常用于包裹...

原创 mac命令行输出文案带颜色

x1b[1m：设置高亮度（通常为粗体）\x1b[0m：重置所有属性到默认。\x1b[4m：下划线。\x1b[5m：闪烁。

原创 export default与export同时使用如何导入

在request.js中既使用了export又使用了export default该如何在其它文件中引入呢。在index.js引入，使用逗号即可，不需要引入两次。

原创 mac vue-cli启用80端口

1、需要指定port为802、需要sudo npm run dev，才可以

原创 sourceTree远程分支更新慢

输入如下命令，然后再输入git密码即可更新git remote update origin -p

原创 vue还原数据

Object.assign(this.$data, this.$options.data())

原创 vue-cli使用ip访问本地服务

vue-cli启动的node服务，试用localhost或者127.0.0.1可以正常访问，但是如果想用本机ip访问的话，需要修改一个设置，hosthost: '0.0.0.0', //应设置为0.0.0.0，而不是localhost

原创 webpack3升级webpack4

为了优化包体积大小，想要将老项目的webpack3升级到webpack4，再升级到webpack5一、升级版本1、webpack ^3.1.0 => ^4.29.62、webpack-cli ^3.1.2 => ^3.3.03、webpack-dev-server ^2.11.3 => ^3.2.14、html-webpack-plugin ^2.30.1 => ^3.2.05、vue-loader ^13.3.0 => ^15.7.0 （不升级，会报找.

原创 vue项目中enter触发搜索

技术栈：vue + element-uiadmin项目中有搜索功能，想要做成点击enter键就能触发搜索。 created() { // 绑定enter事件 this.enterSearch(); }, /** * @menthod 给页面绑定enter事件 */ enterSearch() { document.addEventListener('keydown', this.s.

原创 webpack4版本升级webpack5

一、升级版本升级webpack版本 cnpm install webpack@latest -D 升级后版本^5.35.1升级webpack-cli版本 cnpm install webpack-cli@latest -D 升级后版本 ^4.6.0升级webpack-dev-server cnpm install webpack-dev-server@latest -D 升级后版本 ^3.11.2升级webpack-merge cnpm install webpack-merge@latest -

原创 mac杀掉端口进程

Mac杀掉端口进程分两步第一步：lsof -i :你的端口号例如，我的端口号是8091，那么命令行就是lsof -i :8891，查询到的结果如图第二步：kill -9 PID第一步查到的PID，使用kill -9 PID来关掉进程，例如我的是95167，命令行就是kill -9 95167...

原创 mouseup、mousedown与click事件

当一个元素具有点击事件时，在这个元素上同时触发mousedown与mouseup会触发这个元素的点击事件，但是对于类似高亮、标注等功能时，可能mouseup与click会有相同的事件，不希望同时触发，只需要触发一次即可，怎么解决呢？可以根据event的timeStamp来判断，mouseup和click的timeStamp相同，这个时候做一下判断处理即可var timeStamp = 0;document.addEventListener('mouseup', handle);el.addEvent

原创 腾讯TcPlayer listener函数监听

精选30+云产品，助力企业轻松上云！>>> 一、触发...

原创 css模拟实现placeholder

【推荐阅读】微服务还能火多久？>>> 可编辑的div...

原创 npm 命令

npm常用命令

原创 vscode代码格式化

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> ...

原创 js数组去重

Set数据的特性就是无重复数据数组去重①[...new Set(arr)]数组去重②function dedupe(array) { return Array.from(new Set(array));}dedupe([1, 1, 2, 3]) // [1, 2...

原创 移动端问题总结

移动端开发过程中碰到的问题，持续更新中...一、 穿透问题（滚动条丢失）在开发弹框组件，或者抽屉组件时，我们会碰到一个问题，就是要确保浮层下面的内容不能滚动，对于这个问题，有两种解决方案不需要滚动的组件这个方法是直接禁止滑动的默认事件，因此弹框和浮层下面的body都无法滚动 &...

原创 可能是最全的js对象克隆和数组克隆方法

引子：表单数据的克隆工作中我们需要用到对象或者数组的复制功能提交的form表单，需要进行处理，例如将表单中的数组变成','连接的字符串，这个时候我们直接对原表单直接处理是不妥当的那么问题来了，我该用什么方法去克隆这个含有数组的表单呢？深克隆和浅克隆的区别在解决上述问题之前，我们应...

原创 iTerm2快捷键

command + r: 清屏control + u: 清除当前行command + n: 新建窗口command + t：新建标签页command + d：垂直分屏command + shift + d：水平分屏command + ] 和command + [ 在最近使用的分屏直...

原创 node处理静态模板无法自动引入问题

本文是在参考张鑫旭大神的文章所写，对其进行了一些优化，在原文中只对入口文件 import/import-example.html做了监控，当footer.html发生改变时，最终文件并不会发生变化，此时需要对import/import-example.html进行保存操作，才会重新生成新的最...

原创 原生图片懒加载以及node起服务

谷歌高版本浏览器支持原生图片懒加载只需要加上一个loading="lazy"属性 <img src="./images/1.png" alt="" loading="lazy">必须给图片设置宽高，不然不会懒加载，浏览器无法计算出当前浏览器高度需要预加载多少张照片应该...

原创 node重命名文件名字

在看张大神的博客，看到谷歌高版本浏览器支持图片懒加载，然后从network可以看到加载的图片数量，为了做这个demo，需要准备几十张图片，为了方便观察，需要将图片重命名为1.png,2.png这样，记得在张大神那里有这样的node工具，因此又查找了下。特此记录重命名文件名字文件目录...

原创 vscode调试无法在path上找到运行时的node

无法再path上找到运行时的node（但是在终端里是有node的）确定好自己的电脑上是安装了node的，查看方法，在终端输入node -v，如果有返回版本号就说明你是有安装的。执行第二步 终端输入which node，会看到自己node安装的位置，此时到vscode找到launch.json文件。执行第三步 "configurations"这个对象里加上"runtimeEx...

原创 前端技术索引

记录前端项目索引前端下载 https://juejin.im/post/5c3c4b3551882524a5420119

原创 神策系统vue埋点

博客太冷清了，如果帮助到了你，可以评论、点赞让我看到哦！！！埋点要求监控页面pv/uv点击事件埋点id埋点id {团队|业务|角色}{组件|页面}{具体元素}_{动作}h5detailschedule_click ：h5 平台，detail代表页面，schedule代表操作的按钮，click是点击事件业务实现页面pv/uv是main.js里面用vue路由和神策提供的方法实现rou...

原创 vue v-html动态生成的html怎么加样式

1. v-html加样式在vue开发中碰到需要动态生成html，并且需要有样式，这时候发现像往常一样写样式的时候不起作用，网上搜了一下，发现通过 v-html 创建的 DOM 内容不受作用域内的样式影响，但是我们仍然可以通过深度作用选择器来为他们设置样式。<div class="content" v-html="agreement.content"></di...

原创 Mac谷歌(chrome)浏览器快捷键

1. 标签页和窗口快捷键 ⌘-N ...

原创 console的各种用法

计数、性能测试、谷歌浏览器console的各种用法总结console.count除了条件输出的场景，还有常见的场景是计数。 当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑，内置的console.count可以很地胜任这样的任务。function foo(){ //其他函数逻辑blah blah。。。 console.count('foo...

原创 +new Date()可以将日期转换为对应的时间戳

原创 window.requestAnimationFrame

requestAnimationFrame学习详细讲解requestAnimationFrame与其它几种web动画的实现原理转载自http://www.cnblogs.com/onepixel/p/7078617.html

原创 git命令大全

git命令大全

原创 安装的node、npm在终端里command not found

如果碰到这种问题时。 这个命令可以起作用

原创 pc的banner图居中显示

确保pc中banner图居中显示Git项目地址Git<div class="banner"> <img src="./banner33.jpg" alt=""></div>.banner { position: relative; height: 615px; width: 100%...

原创 对象不支持“startsWith”属性或方法

项目兼容性问题开发环境360浏览器 vue "^2.5.17" vue-cli3问题对象不支持“startsWith”属性或方法startsWith()方法用来判断当前字符串是否是以另外一个给定的子字符串“开头”的，根据判断结果返回 true 或 false。 查阅MDN，发现ie根本就不支持，因此使用ie内核的360浏览器必然也不支持解决方案这个是e...

原创 require和import

面试：你懂什么是分布式系统吗？Redis分布式锁都不会？>>> ...

原创 node学习准备工作1 --- nvm下载、终端环境iterm2配置

开发十年，就只剩下这套架构体系了！>>> ...

原创 mac命令行相关

cat /etc/shells 可以查看当前可使用的shell echo $SHELL 查看当前正在使用的shell chsh -s /bin/zsh 切换为zsh的shell，想要切换哪个，就把/bin/...，变成哪个 为了好看，可以安装iterm2终端，再加上oh my zsh，可以实现很好看的终端方案，可以参考我的博客安装https://my.oschina.net/u...