- 博客(99)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 vue_cli知识点个人总结--链接
vue_cli封装axiosvue_cli插槽slotvue_cli缓存webStoragevue_cli过滤器vue_cli自定义指令vue_cli路由传参vue_cli组件通信
2021-05-05 00:27:35
278
4
原创 JavaScript播放音频
本文介绍了四种JavaScript播放音频的方法：1）直接上传并播放MP3文件；2）将音频转为Base64格式播放；3）将音频转为Hex字符串播放；4）播放预置的十六进制音频文件（audio.js）。每种方法都包含完整HTML代码示例，通过文件选择器上传音频后，利用<audio>标签实现播放控制，展示了不同音频格式的处理和转换技术。代码涵盖了文件读取、格式转换和音频播放等核心功能，适用于Web端音频播放需求。
2025-08-05 15:52:49
184
原创 axios请求的取消
Axios请求取消功能可以通过CancelToken实现，主要步骤包括：创建CancelToken、配置请求使用token、调用cancel()方法取消请求。在Vue中可结合组件生命周期管理取消逻辑，如在beforeDestroy钩子中取消请求。示例展示了输入框频繁请求时自动取消前序请求的实现方式，通过保存cancelToken引用，在每次新请求前取消之前的请求，确保只保留最新请求。该方法能有效优化性能，避免不必要请求和潜在的内存泄漏问题。
2025-08-01 19:51:25
484
原创 Typora修改图片地址、删除未引用的图片
解决：需要在【文件》偏好设置》图像】进行修改，建议选择【复制到指定路径】，这样将xx.md文件和xx图片文件夹一起发送在其它电脑上时，图片可以正常加载。解决：此时可以原来的图片复制到新的图片路径文件夹，再去typora里将图片路径进行查找替换（ctrl + h）如果忘记了设置图片路径，又已经引入了很多图片，怎么将c盘的图片改到修改后的图片路径？Typora里未引用的图片不会自动删除，此时可以写一个python脚本运行删除，取名。Typora里的编写的图片路径默认是放在c盘的文件夹，怎么修改图片路径。
2025-04-18 02:55:15
580
原创 解决换行符警告
摘要： 解决Vue项目启动时大量换行符警告问题，可通过设置Git全局配置禁用自动换行转换。执行git config --global core.autocrlf false指令后重新克隆项目即可生效。该操作针对换行符格式问题，参考Git官方文档说明，修改后项目警告消失。注意该设置也可针对单个项目进行配置。
2025-03-12 18:02:08
218
原创 vue2+elementUi的两个el-date-picker日期组件进行联动
【代码】vue2+elementUi的两个el-date-picker日期组件进行联动。
2024-04-01 17:19:46
792
原创 vue实现代码编辑器,无坑使用CodeMirror
坑：本打算cv一下网上的，结果发现网上的博客教程都是错的，而且博客已经是几年前的了，我重新看了github上的，发现安装的命令都已经不一样了。我目前使用CodeMirror 5，最新版是CodeMirror 6了(更适合移动设备、更易于访问、设计更好并且维护更积极)官方地址官方文档地址√正确的安装npm install codemirror@5×错误的安装npm install codemirror。
2024-01-06 20:54:23
1357
3
原创 vue自定义指令实现按钮只允许点击一次
vue自定义指令实现按钮只允许点击一次这个例子中创建了一个名为 click-once 的自定义指令，通过 bind 钩子函数给元素绑定了一个点击事件，并且利用一个变量 clicked 控制了按钮只能点击一次的行为。在点击后会执行传入指令的方法，并在一定时间后（这里是 1 秒）重新允许点击。记得将代码中的 handleClick 方法替换成你想要执行的实际操作。// 在你的 Vue 文件中
2023-12-05 11:05:42
1639
原创 ResizeObserver观察元素宽度的变化
ResizeObserver 构造函数创建一个新的 ResizeObserver 对象，它可以用于监听 Element 内容盒或边框盒或者 SVGElement 边界尺寸的大小。
2023-11-20 16:39:27
289
原创 重组件的优化和页面渲染十万条数据
以下代码原理是使用requestAnimationFrame(callback) 方法。通过这张图来表示虚拟列表，红框代表你的手机，黑条代表一条条数据。优点：页面上只渲染出可视区域的内容，非常丝滑，无白屏现象。结果：这里为了录制gif不卡顿，只渲染50个重组件。结果：这里为了录制gif不卡顿，只渲染一万条。优点: 首屏渲染很快，后续的再依次加载。缺点: 快速滚动时，会出现短暂的白屏。子组件HeavyComp.vue。子组件HeavyCom.vue。的方式截取相应的数据就可以了。在Test02.vue。
2023-10-23 11:19:40
194
原创 AbortController中止请求通信[模糊搜索案例]
该示例应该渲染的结果是包含1234的模糊搜索，但是结果却是123和1234。问题：由于请求的响应的时间不同，所以快速改变输入框的值会导致界面渲染错误。如果之前的请求响应很快，在下一次请求之前就已经响应了呢，结果会渲染错吗？该案例的中止请求可以用于很多地方，比如取消上传/下载文件等。解决：如果之前的请求还没有响应成功，那么就中止之前的请求。解决之后的运行结果，可以看到之前的请求已经被取消了。答案是，当然不会，因为最后的请求结果会覆盖之前的结果。解决的代码： 很简单，打开注释掉的 3 行代码即可。
2023-10-17 15:06:57
408
原创 vue里el-form+el-table实现验证规则的写法
vue里el-form+el-table实现验证规则的写法，重点是因为使用el-form + el-table与单独使用el-form时数据不同，前者是对象+json数组，后者是对象，导致了el-form-item绑定prop时的写法不同
2023-09-04 17:04:11
937
原创 git提交代码报styleLint错误的3种解决方案
删 xxx项目 / .git / hooks 里面的pre-commit文件。这个文件提交git的时候会做一道检查，把删了就不检查了。在webstorm里commit代码时，设置取消勾选Run Git Hooks。在webstorm里取消Stylelint检查。
2023-07-20 11:06:12
1902
原创 el-table找出当前单元格与对应的上下列的值
如果当前name值与上一条数据的name值 或者 下一条数据的name值 不相等，就设置红色边框。结果，第4行没有边框是因为它对应的上一个单元格和下一个单元格的值都是一样的。以下是示例代码，对tableData数据的name字段进行处理。
2023-07-19 20:14:49
1589
原创 echarts里type为custom，自定义配置renderItem为柱状形状
echarts里type为custom，自定义配置renderItem为柱状形状echarts里type为custom，自定义配置renderItem为柱状形状echarts里type为custom，自定义配置renderItem为柱状形状主要功能：文本超过柱状形状就隐藏否则就显示，移入每一个柱状显示tooltip。<!DOCTYPE html><html lang=""><head> <title>ECharts Custom Rend
2023-06-14 17:42:24
2510
原创 JavaScript的json数组去重、删重
JavaScript两个json数组删重(使用map+filter)JavaScript一个json数组去重(使用filter)JavaScript一个json数组去重(使用reduce)JavaScript找出两个Json数组相同的属性和值(使用reduce)JavaScript对象变json数组
2023-04-25 17:20:59
2036
原创 vue中使用el-tooltip实现超出部分显示省略号且移入显示el-tooltip内容
vue中使用el-tooltip实现超出部分显示省略号且移入显示el-tooltip内容
2023-03-16 16:17:53
1670
2
原创 vue横向滚动条通过鼠标滚动控制
vue横向滚动条通过鼠标滚动控制vue横向滚动条通过鼠标滚动控制vue横向滚动条通过鼠标滚动控制<template> <ul class="scrollX"> <li v-for="(item, i) in 20">{{item}}</li> </ul></template><script>export default { name: "Test01", methods: { //
2022-05-19 14:47:06
2583
2
原创 JavaScript的常用工具方法大全【持续更新中...】
JavaScript的常用工具类大全【持续更新中...】JavaScript的常用工具类1(校验邮箱格式、校验手机格式、校验身份证号、截取字段长度、求和)JavaScript的常用工具类1(解决浮动运算、小数转成整数、检测数字是否越界、精确加减乘除法、四舍五入)JavaScript的常用工具类1(校验邮箱格式、校验手机格式、校验身份证号、截取字段长度、求和)//校验邮箱格式function checkEmail(email) { return RegExp(/^([a-zA-Z0-9]+[_|\_|
2022-05-11 10:18:05
497
原创 vue使用vant页面案例(左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签)
vue使用vant页面案例--左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签vue使用vant页面案例(左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签)vue使用vant页面案例(左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签)效果图左边下拉右边搜索下拉和文本组件的样式选中和删除标签<template> <div class="Video"> <van-nav-bar title="场站管理" fixed pla
2022-03-28 16:20:32
3610
2
原创 vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)
vue实现高德地图模糊搜索+筛选条件+定位+信息窗vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)先npm安装高德地图npm i @amap/amap-jsapi-loader --save<template> <div class="StationMap"> <van-nav-bar title="场站地图" fixed placeholder safe-area-inset-
2022-03-28 16:00:59
3822
5
原创 vue实现模糊搜索
vue实现模糊搜索案例<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div id="app"> <input type="text" v-model='search' />
2022-03-25 16:22:29
6885
vue_cli.zip
2021-05-06
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人