跳至主要內容
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
蛇形布局

蛇形布局

实现的效果如下图所示

查看源码

使用 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