随笔分类 - 肆意奔跑的前端
摘要：用 <img> 来显示 svg 在 Chrome 下是没问题的，但在 Safari 下会出现显示模糊的问题，解决办法是用 <object> 来代替 <img> <object type="image/svg+xml" data="path/to/svg.svg" width="...px" heig
阅读全文
摘要：通过设置 response 的 Content-type 来解决 import type { IncomingMessage, ServerResponse } from 'http' (req: IncomingMessage, res: ServerResponse) => { // 省略 ..
阅读全文
摘要：发布到生产环境的工程常常是经过混淆且不提供 source map 文件的，这样当生产环境发生问题后很难地位问题。 以下的方法可以将本地的 source map 文件关联到线上的混淆文件，从而方便调试和问题定位。 本地工程 build 生成包含 SourceMap 的 dist 目录 使用 http-
阅读全文
摘要：当打开了一个监听 window.onbeforeunload 事件的页面后，如果不和页面发生交互而直接刷新页面，onbeforeunload 事件是不会被触发的。 以上问题在 Chrome 98 和 **Microsoft Edge（96.0.1054.62）**里能复现，其余版本未做测试。
阅读全文
摘要：通常设置 autocomplete="false" 并不能阻止 Chrome 中的自动填充，需要设置成 autocomplete="new-password" 才能达到目的。 参考资料 Preventing autofilling with autocomplete="new-password"
阅读全文
摘要：路由对应的页面需要一个根元素 —— 虽然 Vue3 支持多个根元素，但在 Nuxt3 里面，如果进入多根元素页面，再跳转去其他页面，会导致页面空白 对于写在 <template> 里的图片，最好自己封装一个 <Img> 组件，这样可以统一配置图片的根路径（比如 CDN），Nuxt3 目前没有对图片统
阅读全文
摘要：首先执行自身重写（@override）过的方法，然后依次执行是混入（mixin）、继承（extends）、实现（implements）的方法
阅读全文
摘要：一次在 Review Nuxt3 代码时发现 Vue runtime 报了一个 Hydration completed but contains mismatches. 的错误（目前不影响程序运行）。 经过排查，是因为开发在写 <table> 的时候没有写 <tbody>，直接写了 <tr>，类似下
阅读全文
摘要：<script lang="ts" setup> import {useSlots, VNode, Component} from 'vue' const slots = useSlots() if (slots && slots.default) { slots.default().forEach
阅读全文
摘要：假设你公司有一套自己的组件库，并发布成了 NPM 包放到线上。 某天，你正在基于该组件库开发一个业务需求，突然发现了组件库的一个 bug，这时候通常会开启下面的处理流程： 通知组件库的开发人员； 组件库开发人员修复 bug； 组件库开发人员更新组件库版本号，并发布到 NPM 上； 组件开发人员通知你
阅读全文
摘要：requestAnimationFrame 要求浏览器在下次重绘之前调用指定的回调函数，通常用于执行动画效果 requestIdleCallback 在浏览器空闲时期被调用，不会影响或延迟例如动画、输入响应这类关键事件，通常用于执行优先级不高但又费时的任务 从 requestIdleCallback
阅读全文
摘要：CSS 属性 grid-template-columns 有两个长得很像的值 —— auto-fill 和 auto-fit。 这两个值都有所谓的“自适应”的味道，但在指定列宽后，表现是有区别的，来看下面这组代码 <div class="grid-container grid-container--
阅读全文
摘要：CSS 的属性从继承的角度看，可以分为继承类型（Inherited properties）和非继承类型（Non-inherited properties），两个类型的属性初始值是不一样的，对于继承类型的属性来说，默认值是 inherit；非继承类型的属性的默认值则是 initial。 当我们在开发中
阅读全文
摘要：在开发中，我们写过很多种方法实现 footer 浮在底部的效果，最常用的应该就是 position: fixed 这个样式了。但这个写法有个不算弊端的弊端，就是需要在容器层空出一段 padding-bottom 来容纳滚到底部的时候“取消”浮层的效果。 这次我们来使用 fixed 的兄弟属性 sti
阅读全文
摘要：CSS 的 var() 函数不仅可以获得 :root 里定义的变量，还可以从自身或者父级的 style 里面获取变量，例如 <div style="--color: gray;"> <div style="--border: 10px;" class="example">看看我的边框</div> <
阅读全文
摘要：可以设置 text-underline-position: under 使下划线离开文字一段固定的距离，来达到更好的视觉效果；如果想对离开的距离进行更细节的控制，可以使用 text-underline-offset: 10px属性
阅读全文
摘要：如果你直接在 Windows 下执行 child_process.spawn('npm', ['start'])，程序会立即结束且返回 ENOENT 的错误，需要将 npm 改成 npm.cmd const { spawn } = require('child_process') spawn(pro
阅读全文
摘要：假设我们有个 Bar 类并创建了一个 bar 实例 function Bar() { this[2] = 2 this[3] = 1 this['b'] = 'b' this[1] = 1 this['a'] = 'a' } const bar = new Bar() // 打印属性 for (ke
阅读全文
摘要：JS 在 ES6 之前，只有全局作用域和函数作用域，因此在 if 和 while 之类里用 var 定义的变量是会提升到外面去的。 变量提升的过程中，函数的提升比变量的提升有更高优先级，也就是说同名下，会保留函数的定义，下面的代码输出的是 f hello() {} function hello()
阅读全文
摘要：实现一行截断我们都已经非常熟悉了，今天看到个实现两行截断的操作，赶紧记下来 <div class="two-line-ellipsis">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> .two-line-ellipsis
阅读全文
浙公网安备 33010602011771号