12 2023 档案
摘要:1. 纯css极简版 resize: horizontal; 缺点: 只能在右下角很小的范围显示拉伸鼠标,且样式范围反斜线 2. 纯css美化版 //隐藏掉反斜线 .container::-webkit-resizer { background: transparent; } 3. 纯CSS复杂版
阅读全文
摘要:whistle功能还是很不错。 一切的哲学,基于 rules 拦截,values 取值。 rules 配置指定的url(支持通配符和正则)进行拦截,拦截后可进行,替换,跳转等操作 values 支持各种格式的文件 js,css,json等 whistle的易出问题点记录如下 1. whistle启动
阅读全文
摘要:chrome插件requestly异常强大,常用的调试要求都能实现 1. 修改request 2. 修改response 3. 修改header 4. Allow CORS 跨域 5. 替换 js 或 css 文件 6. 注入 js 或 css 文件 7. Mock Server 8. Api cl
阅读全文
摘要:const person1 = { "firstName": "John", "lastName": "Doe", "age": 35 }; const person2 = { "firstName": "John", "lastName": "Doe", "age": 35, }; const i
阅读全文
摘要:网页的文档完全使用黑白灰,即使文档写的很清晰,也会给人一种厌烦的感觉,让人没有意愿去读完。 适当加一些浅系配色,会给人一种层次分明,眼前一亮的感觉,激发人的读取欲望。 某些开源文档工具,可适当改进一下,提升文档层次。
阅读全文
摘要:debug命令可以调用并调试一个函数 在我们想要查找问题并进行详细调试的时候,一个简单的技巧就是先调用一下 debugger 命令。例如,假设我们有以下形式的函数: function fn() { /* 某些代码 */ } 可以在自己的控制台里这样操作: debugger; fn(1); 然后点击
阅读全文
摘要:1. 页面保活应用场景 列表页面跳转到详情页面,要保留列表页面分页后的页码,搜索到的数据,搜索键值,高亮状态,甚至是页面上其他表单的内容等。 2. 页面保活实现思路 2.1 不跳转 用抽屉或模态框编辑详情,不离开列表页,最佳 2.2 vue单页面 可以使用 <KeepAlive> 组件缓存页面。配合
阅读全文
摘要:border-image 支持 渐变,可实现虚线边框,斑马纹边框 border-image 支持在外部显示图像,不占空间,不影响布局,且不受overflow:hidden限制 border-image,box-shadow,outline 均支持 内填充,外填充,可以实现 遮罩(包括mask遮罩),
阅读全文
摘要:react页面中,使用js设置为visibility:hidden的元素,修改为visible后,querySelectAll获取子元素,无法获取到 目前定时器延迟300ms获取没问题,在原生html页面中可以获取到,是否于react有关?
阅读全文
摘要:枚举,多选,权限实际是一类问题 1. 枚举 对于状态值,一般不推荐过多的状态值全放在同一个集合内。原因是每一个枚举项都会占用二进制的一个位数。枚举类型中可枚举的范围一般是Int64的范围。但如果要进行或运算,需要用无符号的整形进行运算。也就是一般枚举最大可定义 0到1 << 30的,共32位枚举项。
阅读全文
摘要:1. 滚动条距离写法 window.pageYOffset (老版语法,兼容IE9) 推荐window.scrollX (新版语法,不兼容IE) 推荐document.documentElement.scrollTop (其他方法)document.body.scrollTop (其他方法) 直接用
阅读全文
摘要:1. 直线圆角,通过单个伪元素的border-radius产生弧形 <template> <div class="tab-list"> <div v-for="tab in tabs" :key="tab.id" class="tab-item" :class="activeTab tab.id ?
阅读全文
摘要:sroll-snap-type基本用法 scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ] 定义滚动捕捉类型 mandatory: mandatory是强制性的,一般就强制,效果符合
阅读全文
摘要:本以为dom事件不能触发react元素的事件,没想到可以触发。 以后,处理react项目问题,可以使用dom事件的方式来解决问题。 具体如下: menuItem.click() 触发了 react的 menuItem 的点击事件函数
阅读全文
摘要:两个要点 要点: 1. z-index为任意值,包括负值,可实现与isolation: isolate;一样效果,生产独立的层级上下文。 产生独立层级的目的是为了让绝对定位的伪元素显示在元素上方,但是在文字下方 如果仅仅将伪元素的z-index设置为-1,则伪元素会显示在元素下方,将不可见 2. 元
阅读全文
摘要:1. 图片显示在文字下方,背景上方 只需要在容器加上 .card { position: relative; isolation: isolate; } 详细可参考 [译]你需要知道的CSS属性isolation,原文 The CSS property you didn't know you nee
阅读全文
摘要:1. svg的transform和dom的不同,旋转中心不是默认自身,而是画布左上角 2. svg要以自身为中心旋转,可以使用rotate(angle [x y]), 比css的rotate(angel)多了x,y两个参数,x,y分别设置为svg图形的中心点坐标即可 3. 线性变换 translat
阅读全文
摘要:react组件的值修改,也可以使用dom断点来定位。 之前一直误区,认为react组件的修改,不能用dom断点来拦截,实际上在涉及到修改具体原生组件属性的时候,也可定位。 例如: react组件内部使用了input组件,react组件值变化导致input的value发生改变,使用dom断点就可定位。
阅读全文
摘要:1. windows机器开放热点,连接该热点 2. windows机器关闭所有防火墙(99%因为他) 3. windows机器关闭杀毒软件 4. ping 192或172的地址
阅读全文
摘要:let nums = ['12.00', '12.001', '12.100', '12.350', '12.45']; console.log('nums: ', nums); nums.forEach(t => { console.log('num: ', trimZero(t)) }) fun
阅读全文
摘要:使用iframe的页面通常会出现双滚动条,还有一些不希望出现滚动条的页面也出现了滚动条,这个时候希望隐藏滚动条。 一个直接的思路,是调整滚动容器的宽高和overflow,使得滚动条消失。但是往往是隐藏了滚动条,使得内容也被截断,不能达到效果。 换个思路,隐藏滚动条,只是让滚动条看不见,不是去除。 具
阅读全文
摘要:1. cross-fade() 半透明图片 cross-fade() 可以混合两个或多个图像,并按比例混合它们的不同部分。这个函数的语法如下: 兼容性:chrome和safari, firefox不支持 cross-fade(<image1> [, <image2>] [, <percentage>
阅读全文