前端-老K的垃圾堆

老K的垃圾堆

累计撰写 53 篇文章
累计创建 12 个标签
累计收到 8 条评论

目录CONTENT

以下是前端相关的文章

2024-07-29
完美的阴影效果——CSS滤镜话不多说，直接上代码 .img { filter: drop-shadow(0, 0, 20px, rgba(222, 222, 222, 0.5)) } 常规的 box-shadow盒阴影只能给对应的盒模型增加边框阴影，无法针对dom元素内容添加阴影效果，所以我们使用 filter滤镜属性，
- 2024-07-29
- 48
- 0
- 0
- 开发
2024-07-25
React动画小帮手——React Transition Group 官网 What is it 一个在React开发中辅助完成一定的dom动画的第三方库？（好像是官方的） Why to use it 简单易用：轻易实现dom元素动画。高度自定义动画：可高度自定义动画表现。准确把控动画状态：'entering' | 'entered' | 'exiting' |
- 2024-07-25
- 30
- 0
- 0
- 开发
2024-07-24
这样的表单不要太舒适——React Hook Form 官方地址 What is 'React Hook Form' 一个利用各类Hooks管理Form表单的状态的第三方库。 Why to use it 代码简洁：简单直观的使用方式，易于维护理解。快速设置校验交互：高效设置表单校验规则与交互UI。 TS兼容性：利用TypeScript可更轻易掌控表单对
- 2024-07-24
- 46
- 0
- 0
- 开发
2024-07-10
我的Axios封装参考 Axios是一个强大的http第三方包，相比于XMLHttpRequest和Fetch，更加多功能，更加舒适【至少我是这么觉得的=v=】以下是我对Axios的封装，希望我的方案可以帮助大家封装自己的http工具，如果有更好的点子，欢迎评价 /* eslint-disable @typescript
- 2024-07-10
- 52
- 0
- 1
- 开发
2024-06-16
Vite环境下的SVG文件使用常规情况下，我们使用svg文件需要借用 <img />标签，例子如下 <img src="test.svg" /> 而使用 <img />标签后，将无法利用CSS中的字体属性来修改svg的内容样式，例如颜色，文本大小等等，直接把svg写入.vue或.tsx文件中又会影响代码的美观和阅读性。方案
- 2024-06-16
- 49
- 0
- 0
- 开发
2024-06-11
页面Visible监听——Page Visibility API 页面Visible监听——Page Visibility API 背景当我们切换标签页时，被切换的页面会被浏览器性能优化处理，例如Interval计时器会优化为1秒执行一次，可能造成计时混乱，在网页游戏的应用中尝尝使用此API来暂停游戏进程。使用方法 document.addEventListe
- 2024-06-11
- 47
- 0
- 1
- 开发
2024-05-26
前端开发你一定要了解的——PostCSS 前端开发你一定要了解的——PostCSS PostCSS官网 What——什么是PostCSS 一个使用JavaScript转换CSS来实现我们所需要的改变的工具。 How——PostCSS如何工作的 Vite自身已支持PostCSS，仅需在vite.config.ts中配置，或根目录创建postc
- 2024-05-26
- 35
- 0
- 0
- 开发
2024-05-14
Vue+TS下的大文件分片在大文件上传场景中，由前端分片切割后，分别上传，防止受到服务器限制、网络影响等情况。示例页面分片 // 单片类型 interface iChunk { index: number hash: string chunk: string } const CHUNK_SIZE = 102
- 2024-05-14
- 27
- 0
- 0
- 开发
2024-05-08
每次一个小优化tip——Vite分包优化优化理由：项目打包后，rollup会将所有js相关的部分打包到一个.js文件中，当项目代码每次更新迭代，这个.js文件的指纹hash都将变化，浏览器会重新获取此文件来实现更新。但，实际我们有一部分代码，可能是node_module中的，可能是自研公共组件、逻辑的代码几乎不会有更新迭代，所以我们可以
- 2024-05-08
- 38
- 0
- 0
- 开发
2024-05-07
鼠标跟随的高亮边框示例页面源码 <script setup lang="ts"> import { onMounted } from 'vue' onMounted(() => { const box = document.getElementById('box') as HTMLElement cons
- 2024-05-07
- 40
- 0
- 0
- 开发

1
2
3
4