- 博客(37)
- 收藏
- 关注
RSS订阅
原创 js 防抖函数
文章目录防抖原理一、代码示例1、html页面2、直观代码3、封装防抖函数总结防抖原理示例：input元素，有一个keyup事件，用户不断敲击键盘输入，一定是触发n秒后才执行事件，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n秒后才执行，总之，就是要等你触发完事件n秒内不再触发事件。一、代码示例1、html页面<!DOCTYPE html><html lang="en"> <head> <meta charse
2021-04-04 22:50:02
417
2
原创 error Component name “home“ should always be multi-word vue/multi-word-component-names
我们接手的项目，或网上下载的开源项目，避免不了eslint的严格限制。对象添加：“no-unused-components”: “off”重新启动项目即可清空。
2024-02-23 10:19:39
445
1
原创 简单粗暴！van-dialog校验表单时控制关闭
在做H5页面时，使用了vanUI组件库，有个需求，在弹框中使用了表单，点击。按钮，需要对表单信息做校验，可是~，一旦点击了。按钮，弹框就自动关闭了，这不是我们想要的结果。根据vanUI官网介绍：有一个关闭前的回调函数。
2023-12-07 15:09:22
667
1
原创 this.$refs,salesRankRefjj.searchRankCall is not a function
当 ref 和 v-for 一起使用的时候，用this.$refs[xxx][0] 获取子组件身上的值。，有多个子组件，获取到的是一个数组形式的refs，获取不到子组件的方法，为什么？在vue项目中，在父组件使用。在子组件代码也存在该方法。经过分析，发现代码使用了。
2023-11-27 16:06:49
487
原创 如何解决image-conversion插件压缩图片后背景变成黑色
案例：随便选择一张透明图片，发现，压缩后，背景变成黑色。ps：图片的高宽，暂时随便设置的，导致图片变形了，不用理会。可以看到不指定类型的话默认是使用image/jpeg格式转的，但是jpeg格式不能没有底色， 所以默认会填充黑色。格式后， 那么cavans转base646就是按照png格式转，但png格式不管怎么转，设置了这个确实不会出现黑底的情况了， 但是压缩效果又没了， 原因就是我们设置了。如果选择的图片背景图是透明的，压缩后的图片，背景竟然变成了黑色！对用户上传的图片，压缩后再上传到服务器。
2023-09-12 17:16:27
587
1
原创 vue与vue-template-compiler版本不匹配
当你在 dependencies 或 devDependencies 部分指定一个依赖包时，可以使用。项目在本地，启动，打包都成功。符号是用于指定依赖包的版本范围的一种语义化版本规范。但它将不会允许安装主要版本号发生变化的版本，例如。符号来指定一个兼容的版本范围。，明显实际引入的版本，是不对的呀。符号表示可以接受该版本的。
2023-09-04 11:28:55
683
转载 前端如何通过项目复盘来加速个人成长
复盘本是围棋术语，意指对弈者在下完一盘棋后，把对弈过程重新摆一遍，寻找改进点。说白了，复盘就是从经验中学习。做得不好的地方，避免下次再犯。做得好的地方，争取下次能做得更好。ps：建议在做完项目的一周内做复盘。这时，对项目的感触是最新鲜的~
2023-08-29 09:29:38
105
原创 季度组件，基于element-ui封装
项目中有时候需要使用季度组件，遗憾的是，element-ui竟然没有。因此基于element-ui，自己封装了一个季度组件，可以直接复制使用。
2023-08-25 17:00:03
84
原创 [vite] Internal server error: Failed to parse source for import analysis because the content contain
在搭建vue3项目环境时，启动项目，出现的报错，记录一下。
2023-08-16 15:57:31
1364
原创 vue 深度选择器 /deep/ ＞＞＞ ::v-deep
平时开发项目我们在使用第三方插件时，必须使用element-ui、van-ui等的某些组件需要修改样式时，老是需要加上/deep/深度选择器，以前只是知道这样用，但是还不清楚他的原理。还有平时每个组件的样式都会加上scoped，但是也不知道他具体的原理。
2023-08-02 15:29:20
313
原创 移动端的rem和动态的font-size配置
100px / html的font-size = 100 / 50 = 2，即 width = 2 rem。rem(倍数） = 设计稿宽度( imgWidth ) / 你设置的font-size( defalutSize )rem(倍数） = 网页的实际宽度(screenWidth) / 你需要动态设置的font-size( x )假设设计图是375的，页面上一个元素的宽是100px，那么我们得转换成rem。1、不同的屏幕，设置html不同的font-size。在代码中输入，会直接弹出选项，选择即可。
2023-07-21 16:00:28
155
原创 前端基础建设
创建request.js文件]})},error => {Message({})})})} else {return res},error => {Message({})[业务对应的api文件]})[在vue页面中的使用]先引入再运行})[getters.js文件]
2023-07-19 16:44:55
107
原创 浅解Promise源码
promise是一种异步编程的解决方案，用于处理多层回调嵌套的问题。promise是一个对象，从它可以获取异步操作的消息，能够解决回调地狱的问题。目前promise已经是es6的内置对象。
2023-04-14 10:41:36
90
原创 深拷贝常见方式
structuredClone 方法是浏览器原生支持的，对于 Function 类型会报错。缺点：兼容性问题，无法拷贝proxy类型的对象，所以在。structuredClone 是Web最新的 API，存在兼容问题。
2023-04-11 10:04:06
160
原创 Refused to execute script from ‘http://localhost:3000/js/base.js‘ because its MIME type (‘text/html‘
原因：public 目录本来就是静态目录来的，打包的时候默认会把public的东西都复制到dist/public中。执行命令 npm install "copy-webpack-plugin": "^5.1.1"写完整的路径，/public/js/base.js。再次执行 npm run dev，启动项目试试。并在webpack.config.js文件配置。
2023-04-07 15:27:17
1063
原创 error in js/[name].[contenthash:8].jsCannot use [chunkhash] or [contenthash] for chunk in ‘js/[n
将production改成development。
2023-04-04 11:31:15
408
原创 查看webpack命令
使用 npm info ··，可以查看其他工具，如 npm info vue。npx，安装node时，自动创建的。查看webpack最新版本。
2023-04-03 09:57:16
130
原创 because properties starting with “$“ or “_“ are not proxied in the Vue
被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。在data定义了_initData，出现报错。以 _ 或 $ 开头的 property。
2023-03-20 14:44:32
575
原创 在vue项目引入天地图，根据经纬度获取具体地址
1、申请key天地图地图服务对所有用户开放。使用本组服务之前，需要申请Key2、引入API地图API是由JavaScript语言编写的，您在使用之前需要通过<script>标签将API引用到页面中：<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>在vue项目中，我们在public文件夹的index.html中引
2022-05-23 14:40:21
2042
2
原创 Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 12.x
出现上述问题原因：node版本与node-sass版本不匹配导致，由于我对node版本升级，原来的node-sass版本过低。1、查看当前的node版本2、查看项目的package.json文件中，指定的node-sass版本3、查看node与node-sass版本对应关系，地址4、解决在项目目录下，分别执行一下两个命令：npm rebuild node-sass再执行npm update5、重新启动项目，即可解决...
2022-03-24 15:02:10
24181
1
原创 windows系统下，快捷方便地升级、降级node版本
1、在windows下，在C盘找到如下目录：C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Node.js直接运行Uninstall Node.js，即可删除当前node。2、去下载想要的node版本3、比如下载window64位的12.14.1版本4、直接运行，安装目录，选择之前安装的目录即可。...
2022-03-23 16:08:08
1496
1
原创 npm命令常用
1、查看npm全局安装的依赖npm list -g --depth 0其中：npm list：显示安装过的包-g：全局安装的包--depth 0：限制输出模块层级
2022-02-27 10:54:40
159
原创 git本地创建分支，如何推送到远程；删除分支
1、查看当前分支git branch当前分支为 master在github上，看到目前只有一个分支2、创建本地分支并切换git checkout -b dev此时，本地已经创建了dev分支，并切换到dev3、修改某个文件的内容后，也不修改，将本地dev推送到远程上，同步git push --set-upstream origin dev可以看到远程仓库上，多了一个dev分支...
2022-02-23 10:49:14
327
原创 二代身份证号码校验
二代身份证号校验，注意：这是严格的校验。代码封装：/** * 二代身份证号校验（严格） * @param code * @returns {boolean} */export function validIdNumber(idNumber) { var c = 0; var p = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; for (var i = 0; i < 17; i++) { var n =
2021-08-04 15:52:56
271
原创 onclick事件触发传多个参数，传中文参数
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、onclick事件，传多个参数二、onclick事件，参数是中文前言提示：开发中常用的场景，但容易忘记拼接格式，在此记录下来，方便以后查看。一、onclick事件，传多个参数var applyBtn = '<button οnclick="clickApplyPolicy(' + temp.id + ','+temp.pli_type+')">我要申办</button>'二、onclic
2021-06-01 21:28:52
2821
原创 viewerjs使用方法
提示：今天使用viewerjs来播放图片，需要触发到图片的show、hide方法，记录一下，方便日后查看。文章目录前言一、下载包二、文件代码前言直接上代码提示：以下是本篇文章正文内容，下面案例可供参考一、下载包npm i viewerjs二、文件代码可局部引入，即：在需要用到的页面引入。 <template> <div id="index"> <viewer :images="preImgList" :options="option
2021-04-26 17:23:06
2229
原创 vue 生命周期
文章目录vue生命周期详解1、new Vue()2、beforeCreate3、created4、判断有没有el项（vm.$mount(el)），判断有没有模板(没有将el外层的HTML当模板)，将模板编译成渲染函数，返回虚拟DOM5、beforeMount6、mounted7、beforeUpdate和updated8、beforeDestory和destoryed总结vue生命周期详解1、new Vue()创建通过 new创建一个Vue实例2、beforeCreate$el、data都是
2021-04-10 00:02:49
87
原创 js 节流函数
文章目录节流原理一、代码示例1、html代码2、直观代码3、封装 节流函数节流原理频繁触发事件，但只是在规定的时间内，触发。示例：一个div元素，可以拖拽，即：draggable="true"。想获取div元素的坐标，拖拽会一直触发事件，但只想每隔500ms，才会获取坐标。一、代码示例1、html代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />
2021-04-05 14:43:44
159
原创 jsonp实现跨域的原理
提示：加载图片、css、js都可以无视同源策略一、jsonp实现原理jsonp一般都选用script标签，script标签加载的js是没有跨域限制的，因为加载的是一个脚本，不是一个ajax请求。script所请求到的内容会直接当作js来执行，返回一段js脚本。二、简单示例1.html代码如下（示例）：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />
2021-03-27 22:08:24
161
原创 echarts tooltip悬浮框内容显示不全，如何解决
echarts tooltip悬浮框内容显示不全的解决方法前言简单示例总结前言项目使用echarts过程中，鼠标移上去，悬浮框显示的内容太多，导致显示不全，或者需要自定义显示内容时，如何解决？现在提高一个简单的方法简单示例代码如下（示例）： tooltip: { trigger: 'item', enterable:true, // 重点：需要配这个项 position:['20%','20%'], formatter:f
2021-03-26 10:43:31
3797
原创 es6变量解构赋值常见场景
变量的解构赋值常用场景一、交换变量的值二、解构函数返回的多个值三、函数参数的定义四、函数参数设置默认值五、引入模块指定的方法一、交换变量的值let x = 1,y = 2;[x,y] = [y,x]console.log(x) // 2console.log(y) // 1二、解构函数返回的多个值// 函数返回数组function func() { return [1, 2]}let [x, y] = func();console.log(x) // 1console.log
2021-03-22 19:26:27
280
原创 如何导出word文档
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2021-03-16 19:39:55
1476
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人