随笔分类 - 肆意奔跑的前端
摘要：CSS content 如果直接输入中文会有概率出现乱码，一个解决方法是将中文转成 unicode 例如 “请选择” 转 unicode 码是 \u8bf7\u9009\u62e9，注意，写到 CSS 里面需要把 u 去掉，即 \8bf7\9009\62e9
阅读全文
摘要：const map = new Map([['a', 1],['b', 2]]) const first = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); const second = new Map([ [1, 'uno'], [2, 'd
阅读全文
摘要：假设有如下的多入口配置 module.exports = { pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的
阅读全文
摘要：当使用 window.location.replace 或 window.location.href 控制页面跳转的时候，会等当前宏任务走完再跳转。 也就是说，控制跳转代码后面的同步代码会执行，Promise 创建的微任务也会执行，但 setTimeout 创建的任务就不会执行了。
阅读全文
摘要：在 Webpack 4 之前提取内容到文件中用的是 extract-text-webpack-plugin 插件，但在 Webpack 4 以及现在最新的 Webpack 5 下面，已经换成了 mini-css-extract-plugin 插件来完成相关任务。 Vue CLI 的配置文件默认是 v
阅读全文
摘要：之前 Vue3 结合 Ant Designer 开发了个组件，最近说这个组件要用到 Vue2 的工程上，经过一番讨论决定采用 Web Component 作为中间方案。 假设原来的组件文件名是 todo.vue，我们要做的就是用 Vue3 的 defineCustomElement API 对它进行
阅读全文
摘要：0. 背景 之前用 Nuxt 3 写了公司的官网，包括了样式、字体图标、图片、视频等，其中样式和字体图标放在了 assets/styles 和 assets/fonts 目录下，而图片和视频则放在了 public/images 和 public/videos 目录下。 1. 起因 在不改变任何 nu
阅读全文
摘要：需要检查下你的跨域 Cookie 上有没有设置 SameSite = None，因为 以前 None 是默认值，但最近的浏览器版本将 Lax 作为默认值，以便对某些类型的跨站请求伪造 （CSRF） 攻击具有相当强的防御能力。 参考资料：SameSite cookies
阅读全文
摘要：当在 iframe 中使用 Clipboard API 是时候会报下面的错误 The Clipboard API has been blocked because of a permissions policy applied to the current document 导致问题的原因是 ifr
阅读全文
摘要：在 Chrome 下，给 <video> 设置了 autoplay，首先利用 js 暂停（pause）视频，然后切换资源（src），这时候将会自动播放新的视频。 同样的操作在 Safari 下，是不会自动播放新视频的，必须得手动点击播放，或者 js 执行播放操作（play）
阅读全文
摘要：template <template> <div id="g" @scroll="handleScroll"> <div :style="{ height: top + 'px' }"></div> <div class="item" v-for="item in list" :key="item"
阅读全文
摘要：###1、响应式系统 Vue 2 是基于 defineProperty 拦截具体某个属性，Vue 3 基于的 Proxy 才是真正的“代理”。 defineProperty 对不存在的属性无法拦截，所以 Vue 2 中所有数据必须要在 data 里声明。 ###2、自定义渲染器 Vue 2 所有模块
阅读全文
摘要：screen.height 屏幕高度 screen.availHeight 屏幕高度减去 Taskbar document.body.clientHeight 页面的“实际高度”（加上滚动条未显示内容） document.documentElement.clientHeight 浏览器视口高度 如果
阅读全文
摘要：从原来的 registry.npm.taobao.org 切换到了 https://registry.npmmirror.com，并且老的域名将在 2022 年 05 月 31 日零时起停止服务。 传送门：中国 NPM 镜像站
阅读全文
摘要：之前利用 JS 进行复制操作的方式大概有两种，分别是 window.clipboardData.setData 和 execCommand("Copy")，但现在这两种方式都存在一定的“问题”。 前者在比较新的浏览器（我这里是 Chrome 98）中，window.clipboardData 已经是
阅读全文
摘要：官方文档：micro-app 10、基座应用的样式影响到子应用 - 子应用样式不会影响基座样式 14、子应用请求接口报错 — 接口前缀要改成全路径 — 因此开发环境要固定项目 port iconfont 显示不出来 — 不能用 shadowDOM 模式
阅读全文
摘要：@images: "../img"; // Usage body { color: #444; background: url("@{images}/white-sand.png"); } 参考资料 Less.js Variables
阅读全文
摘要：资料：Introducing WebContainers: Run Node.js natively in your browser 目前 Web Container 感觉是 stackblitz 的“独门秘籍”，希望可以早日普及，给前端业务提供一个新的构思方向。
阅读全文
摘要：vue-router 的 history 模式是使用浏览器的 history state 来实现的，history state 是通过 History 对象来操作的。 popstate 事件是通过 window.addEventListener('popstate') 进行注册的。但触发条件需要满足
阅读全文
摘要：通过下面的方法可以读取 components 文件夹下的 vue 文件并放到 map 对象中 const context = require.context('./components/', false, /\.vue$/) const map = {} for (const key of cont
阅读全文
浙公网安备 33010602011771号