跳至主要內容

Yuchen's Blog

——「」

pnpm patch 修补第三方依赖

pnpm patch 修补第三方依赖

我们开发过程中常常会遇到第三方依赖有 bug 的情况，这时我们可以使用 pnpm patch 来打补丁修复。

pnpm patch

比如，在使用 element plus 时，发现了一个 bug。首先我们需要知道正在使用的 element plus 版本，这里以 2.3.4 为例, 然后使用如下命令

pnpm patch element-plus@2.3.4
Yuchen大约 1 分钟NodeNodepnpm
IntersectionObserver

IntersectionObserver

IntersectionObserver 提供了一种异步监听目标元素是否出现在视口的方法，它可以用于判断元素是否可见，从而执行相应的操作。

基本用法

创建 IntersectionObserver 对象

要使用 IntersectionObserver，首先需要创建一个 IntersectionObserver 对象，然后使用该对象来监听目标元素。当目标元素出现在视口或者达到一定阈值时，会触发回调函数，从而执行相应的操作。

const observer = new IntersectionObserver(callback, options);
Yuchen大约 4 分钟JSJSVue
Nginx 配置

Nginx 配置

跨域

location 下添加如下配置

location / {
	#CORS 配置
	add_header 'Access-Control-Allow-Origin' '*';
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
	#是否允许cookie传输
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Headers'
		'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';

	#针对浏览器的options预请求直接返回200，否则会被403 forbidden--invalie CORS request
	if ( $request_method = 'OPTIONS' ) {
		return 200;
	}
}
Yuchen小于 1 分钟NginxNginx
取消 Promise

取消 Promise

fetch 和 axios 都支持使用AbortController的方式来取消请求。以 fetch 为例，想要取消请求，分为三步：

const url = "https://blog.yuchen.tech/";

// 1. 创建AbortController
const controller = new AbortController();
const signal = controller.signal;

// 2. 发送请求时传入AbortController的signal
fetch(url, { signal })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

// 3. 使用AbortController的abort方法来取消请求
controller.abort();
// Node 下输出
// DOMException [AbortError]: This operation was aborted
// 浏览器下输出
// DOMException: The user aborted a request.
Yuchen大约 2 分钟JSJSTSSnippets
蛇形布局

蛇形布局

实现的效果如下图所示

查看源码

使用 flex 完成 m*n 的布局

首先使用 flex 完成一个简单的 m*n 布局

<template>
  <div class="container">
    <div class="item" v-for="(item, index) in list" :key="index">
      step{{ index + 1 }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const list = ref(new Array(12).fill(""));
</script>

<style lang="scss" scoped>
$colNum: 4; // 列数
$rowDistance: 40px; // 行间距
$colDistance: 30px; // 列间距

.container {
  display: flex;
  flex-wrap: wrap;
  gap: $rowDistance $colDistance;

  .item {
    width: calc((100% - $colDistance * ($colNum - 1)) / $colNum);
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
  }
}
</style>
Yuchen大约 9 分钟VueVueSnippets
snippets

snippets

存放一些自用的代码片段，方便复制粘贴

Yuchen小于 1 分钟SnippetsSnippets