- 博客(121)
- 收藏
- 关注
RSS订阅原创 在 Vue 中实现点击普通按钮上传文件
在 handleFileUpload 方法中,我们首先检查选中的文件是否符合允许的文件类型。只有在文件类型和大小都满足要求的情况下,才会继续构建 FormData 对象并发送上传请求。在这个示例中,我们在组件的 data 中添加了两个属性: allowedFileTypes 和 maxFileSize。在组件的 methods 中添加一个方法,用于处理文件选择事件。在该方法中,获取选中的文件,并使用 FormData 对象构建上传数据。将该输入框隐藏起来,并添加一个普通的按钮用于触发文件选择。
2024-07-18 17:19:16
917
原创 各种数据类型的 Blob 对象以及使用场景
在 JavaScript 中,您可以使用 Blob 对象来生成各种数据类型的 Blob 对象。在 Web 页面上显示。
2024-07-17 16:30:43
229
原创 防抖与节流的使用场景与实现
与防抖不同的是,节流会保证一个函数在一定时间内只执行一次。防抖是一种常见的 JavaScript 技术,用于控制频繁触发的事件,例如窗口大小调整、鼠标移动、键盘输入等。节流的原理是立即触发，之后忽略用户操作，规定时间后才会再次触发（节流类似于英雄联盟里的英雄平A，一定是内点击多次只进行攻击一次）然后设置一个新的定时器,在 delay 毫秒后执行原始的 func 函数。返回一个新的函数,这个新函数会在事件触发时被调用。返回一个新的函数,这个新函数会在事件触发时被调用。在新函数内部,首先获取当前的时间戳。
2024-07-09 14:58:20
237
原创 浏览器优化的案例和最佳实践
优化方案:使用CSS硬件加速技术,如transform、opacity等,利用GPU加速页面渲染。持续关注页面性能并积极进行优化,可以为用户带来更优质的使用体验,提高网站或Web应用程序的竞争力。优化方案:定期进行性能优化,根据新的技术和需求不断改进页面体验。优化方案:合并CSS文件,使用CSS Sprites合并小图标,并对图片进行压缩,减少HTTP请求数量。优化方案:异步加载非关键的JavaScript代码,合理使用节流/防抖技术,减少不必要的DOM操作。同时,使用事件委托技术优化事件监听。
2024-06-24 17:24:03
653
原创 vue 中实现用户上传文件夹的功能
vue 中文件上传一般都是用 element 中的 upload 组件，upload 组件可以实现单个文件或者多个文件的上传，但是无法通过选择文件夹上传其中文件。// 这里配置上传路径，手动上传的话就置空。// 调用后台接口，上传文件，此处省略。// 文件添加到上传队列时的处理函数。// 创建 formdata 对象。// 所有文件上传完成时的处理函数。// 文件上传成功时的处理函数。// 文件上传失败时的处理函数。// 开始上传时的处理函数。// 获取上传的文件列表。// 上传图片的配置。
2024-06-20 15:43:02
1215
原创 js 实现将后端请求来的 Blob 数据保存到用户选择的任意目录
Window 接口的 showSaveFilePicker() 方法用于显示一个文件选择器，以允许用户保存一个文件。可以选择一个已有文件覆盖保存，也可以输入名字新建一个文件。这段代码显示文件保存对话框，允许用户选择保存文件的位置和名称。// 1: 从后端获取 Blob 数据，这里就直接模拟一个 Blob 数据。使用 showSaveFilePicker 让用户选择保存文件的位置。// 3: 创建一个可写流，并将 Blob 数据写入用户选择的文件中。将 Blob 数据写入用户选择的文件。
2024-06-17 14:50:44
795
原创 window.location.href 传递参数以及目标页面接收参数的方式
在 JavaScript 中，你可以通过修改 window.location.href 来传递参数到另一个页面。通常，这些参数会附加在 URL 的查询字符串部分。查询字符串以问号 (?) 开始，并且参数之间用与号 (&) 分隔。在目标页面，你可以使用 JavaScript 来解析 URL 中的查询字符串，并提取参数。这样，你就可以在目标页面中获取并使用传递的参数了。
2024-06-13 10:11:59
878
原创 前端项目部署在https服务上，项目中通过img标签访问http服务的图片（或访问其他http资源）时报错
使用Content Security Policy (CSP)设置允许加载HTTP资源（不推荐）：虽然这种方法可以解决问题，但它降低了页面的安全性，因此不推荐使用。当你的前端项目部署在HTTPS服务上时，浏览器默认会阻止从非加密的HTTP服务加载资源，这是出于安全考虑。这种情况被称为“混合内容”（Mixed Content），即在一个通过HTTPS提供的页面上加载通过HTTP提供的资源。使用服务器端代理：另一种解决方案是在你的服务器上设置一个代理，将所有HTTP资源请求通过你的服务器转发。
2024-05-30 16:13:17
640
原创 在 Vue 应用中下载.doc文档（或任何其他类型的文件）
在这个例子中，responseType: 'blob’是关键，因为它告诉Axios以Blob的形式接收响应体，这对于下载文件是必需的。然后，我们创建一个Blob对象，用它来创建一个临时的URL，并通过创建一个临时的。在Vue应用中下载.doc文档（或任何其他类型的文件）通常涉及到后端提供一个文件下载的接口，前端通过发送请求到这个接口来触发文件下载。后端应该设置适当的响应头，指示浏览器这是一个文件下载请求。// 创建一个URL对象并用于创建一个临时的a标签来模拟点击下载。// 完成后移除临时创建的链接。
2024-05-30 14:09:08
1010
原创 小程序强制更新
当小程序有新版本且客户端尝试自动下载更新时（同样无需开发者干预），如果因网络问题或其他原因导致下载失败，将会触发此回调函数。UpdateManager.applyUpdate()：在小程序新版本已经下载完成的情况下（即接收到 onUpdateReady 回调后），此方法用于强制小程序重启并启用新版本。在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.getUpdateManagerAPI 进行处理，该API会返回一个UpdateManager实例。
2024-05-16 11:41:09
192
原创 echarts 实现形状为圆柱形、三角形的柱状图表
PS：上面柱状图背景是添加了一个柱形图实现的。柱形图 bar 可以通过 backgroundStyle 来实现背景，象形柱图 pictorialBar 没有找到直接设置的方法，有知道可以下面留言。，是一种可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。外观上是一个圆柱形，实际上是由一个柱形图和两个象形柱图拼接而成。这个图实际上就是复习一下上面的象形柱图，也是利用。
2024-05-16 11:31:41
577
原创 echarts 环形图实现透明间隔，嵌套环形图片和图形
给环形图嵌套外边框和内边框图形的原理是手动再生成一个圆环。属性设置扇形区块的内外圆角半径，环形图边角会更加丝滑。属性设置扇区角度即可。
2024-05-15 14:35:11
602
原创 web 端 vite 配置 px 转 rem
在 .vue 文件中引入 rem.js 文件。下载插件 postcss-pxtorem。在 vite.config.ts 中配置。在浏览器控制台中查看是否转换成功。根据设计稿编写自适应脚本。
2023-10-18 16:00:12
609
原创 vite 使用本地 ip + localhost 访问服务
如果配置了 server.host 的值为 0.0.0.0，静态资源服务将以 localhost 和本地 Ip 进行启动，此时我们可以通过 localhost:port 或 127.0.0.1:port 或localIp:port 进行应用访问。在 vite.config.js 中，如果未配置 server.host，默认服务将以 localhost 进行启动，此时我们可以通过 localhost:port 或 127.0.0.1:port 进行应用访问。
2023-10-17 15:36:22
2900
原创 VS Code 代码跳转到定义（.js 和 .vue文件跳转）
在日常的开发工作中，我们经常需要跳转到方法或变量的定义处，以便更好地理解和修改代码。VS Code 是目前比较流行的开发工具，然而它默认情况下并不支持这个功能，我们需要手动建立相关文件之间的联系。通过以下两步建立文件之间的联系：首先下载一个Vue Peek插件，用于 Vue 快速查看组件定义以及组件跳转。"paths": {},baseUrl：设置项目的基础路径，即项目根目录。paths：设置模块名到文件夹的映射。这里我们使用了 @/* 作为模块名的前缀，并将其映射到 src/* 文件夹。
2023-09-25 10:07:36
3601
原创 vue2、vue3 自定义指令实现可移动模态框效果
在 drag.js 文件中使用 Vue.directive() 注册一个全局自定义指令。此效果通过 vue 指令方式实现任意元素可拖拽移动。
2023-08-27 11:54:37
804
5
原创 一些有趣的 js 功能函数
当你需要获取某年某月的最后一天getLastDate(new Date('2023-03-04')) // Fri Mar 31 2023 00:00:00 GMT+0800 (中国标准时间) getLastDate(new Date('2023-03-04')) . toLocaleDateString() // 2023/3/31。
2023-07-28 15:09:50
209
原创 vue 文件扩展名中 esm 、common 、global 以及 mini 、 dev 、prod 、runtime 的含义
直接用在 script 标签中的完整版本（同时包含编译器 compiler 和运行时 runtime），但是经过压缩丑化处理，取消了注释和警告，体积较小，适合在生产环境下使用。直接用在 script 标签中的完整版本（同时包含编译器 compiler 和运行时 runtime），可以看到源码，适用于开发环境。预编译调试时，支持通过原生 EcmaScript Module 导入访问（webpack2 及之后版本都使用这个）。全局变量版本（通过 Vue 全局变量访问）。vue 运行版的压缩版本，生产环境使用。
2023-07-27 16:17:36
1428
原创 vite中使用 vite- aliases 插件报错
vite-aliases 报错：Failed to resolve entry for package "vite-aliases". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "vite-aliases" package [plugin externalize-deps]
2023-06-14 14:28:48
1525
原创 Vue 前端代码多地部署（打包后配置动态IP）
vue 代码打包之后，需要在多个地方部署。打包完之后，在 dist 下有一个 config.json 文件，可以通过该文件来动态配置 ip 地址。打包完之后，在 dist 下有一个 config.js 文件，可以通过该文件来动态配置 ip 地址。在 public 根目录下新建一个 config.json 文件。在 public 根目录下新建一个 config.js 文件。在 index.html 中引入 config.js 文件。下面总结两种方式可以在打包之后动态修改 ip 地址。在需要的地方直接通过。
2023-05-15 14:28:28
2514
1
原创 vue 中安装插件实现 rem 适配以及 js 常用适配代码
amfe-flexible 可伸缩布局方案替代了原先的 lib-flexible 选用了当前众多浏览器兼容的 viewport。postcss-pxtorem 是 PostCSS 的插件，用于将像素单元生成 rem 单位。vue 项目实现页面自适应，可以安装插件实现。autoprefixer 浏览器前缀处理插件。
2023-03-09 17:22:08
1019
原创 vue 模拟 chatgpt 聊天效果：js 实现逐字显示、延时函数模拟对话
模拟 chatgpt 聊天功能，展示对话效果。其中比较有意义的技术点是：js 实现逐字显示、延时函数，同步遍历。chatgpt 聊天效果
2023-03-08 15:09:26
13808
4
原创 js 实现页面一段时间内没有操作，执行退出、默认动画等其他功能
实现这种功能只需要设置一个倒计时，当监听到 keydown、mousemove、mousewheel、click 等事件时，重置倒计时。若倒计时为 0 时，触发相应事件，执行制定操作即可。有时会有这种需求：当用户在指定之间内没有对页面进行任何操作，则执行默认的动画，或者退出系统。监听的事件可以根据实际需要进行修改。
2023-03-08 10:08:24
1092
原创 双击元素进入、退出全屏
如果一个元素 A 在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素 A 退出全屏模式之后，之前的元素仍然处于全屏状态。document.fullscreenElement：返回当前文档中正在以全屏模式显示的Element节点，如果没有使用全屏模式，则返回null。方法让当前文档退出全屏模式，它会让文档回退到上一个调用 Element.requestFullscreen() 方法进入全屏模式之前的状态。实现元素双击进入全屏以及退出全屏功能。判断当前是否是全屏模式，还可以使用类似。
2023-02-23 10:47:13
256
原创 清除 git 所有历史提交记录，使其为新库
选项，可创建1个干净的分支（无任何的提交历史，但是当前分支的内容一应俱全）。但严格意义上说，这样创建的分支还不是一个真正的分支，因为 HEAD 指向的引用中没有 commit 值，只有在进行一次提交后，它才算得上真正的分支。一般仓库默认的主分支为 master 分支，如果原来的主分支不是 master, 用实际的主分支名代替。基于以前的仓库重新开发，这样可保留以前的配置等文件，但是需要删除全部的历史记录、tag、分支等。删除原来的主分支 master。如果别人不能拉取代码，可以使用。测试提交历史是否清除。
2023-02-13 14:07:06
767
原创 解决 scss 中 calc 失效的问题
在 scss 中使用 calc 计算变量的时候，没有产生任何效果，在开发这工具中可以看到并没有解析这段代码。在 calc 中通过。
2023-02-06 16:43:22
1792
原创 video 元素自定义 controls 控件以及常用事件、方法
当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要只需要在 css 中设置相关属性把它隐藏掉即可。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
2022-12-13 16:05:48
10347
原创 解决 element-ui 表单清空的问题：先编辑后新增 resetFields() 无效
首先需要注意几个问题：1、页面有个新增和编辑共用的弹出框，在页面初始化后先点新增，后编辑，可以重置 form。2、先编辑，后新增使用 resetFields() 表单数据没有清空。1、当我们先新增再编辑，初始值是空的，调用 resetFields() 方法自然正常。2、当我们先编辑再新增，会对表单赋值，初始值就是我们赋的值，调用 resetFields() 方法，表单里还有之前赋的值，并不是我们希望得到的清空表单。在编辑时，弹出框中的表单我们先让他初始化结束再赋值，使用 $nextTick 执行赋值。代
2022-12-07 13:54:24
2619
1
原创 element-ui 中 el-tree 和 el-table 样式调整
使用 el-tree 和 el-table 时，往往需要根据项目整体环境做一些样式调整，记录一下常用样式。el-treeel-tablePS: $bottomContainerBackColor 是 scss 变量：
2022-12-05 11:29:11
3845
原创 el-tree 实现全部展开或折叠
关键点是通过 el-tree 的引用获取到所有节点，然后赋值每个节点的 expanded 属性即可控制整体的展开或合并。的打印结果，nodesMap 中包含了所有层级节点。
2022-12-01 15:38:03
3538
原创 流媒体直播播放协议：HLS、RTMP、HTTP-FLV
HLS 全称是 HTTP Live Streaming。这是 Apple 提出的直播流协议，是通过视频流切片成文件片段来直播的。目前，IOS 和 高版本 Android 都支持 HLS。HLS 主要的两块内容是 .m3u8 文件和 .ts 播放文件。其中 .m3u8 作为索引文件（确保包的顺序）接受服务器会将接受到的视频流进行缓存，然后缓存到一定程度后，会将这些视频流进行编码格式化，同时会生成一份 .m3u8 文件和其它很多的 .ts 文件。
2022-11-30 11:24:44
4037
1
原创 解决 element-ui 中的 upload 组件在 form 表单中校验时提示信息不会消失的问题
在 el-form-item 组件上加个 ref，在上传成功后的回调函数中调用 this.$refs.xxx.clearValidate() 清除验证信息。使用 element ui 时，一个表单中有上传组件 upload，然后写了校验规则，当不上传图片时，会提示请上传图片，当上传图片后，提示不会消失。
2022-09-26 16:19:30
1659
原创 yarn install 的时候报错：Host key verification failed.
网上查了一下原因是：“正在通过 SSH 协议进行连接，如ssh://克隆 URL 上的前缀所示。使用 SSH，每个主机都有一个密钥。客户端记住与特定地址相关联的主机密钥，如果主机密钥出现变化，则拒绝连接，这可以防止中间人攻击。
2022-08-25 14:09:36
746
原创 解决浏览器中 vue-devtools 不显示的问题
一种是 vue-devtools 的配置错误，我们需要进入到 vue-devtools 的详情页中，将“允许访问文件网址勾选起来”。vue 项目中浏览器右上角可以显示出插件，但是控制台却没有显示。第三种情况是项目使用了 externals 打包优化。...
2022-08-09 09:44:52
13467
原创 nvm 安装使用
nvm 安装使用nvm 简介安装nvmnvm 常用命令nvm 简介nvm 是一个 node 的版本管理工具，可以简单操作 node 版本的切换、安装、查看等，方便应对不同的项目（注意与 npm 的区别：npm是依赖包的管理工具）。安装nvm首先要卸载电脑上原先的 nodejs（最新版本现在不用卸载了，安装完成之后勾选由 nvm 管理已存在的 nodejs 即可）下载 nvm 安装包（此处默认 Windows 安装）下载链接：https://github.com/coreybutler/
2022-08-02 22:48:25
194
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人