今天有领导找到我，说让看个奇怪问题。在发布公司内部文章的时候，预览的效果是好的，但发布完了就坏了。我一脸疑惑的接了这个问题，开始对比起它们的区别，那就是没区别。。。 本来呢，应该是具有一个 line-height:1.75 的效果，但一发布就挤到一起去了，如下图： 找原因 这里面有两个逻辑：发布和预览。 发布是后台直接生成的静态 HTML 预览是前端自己写的单独组件 所以这确实可能造成差异，看吧。完整的检查 html 树，它们结构都是一样的： 既然是 line-height 出了问题，那就从下自上一点一点看哪里出了…
玩儿过 Konami 游戏的朋友应该都知道 ↑↑↓↓←→←→BA，我们来搞一个小彩蛋在页面中，当在页面输入这段代码后，会有一个隐藏小功能。 没啥关键点，就是纯好玩 let konamiCode = []; const konamiSequence = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65]; document.addEventListener('keydown', (e) => { konamiCode.push(e.keyCode); if (k…
在绘制线条阴影的时候，一般来说有两种方案： 绘制完整的一张图片 绘制一个片段，然后重复渲染 我们今天讨论第二种。它更加高效，更适合大范围渲染。 考虑功能 看上去是一个整体，所以拼接时所有线条要可以完全连上 可以调整线条角度 可以调整线条间距 可以调整线条粗细和颜色 渲染思路 我们可以将线条分为三种状态： 横线 竖线 斜线 前两种，特殊处理即可，我们需要关注最后一种 斜线，我们只需要关注斜线的角度即可。从根本上说，横线 与 竖线 也是斜线的特殊角度而已，所以我们可以统一计算，遇到 0 || 90 的时候，将它们处理成…
现在新创建的项目基本上都安装的是 Dart Sass，直接 npm install sass 即可。比较早的项目中，有安装了 node-sass 的，但是在当前的 node 环境中，会出现各种问题。 安装版本报错 gyp verb find VS msvs_version not set from command line or npm config gyp verb find VS VCINSTALLDIR not set, not running in VS Command Prompt gyp verb fi…
在 vue3 中，我们想给 props 声明，有以下几种方式。 Option 方式 首先是 option 方式： export default defineCompoent({ props: { type: { type: String } } }) 这样是我们所熟知的，也是 vue2 和 vue3 通用的，在这里我们可以设置任意内容。 Composition 方式 在 vue3 中，因为提供了 setup 方式，所以有了其他方式： const props = defineProps({ type: { type:…
一个 input 框，可以有选中状态：focus-within，比如这样： 有些时候，我们希望一个 div 等其他只读元素也可以有这样的效果，鼠标点一下，可以这样选中。但是默认情况下，这个是办不到的。 首先，理解 :focus-within :focus-within 是一个 CSS 伪类，当元素或其子元素获得焦点时，会匹配该元素。 也就是说，让 div 获取到焦点就可以。 让 div 获得焦点 1、添加 tabindex 属性 这个非常简单，为 div 添加 tabindex 属性，使其能够获得焦点，然后通过 :…
有时在多次请求情况下，会出现请求和结果表现的不一样。这种情况大多是因为网络传输速度导致，因为请求并不是先进先出，如图效果： 我们希望的是这样： 此时需要抛弃掉前置请求，直接相应最新的一个。这时就用到 CancelToken 机制，当调用这个 token 的时候，系统会知道当前这个请求已经没用了，浏览器会取消继续请求，直接抛弃 // 以 axios 为例，本例中默认已经配置好 axios，直接使用 import axios from 'axios'; const CancelToken = axi…
在兼容旧版浏览器的路上，确实有好多细节的内容。今天在兼容 chrome80 的时候，发现界面中颜色突然没了，打开 F12 查看，发现 rgb 失效了。我心想，咋的，#RGBA 不能用，连 rgba(x,y,z,a) 也不能用了？头大。。。 然后突然发现，奇怪的是有一些 rgb 可以用，有一些 rgb 不能用。这就奇了怪了，才发现原来失效的是包含小数的颜色，如：rgba(205.5, 211.5, 211.5, 0.5) 于是乎，需要在打包的时候将它们转成相近的整数。这种简单的内容，直接在配置文件中些就好了，就不用插…
在用 nvm 管理多个 node 环境时确实方便，但有时在安装的时候会遇到这种情况： 出现这个问题大多是因为是 windows 原因（具体不明，git issue 中作者这么说的） 那么怎么办呢？ 手动安装 去这里下载一个对应版本的安装包： 下载地址 比如我要安装 12 版本，就找到对应的文件夹，然后下载 zip 格式的内容： 解压后，安装到 nvm 根目录下。 根目录可以通过命令：nvm root 来查看。 直接新建一个名为 v12.22.12 的文件夹，然后将 zip 中所有文件解压到这里。 此时再看 nvm …
最近评论
米優 发布于 4 个月前（05月07日）
test 发布于 2 年前（11月20日）
星星 发布于 2 年前（09月18日）
星星 发布于 2 年前（09月18日）
root 发布于 2 年前（09月05日）