- 博客(86)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 前端文件下载的八种方法(解决pdf、图片在浏览器自动打开问题)
系列文章目录一、直接使用a标签下载文件(三种方法)第一种：下载.zip(压缩文件)第二种：下载.txt(文本文件)第三种：指定网络地址下载文件第四种：下载pdf文件（浏览器不自动打开）二、使用JavaScript(四种方法)第一种：绑定点击事件第二种：指定location的href地址第三种：使用form表单的下载文件第四种：使用saveAs(url)方法（谷歌、火狐等新浏览器不适用，只支持老的IE6、7、8）三、使用canvas进行图片下载(防止浏览器自动打开图片)代码片段如下所示
2021-11-18 22:41:42
31950
13
原创 前端实现复制文件，Ctrl + V进行文件的上传 （简单，易懂，快速，可自行拓展，线上已投入使用）
首先需要解决 ==> 如何读取到剪贴板中的数据：大概有3种方法（这个可能要废弃了execCommand，最好做一下兼容性处理） 其他的方法自行百度，一大堆这些方法都适用于哪些场景；1. 读取文本，2. 浏览器安全性，3. 读到文件流如何获取文件流如恶化对文件流进行转化 （其实这里是可以进行功能拓展： 1.文件分片 2.文件流配置，3.续传（不建议））推送到什么位置成功以后拿到什么结果
2024-10-26 10:40:57
498
原创 Element 的Table表格实现列合并（记得先排序、element-plus、列合并、线上已投入使用）
系列文章目录背景如下一、Element-Plus 中Table表格的列合并（初版）1.效果图如下2. DOM结构 如下3.TypeScript代码如下二、Element-Plus 中Table表格的列合并（进阶版）1.效果图如下2. DOM结构 如下3. TypeScript代码如下二、Element-Plus 中Table表格的列合并（最终优化版）1. TypeScrip提示：直接拿去Element-Plus去测试代码。已经上线过的功能，希望可以帮助到你们 💪💪💪，一起加油。
2024-10-26 09:44:40
1261
原创 前端大量数据渲染优化【例如：10-100万的DIV元素渲染】 (三种解决方法--待完善)
处理10-100万的DOM元素渲染吐槽+思考1.吐槽 :2.方案 :(思考内容+实践方向)3.思考:(下面性能图分别对应的是那种方案)一、模拟原始的创建DOM的操作(10万-50万)1. 直接渲染大量DOM,代码如下HTML结构如下:JavaScript代码如下:2. 如下图: Chrome崩溃了(50万个div插入)二、
2024-08-23 15:55:04
661
原创 前端实现 海浪(波浪)进度条效果(支持自定义长度；调节速度,2s缓冲结束)
实现海浪进度条效果图如下(投入使用的版本)背景和过程一、调试和探索过程(下面都会给出来对应代码)二、类似Element-plus的进度条样式1. CSS的样式如下2. HTML结构如下二、电涌效果的进度条如下1. CSS的样式如下2. HTML的结构如下:3. JavaScript代码如下三、波浪效果的进度条1. CSS的结构如下:2. HTML的结构如下:四、海浪效果的进度条(等我空闲就上传代码!!!!)总结
2024-06-27 18:38:53
1161
原创 Element组件 el-select设置滚动条+滚动加载(两种写法: 原生Js和自定义指令)
敬请期待(2024-05-16 23:55)使用自定义指令和usehooks写法的功能出现;希望自己的写法可以帮助到遇到问题的人。有不足之处,或者可以优化的地方,欢迎大家给出自己的建议，会从大家的建议中汲取营养，提升自己!!!
2024-05-16 23:39:45
3510
1
原创 瀑布流布局 （初版）
瀑布流布局前言1. 背景2. 点⬇️🔗去体验效果如下图所示：一、初版waterfall布局和问题暴露？1.效果图如下：2.暴露问题如下图所示：第一张问题图：第二张问题图：3.HTML代码如下：4.JS代码如下：二、初版waterfall布局问题的排查和解决1.排查问题2.解决问题第一种解决方法：设置块级作用域（行不通）代码修改如下图所示：修改后如下图所示（依然有插入顺序问题）：第二种解决方法：改变每一列高度的获取方式（成功了）代码修改如下图所示：图1如下（water
2024-01-25 20:20:02
1170
原创 Echarts图表添加蒙层 (拖拽、拉伸)
图表支持区域拖动和拉伸前言背景（个人经历）简单例子的效果图如下（本次大致就是下面的功能）一、具体代码如下：1. HTML部分如下2. JS部分如下3. 具体效果图如下二、完善方法和时间可以达到如下效果如下图所示（会持续完善对应的功能，目前只是一个简单测试demo）总结
2023-12-25 19:32:47
886
1
原创 navigator.clipboard 读取剪贴板和写入剪贴板
系列文章目录前言一、介绍下navigator.clipboard（新Api）二、使用方法如下（获取和读取）1.读取剪贴板内容API名称如下（promise类型）：使用方法如下：2.将文本写入剪贴板API名称如下（promise类型）：使用方法如下：三、错误汇总1.使用http会出现Api报错错误如下图解决方法如下图报错原因总结（猛男💪💪💪必看）7条总结如下
2023-10-13 16:20:46
2477
原创 eslint代码校验及修复(Vue项目快速上手)
项目中配置eslint校验前言1. webpack5搭建 Vue项目如下🔗（可以查看）2. eslint+prettier Vue项目如下🔗（暂时未更新）一、什么是 ESLint？二、为什么要使用 ESLint？三、如何在 Vue 项目中集成 ESLint？3.1.安装依赖代码如下：如下图所示3.2.配置.eslintrc文件一键化配置例如下面的配置3.3 配置package.json文件四、结果如下图所示如下图所示五、问题汇总如下：5.1： --fix 都会修复哪些问
2023-09-21 15:07:12
779
原创 axios封装（例如：请求头、token、超时、BaseUrl、请求错误、请求重复）
axios封装前言1.为什么封装Axios2.包括的功能一、Axios是什么？二、安装 Axios1. 安装axios （JavaScript版本）2. 安装axios （TypeScript版本）三、封装 Axios1.axios （JavaScript版本）2.axios （TypeScript版本）四、如何使用 Axios以及结果如下图1.代码如下：2.效果图：①、重复请求关闭②、缺少用户信息+错误处理③、请求超时+错误处理总结（整体流程）1. 封装流程2. 博客
2023-09-18 21:37:13
1229
原创 Webpack5 搭建Vue项目（进阶版）
Webpack5 搭建Vue项目（进阶版）前言一、进阶版本有哪些特点？二、主要的文件代码如下1.设置一个公共配置 webpack.common文件2.设置一个【dev】config文件3.设置一个【prod】config文件三、配置 package.json文件1.代码如下总结如下（一定要看）
2023-09-05 19:29:31
945
原创 Webpack5 搭建Vue（基础版）
第一步：准备工作1. 初始化项目2. 准备工作（安装依赖）依赖说明如下依赖code如下：依赖安装如下图：第二步：编写webpack.config.js1. 配置字段说明2. webpack.config.js完整配置如下（有解释说明）第三步：问题汇总1.打包文件名称问题（需要分片处理）2. 拼写问题3. 模版插件的使用问题等（这里就不一一列举了！！！）总结（进阶版 -- 待更新）希望对想了解配置过程的👨🎓（👩🎓）有帮助
2023-05-12 17:13:44
1485
原创 楼层滚动效果（超级简单,易懂）
系列文章目录一、楼层滚动效果图如下1. 下图是纯Css实现的楼层滚动2.通过Js优化后的楼层滚动如下图(🌹🌹)二、楼层滚动（Css实现）1.滚动原理2.代码如下三、楼层滚动（Js+Css优化后的楼层滚动）HTML、CSS代码如下JS代码如下总结（收工）
2023-04-26 16:58:34
1812
原创 创建路由React router（使用react-router dom V6版本）
React路由前言一、安装 react-router-dom （V6版本以上）命令行执行如下命令二、配置路由1. import导入组件如下2.导入展示组件（已经要提前写好自己展示的组件）3.在render中的配置如下三、路由的两种跳转方式（1.函数跳转 2.标签跳转）1. Link标签和useNavigate的使用（通过一个组件举例子）2. Link 和 useNavigate 的属性具体信息如下👇🔗配置如下图总结（本文未完结，后续会继续更新）
2023-04-25 15:32:52
1458
1
原创 keep-alive 和 router-view 的使用方法（Vue3）
一、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
2023-04-14 15:19:17
7721
6
原创 React中使用 react-toolkit和react-redux 创建redux仓库（一）
系列文章目录前言一、第一步：安装reduxjs/toolkit和react-redux1. 创建一个react项目2.执行下面的npm命令npm命令代码如下：检查依赖安装是否success二、第二步：创建仓库1.创建仓库的具体流程如下2.创建文件结构（可根据自己认识创建文件）3.创建一个Promise模拟network（mockUserInfoFetchData.js）代码如下(这里就不做code解释了)4.createSlice创建reducer并导出Action和reducer（
2023-04-03 15:04:29
1490
原创 Vue3 pinia持久化存储（组合式Api案例演示）
pinia-plugin-persist（ pinia持久化插件）持久化存储：一、为什么要进行数据持久化存储二、pinia-plugin-persist使用步骤如下1.引入库代码如下：安装结果如下图所示：2.在Pinia上注册pinia-plugin-persist插件代码如下如下图所示（操作解释）3.声明测试store（组合式Api）组合式声明Store文章（不会组合式Api的同学点👇🔗）代码如下：如下图所示（代码解释）：4.测试pinia数据持久化代码如下1.Vue3
2023-03-24 17:12:51
6807
1
原创 Vue3 pinia入门篇（一）
一、Pinia是什么1.状态管理工具（类比Vuex）2.Pinia的特点（部分会在下面的案例中展示）二、Pinia如何使用（贼简单🌹）1.引入库（控制台执行如下命令）2.注册Pinia代码如下解释说明（如下图）3.声明对应的仓库数据（提供选项式Api和组合式Api两种风格）一、创建仓库（选项式Api模式）代码如下所示如下图说明二、创建仓库（选项式Api模式，个人非常喜欢🌹）代码如下所示4.如何使用上面创建的仓库代码如下所示（Vue的template和Script）修改效果
2023-03-23 18:03:01
1839
原创 JS检测是否安装了某应用（移动端和PC端）
系列文章目录前言一、URl SchemeURL Scheme是什么URL Scheme可以做什么URL Scheme 的组成二、js检测本地应用app1.代码如下（有使用注释）2.具体如下图所示三、浏览器调用PC端本地应用（与App大致类似）1.代码如下所示2.问题说明总结1.移动端⚠️2.PC端⚠️
2023-03-17 14:58:12
4281
5
原创 react的严格模式 和 解决react useEffect执行两次
一、为什么useEffect执行两次1.React的严格模式（模版创建项目👇）2.React的严格模式（StrictMode包裹显渲染组件）3.React的严格模式作用作用1：识别不安全的生命周期作用2：关于使用过时字符串 ref API 的警告如下图作用3：关于使用废弃的 findDOMNode 方法的警告作用4：检测意外的副作用（useEffect副作用）1.React的工作阶段2.React严格模式的重复调用3.Tips作用5：检测过时的 context API二、解决us
2023-02-28 19:17:12
5129
1
原创 React hooks之useContext《类比Vue的Provide》（三）
系列文章目录前言1.Vue中的Provide和useContext（相同点）2..Vue中的Provide和useContext（不同点）一、useContext的用法（贼简单，自己看官网还容易看不懂）第一步：创建传值的组件结构（爷爷，父亲，孩子组件）1.说明如下：2.结构如下图：第二步：创建Context（一定要导出）代码如下第三步：书写传值姿势第四步：导入useContext（一定是函数组件）child组件代码如下说明如下图第五步：查看传值结果默认Text按钮修改成Pri
2023-02-22 15:42:15
1116
原创 webpack安装步骤（一）
一、Webpack是什么？Webpack官网解释解释内容如下图二、Webpack的安装步骤第一步：检查本机是否已经安装过Webpack（全局）1.操作如下2.结果如下图第二步：安装webpack（非全局）1.创建一个文件（vscode或者终端打开）2.执行项目初始化命令（不明白可以点🔗）执行命令如下（下面🔗有解释）具体如下图3.执行安装webpack命令命令如下成功如下图总结（必看必看⚠️⚠️）
2023-02-17 14:30:45
1519
原创 React hooks之useEffect《类比Vue来记忆》（二）
系列文章目录前言一、useEffect的三种形态1.useEffect不传第二个参数代码如下：效果图如下：2.useEffect第二个参数传 []代码如下：效果图如下：3.useEffect第二个参数传 [num]代码如下：效果图如下：初始值如下图：点击修改num按钮后结果如下图：点击修改state按钮（不会触发任何一个）：4.useEffect总结二、完整代码如下注意⚠️
2023-02-10 16:07:03
775
原创 React hooks之useState用法（一）
系列文章目录结构如下一、hooks是什么？useState可以能做什么二、如何使用useState（）第一步：创建【函数组件（无状态组件）】函数组件(Child)代码如下:第二步：引入useState代码如下第三步：声明状态数据代码如下tableColumns 的数据第四步：渲染并修改Table数据代码如下结果图如下：初始渲染图如下：点击按钮后的渲染图如下：三、代码解释如下图所示主体代码四、总结
2023-02-10 14:27:09
982
原创 Vue2或Vue3 echarts公共组件
前言一、为什么要封装Echarts（背景）如下图所示（会使用到很多的图表）：二、封装Echarts公共组件的步骤第一步：如何在Vue3中使用Echarts？ 点击👇🔗第二步：如何创建Echarts组件 第一步的🔗1.创建一个Echars组件（TypeScript）：代码如下（可以直接CV到组件里面）2.需要转化的数据格式如下这里的数据主要是mock（自行定夺使用）3.写一个对步骤二数据转化的公共方法代码如下代码说明，如下图所示4.写一个公共的方法（创建图标的Options）：
2023-02-08 15:42:23
3696
原创 Three.js 初阶基础篇（二）
一、最终的成果图如下所示：1.图1如下所示（添加了光源的效果）：2.图2如下所示（绘制了3个旋转的立方体）：如下图所示（模糊问题）解如下所示（解决模糊问题）二、创建一个透光立方体的步骤如下第一步：创建DOM，获取DOM，创建renderer渲染器代码如下所示第二步：创建摄像机，设置摄像机代码如下所示第三步：创建场景、几何图形和材质，设置网格代码如下所示第四步：设置渲染render代码如下所示第五步：创建的立方体，结果图如下所示第六步：给立方体添加灯光效果1.实现灯光效果，添加
2023-02-01 17:37:35
761
原创 Three.js 初阶入门篇（一）
系列文章目录学习背景一、什么是3D（直接看作品吧）？汽车作品欣赏鼠标可以随意转动角度打开机盖（交互效果）尾部3D链接🔗如下（链接打开会有一些慢）二、如何创建一个3d的旋转立方体1.准备Threejs库（创建js文件）2.如何创建旋转立方体，步骤如下第一步：引入three.js的类库第二步：创建【场景，相机，渲染器】PerspectiveCamera的用法解释如下：渲染器的解释如下：代码如下：第三步：创建立方体的【几何形状，面的样式，存贮的网格】解释网格的意义代码如下：
2023-01-31 17:59:52
3287
原创 IE、Chrome、Firefox浏览器隐藏滚动条（IE、火狐、谷歌浏览器）
一、背景和效果图如下：1.背景2.设置属性前效果图：2.设置后效果图：二、直接通过CSS修改样式，保存滑动功能1.全局设置滚动条如下（谷歌Chrome）Css代码如下效果图如下2.给某一个元素设置如下（谷歌Chrome）Css代码如下效果图如下三、这里其他浏览器的方法1.IE去除滚动条样式（IE10以上内核）2.火狐除滚动条样式（Gecko 内核）总结
2022-12-21 17:52:04
9201
10
原创 js实现图片的放大缩小（鼠标长按拖拽、鼠标滚轮控制放大缩小）
背景与效果图1.背景如下（功能图）：2.效果图如下：拖拽后的效果缩放的效果放大的效果一、功能：支持鼠标长按拖拽1.鼠标事件：2.拖拽功能流程3.拖拽部分代码如下二、功能：滚轮控制图片放大缩小1.鼠标事件(推荐使用onwheel；mousewheel存在安全隐患)2.功能流程：3.具体代码如下：三、案例功能的完整代码如下：四、总结(一定要看，功能是有坑的)
2022-12-20 17:30:40
14314
1
原创 canvas使用toDataURL() 报错（解决canvas污染 和 图片跨域问题）
解决Canvas中toDataURL()的跨域问题报错说明（如下👇👇）一、不可用toDataURL()的原因如下：1.安全性和`"被污染"`的Canvas2.不止 toDataURL() 会被🚫(canvas画布被污染)3.控制台错误如下图二、画布污染的解决方法第一步：前端配置1.设置img的属性 （crossorigin）说明如下2.代码使用如下(HTML设置和JS设置)3.设置后的效果图如下(设置完出现了如下图所示)第二步.后端配置(下方有资源🔗，基于Node写的一canv
2022-11-02 16:07:40
4453
7
原创 如何控制滚轮横向滑动(原生JS实现方法)
控制滚轮横向滑动解决思路如下`1.如何在页面中展示横向滚动条``2.如何获取鼠标的【滚动轮】``3.通过什么Api去实现滚动效果 `一、如何创建横向滚动条1.代码如下(HTML和CSS)2.效果如下图所示:二、鼠标滚动轮事件(mousewheel和wheel事件)1.wheel鼠标滚轮(完美支持所有浏览器)JS代码如下所示:`*&*需要注意的事项(wheel滚动方向)*&*`:2.mousewheel支持该鼠标事件的浏览器如下(生产环境不可使用,应该使用wheel)测试效果图如下
2022-10-22 18:51:09
8469
原创 Canvas - 绘制图片模糊问题（canvas 生成图片模糊）
Canvas绘制模糊零、问题背景与解决思路一、涉及到的Api1.关于window.devicePixelRatiocanvas出现模糊的原因第一块屏幕测试 window.devicePixelRatio 的值(微软系统)第二块屏幕测试 window.devicePixelRatio 的值(mac系统)2.关于Window.matchMedia()二、解决方法(canvas绘制图片模糊)1.图片代码如下（记得查看注释）2.canvas效果图（图片处理前）：3.canvas效果图，与原来的
2022-10-20 19:28:23
5077
原创 JS拖拽 和 Vue - draggable 两种方法实现拖拽功能（案例二）
表格拖拽(两种实现方法)前言一、原生的javascript实现拖拽效果1.创建一个table表格代码如下效果图如下：2.获取DOM结构(表格的结构)代码如下：3.拖拽逻辑(这里使用的事件冒泡)代码如下：效果图如下：1.拖拽前的样式，如下图：2.拖拽（序号1和序号2互换位置）二、vue-draggable实现拖拽(vue2和vue3都有版本）1.npm 安装 vue-draggable 插件(vue3)代码如下：如下图所示：2.vue-draggable的Api
2022-10-18 17:39:38
2498
原创 Js中六种拖拽(拉)事件（drag 和 drop）
拖拽事件（待更新）前言(各个浏览器的兼容性)1.兼容性如下图：一、相关的五个事件api如下：拖拽流程说明：1.dragstart事件2.dragenter事件3.dragover事件4.drop事件(必须要dragover事件触发)5.dragend事件MDN详细说明：链接如下如下图所示：二、相关的属性1.draggable(让元素可拖拽)draggable解释说明：使用代码如下：如下图所示：2.dataTransfer(对应的拖拽媒介)解释说明（通用方法）：
2022-10-17 21:15:31
10160
原创 案例一：javascript的拖拽事件(drag，drop)
一、拖拽效果如下步骤所示1.正常的排序如下：2.拖拽列表1与列表2互换位置常按的效果如下图：切换位置后的效果如下图：二、具体代码如下1.HTML部分代码块2.javascript部分代码块3.js代码说明：总结：下面的🔗是跳转到案例二（关于 表格的拖拽的效果）
2022-10-17 20:30:01
4570
原创 json-editor-vue3 (Json字段编辑器 )
一、安装插件(这里很正常)二、json-editor-vue3的使用步骤(这里遇到了问题)1.导入json-editor-vue3①:导入json-editor-vue3(问题出现)②:解决 (无法找到模块的问题)2.使用json-editor-vue3①步骤说明②编写代码如下③内容如下图所示:总结: json-editor-vue3的Api说明全局引入组件内引入模板使用常见参数对应的事件
2022-09-11 12:00:57
12940
6
原创 vue3 也有总线传值 (mitt使用闭坑指南)
vue3 总线传值零、发现mitt的契机一、总线传值作用是什么(vue中的传值方式)？二、Vue2中总线传值的使用三、Vue3中总线传值的使用1.通过npm 安装 mitt安装mitt:具体操作如下图所示:2.创建对应的文件创建mitt实例步骤:具体如下图内容所示:3.总线(mitt)的使用1.组件中的使用方法①`Childrenone` 代码如下:②`ChildrenTwo` 代码如下:③结果图如下所示四、一定要读这部分(避免踩坑),非常重要!!!!使用上面的总线出现的问
2022-09-10 12:58:11
1888
6
原创 前端本地文件上传预览 (拖拽，表格上传的三种方法)
零、补充1.文件预览&&文件拖拽2.表单数据上传（三种方法）一、如何实现上传文件？1.使用标签 input：2.效果图：二、获取到上传的文件info1.获取Dom节点代码如下：2.绑定事件代码如下：说明图如下：in show & 🔗...
2022-07-22 14:53:29
2791
2
波浪进度条（HTML）版本
2024-10-25
瀑布流布局（优化后的版本）
2024-01-25
Echarts添加蒙层(刷子)，功能: 可拉伸拖拽+触发事件
2023-12-25
JSON Diff(Vue2和Vue3组件封装).zip
2023-03-03
基于web的进销存管理系统(后台部分)
2022-04-10
进销存管理系统(vue+antd vue+node+sql)
2022-04-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人