logoDreamk's Blog
记录一下封装的瀑布流组件 ``` <template> <div class="relative" ref="containerRef" :style="{ height: `${contentHeight}px` }"> <div class="item absolute top-0 left-0 transform" v-for="item, index in props.list" :key="index" :style="{ width: `${columnWidth}px` }" > <slot name
059
vue3
瀑布流
前端
封装代码： ``` export const useImgLazyLoad = () => { // v-lazy 指令 const vLazy = { // 元素加载完成时 mounted mounted: (el: HTMLImageElement) => { el.src = 'https://i.gifer.com/ZKZg.gif' // 加载占位符 el.addEventListener('error', () => { el.src = 'https://img.ixintu.com/download/jpg/202
053
vue3
图片懒加载
前端
#### 1. nginx启动 > start nginx > nginx （在当前窗口运行，关闭窗口后自动结束） #### 2. nginx的停止 > nginx -s stop（强制停止） > > nginx -s quit （处理完请求再停止） #### 3. nginx重新加载配置 > nginx -s reload #### 4. nginx检查配置是否正确 > nginx -t
1140
nginx
web服务器
### 解决TypeScript项目打包后路径别名失效问题 在TypeScript项目开发过程中，利用`tsconfig.json`中的`paths`配置别名可以极大地提升代码的可读性和维护性。然而，在项目打包并使用Node.js直接运行编译后的JavaScript代码时，这些路径别名往往无法被正确解析，导致“找不到模块”之类的错误。本文将针对这一常见问题，介绍几种有效的解决方案，确保你的项目从开发到部署都能平滑运行。 #### 问题背景 当你在TypeScript项目中定义了如下的`tsconfig.json`配置： ``` 1{ 2 "compilerOptions": { 3
0534
ts
paths
typescript
Day.js 设计为链式调用风格，每次调用dayjs的方法都会返回一个dayjs对象。 #### 1. 解析时间 1. 获取当前时间：dayjs() 2. 解析 [ISO 8601(opens new window)](https://en.wikipedia.org/wiki/ISO_8601)格式的字符串：dayjs('2018-04-04T16:00:00.000Z') 3. 解析毫秒级时间戳：dayjs(1318781876406) 4. 解析秒级时间戳：dayjs.unix(1318781876)，支持带小数点 5. 时间校验（不严格，只检查该事件能否被dayjs解析，不判断是否
0267
dayjs
时间处理
前端
起因是koa的很多参数校验的插件都好几年不更新了，然后Joi作为nodejs中非常流行的参数校验的插件，于是只需将Joi稍微进行封装即可优雅的进行参数校验 以下是`utils/context.js`中封装的校验函数 ```javascript const Joi = require('joi') function validate(params = {}, schema = {}) { const { error } = Joi.object(schema).validate(params, { abortEarly: false, allowUnknown: true
0395
koa
joi
后端
## 1.加载渲染过程 `父组件beforeCreate`->`父组件created`->`父组件beforeMount`->`子组件beforeCreate`->`子组件created`->`子组件beforeMount`->`子组件mounted`->`父组件mounted` ## 2.子组件更新过程 `父组件beforeUpdate`->`子组件beforeUpdate`->`子组件updated`->`父组件updated` ## 3.父组件更新过程 `父组件beforeUpdate`->`父组件updated` ## 4.销毁过程 `父组件beforeDestroy`->`子组件be
0367
vue生命周期
vue
## Windicss-基本用法及介绍 windicss，下一代工具类CSS框架，[Windicss官网]([Home | Windi CSS](https://cn.windicss.org/)) 简单的用法案例展示 ```javascript <div class="flex items-center justify-around bg-teal-100 rounded-md p-4px w-200px"> <div class="w-[25%] h-12 bg-red-400 rounded-md m-4px"></div> <div class="w-
1968
windicss
笔记
css
# MarkDown 语法 ## 标题 ``` # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ##### 六级标题 ``` ## 段落 #### 字体 *倾斜字体* = `*倾斜字体*` _倾斜字体_ = `_倾斜字体_` **粗体** = `**粗体**` __粗体__ = `__粗体__` ***粗加倾斜*** = `***粗加倾斜***` ___粗加倾斜___ = `___粗加倾斜___` #### 分割线 `___` ____ `***
0840
markdown
笔记
# Linux/Centos7搭建Steam饥荒服务器 ### 第一步 首先你要有一台云服务器，这边推荐去阿里云或腾讯云买一台，如果你是学生的话，可以享受特惠价格。 服务器需要提前设置好安全组：开放10999端口（主世界）和10998端口（地下），还要开放12000端口（显示延迟） ### 第二步 连接到服务器，推荐使用finalShell工具进行连接 1. 安装需要的环境 ``` sudo yum update sudo yum -y install glibc.i686 libstdc++.i686 lib
0737
饥荒
游戏服务器搭建

 / 2