weixin_46022934的博客

首先需要解决 ==> 如何读取到剪贴板中的数据：大概有3种方法（这个可能要废弃了execCommand，最好做一下兼容性处理） 其他的方法自行百度，一大堆这些方法都适用于哪些场景；1. 读取文本，2. 浏览器安全性，3. 读到文件流如何获取文件流如恶化对文件流进行转化 （其实这里是可以进行功能拓展： 1.文件分片 2.文件流配置，3.续传（不建议））推送到什么位置成功以后拿到什么结果

系列文章目录背景如下一、Element-Plus 中Table表格的列合并（初版）1.效果图如下2. DOM结构 如下3.TypeScript代码如下二、Element-Plus 中Table表格的列合并（进阶版）1.效果图如下2. DOM结构 如下3. TypeScript代码如下二、Element-Plus 中Table表格的列合并（最终优化版）1. TypeScrip提示：直接拿去Element-Plus去测试代码。已经上线过的功能，希望可以帮助到你们 💪💪💪，一起加油。

处理10-100万的DOM元素渲染吐槽+思考1.吐槽 :2.方案 :(思考内容+实践方向)3.思考:(下面性能图分别对应的是那种方案)一、模拟原始的创建DOM的操作(10万-50万)1. 直接渲染大量DOM,代码如下HTML结构如下:JavaScript代码如下:2. 如下图: Chrome崩溃了(50万个div插入)二、

实现海浪进度条效果图如下(投入使用的版本)背景和过程一、调试和探索过程(下面都会给出来对应代码)二、类似Element-plus的进度条样式1. CSS的样式如下2. HTML结构如下二、电涌效果的进度条如下1. CSS的样式如下2. HTML的结构如下:3. JavaScript代码如下三、波浪效果的进度条1. CSS的结构如下:2. HTML的结构如下:四、海浪效果的进度条(等我空闲就上传代码!!!!)总结

敬请期待(2024-05-16 23:55)使用自定义指令和usehooks写法的功能出现;希望自己的写法可以帮助到遇到问题的人。有不足之处,或者可以优化的地方,欢迎大家给出自己的建议，会从大家的建议中汲取营养，提升自己!!!

瀑布流布局前言1. 背景2. 点⬇️🔗去体验效果如下图所示：一、初版waterfall布局和问题暴露？1.效果图如下：2.暴露问题如下图所示：第一张问题图：第二张问题图：3.HTML代码如下：4.JS代码如下：二、初版waterfall布局问题的排查和解决1.排查问题2.解决问题第一种解决方法：设置块级作用域（行不通）代码修改如下图所示：修改后如下图所示（依然有插入顺序问题）：第二种解决方法：改变每一列高度的获取方式（成功了）代码修改如下图所示：图1如下（water

图表支持区域拖动和拉伸前言背景（个人经历）简单例子的效果图如下（本次大致就是下面的功能）一、具体代码如下：1. HTML部分如下2. JS部分如下3. 具体效果图如下二、完善方法和时间可以达到如下效果如下图所示（会持续完善对应的功能，目前只是一个简单测试demo）总结

系列文章目录前言一、介绍下navigator.clipboard（新Api）二、使用方法如下（获取和读取）1.读取剪贴板内容API名称如下（promise类型）：使用方法如下：2.将文本写入剪贴板API名称如下（promise类型）：使用方法如下：三、错误汇总1.使用http会出现Api报错错误如下图解决方法如下图报错原因总结（猛男💪💪💪必看）7条总结如下

项目中配置eslint校验前言1. webpack5搭建 Vue项目如下🔗（可以查看）2. eslint+prettier Vue项目如下🔗（暂时未更新）一、什么是 ESLint？二、为什么要使用 ESLint？三、如何在 Vue 项目中集成 ESLint？3.1.安装依赖代码如下：如下图所示3.2.配置.eslintrc文件一键化配置例如下面的配置3.3 配置package.json文件四、结果如下图所示如下图所示五、问题汇总如下：5.1： --fix 都会修复哪些问

axios封装前言1.为什么封装Axios2.包括的功能一、Axios是什么？二、安装 Axios1. 安装axios （JavaScript版本）2. 安装axios （TypeScript版本）三、封装 Axios1.axios （JavaScript版本）2.axios （TypeScript版本）四、如何使用 Axios以及结果如下图1.代码如下：2.效果图：①、重复请求关闭②、缺少用户信息+错误处理③、请求超时+错误处理总结（整体流程）1. 封装流程2. 博客

Webpack5 搭建Vue项目（进阶版）前言一、进阶版本有哪些特点？二、主要的文件代码如下1.设置一个公共配置 webpack.common文件2.设置一个【dev】config文件3.设置一个【prod】config文件三、配置 package.json文件1.代码如下总结如下（一定要看）

第一步：准备工作1. 初始化项目2. 准备工作（安装依赖）依赖说明如下依赖code如下：依赖安装如下图：第二步：编写webpack.config.js1. 配置字段说明2. webpack.config.js完整配置如下（有解释说明）第三步：问题汇总1.打包文件名称问题（需要分片处理）2. 拼写问题3. 模版插件的使用问题等（这里就不一一列举了！！！）总结（进阶版 -- 待更新）希望对想了解配置过程的👨‍🎓（👩‍🎓）有帮助

系列文章目录一、楼层滚动效果图如下1. 下图是纯Css实现的楼层滚动2.通过Js优化后的楼层滚动如下图(🌹🌹)二、楼层滚动（Css实现）1.滚动原理2.代码如下三、楼层滚动（Js+Css优化后的楼层滚动）HTML、CSS代码如下JS代码如下总结（收工）

React路由前言一、安装 react-router-dom （V6版本以上）命令行执行如下命令二、配置路由1. import导入组件如下2.导入展示组件（已经要提前写好自己展示的组件）3.在render中的配置如下三、路由的两种跳转方式（1.函数跳转 2.标签跳转）1. Link标签和useNavigate的使用（通过一个组件举例子）2. Link 和 useNavigate 的属性具体信息如下👇🔗配置如下图总结（本文未完结，后续会继续更新）

一、router-view：1. 常规使用方法2. 非常规使用方法（插槽）3. 非常规使用方法（结合keep-alive）4. 命名路由👇🏻🔗（name字段）二、keep-alive：1. keep-alive解释如下：2. keep-alive用法如下（贼简单）：3. keep-alive对应的一些属性如下：一、keep-aliv中的 include 和 exclude①. include和exclude的含义②. 使用代码如下(exclude用法一致，含义不同)：二、kee

系列文章目录前言一、第一步：安装reduxjs/toolkit和react-redux1. 创建一个react项目2.执行下面的npm命令npm命令代码如下：检查依赖安装是否success二、第二步：创建仓库1.创建仓库的具体流程如下2.创建文件结构（可根据自己认识创建文件）3.创建一个Promise模拟network（mockUserInfoFetchData.js）代码如下(这里就不做code解释了)4.createSlice创建reducer并导出Action和reducer（

pinia-plugin-persist（ pinia持久化插件）持久化存储：一、为什么要进行数据持久化存储二、pinia-plugin-persist使用步骤如下1.引入库代码如下：安装结果如下图所示：2.在Pinia上注册pinia-plugin-persist插件代码如下如下图所示（操作解释）3.声明测试store（组合式Api）组合式声明Store文章（不会组合式Api的同学点👇🔗）代码如下：如下图所示（代码解释）：4.测试pinia数据持久化代码如下1.Vue3