- 博客(84)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 index.js:273 Uncaught TypeError: navLink.forEach(...) is not a function
原因：首先我们可以明显的看到获取的DOM元素明显的是一个数组，原型上也有forEach()方法，看上去是不是很合理，但是有趣就有趣在这个获取到的DOM元素数组经过typeof检测其实是一个对象，正是这一点导致数组forEach()方法报错。今天遇到个有点意思的问题，使用forEach()遍历document.querySelectorAll获取的DOM节点时出现的报错，虽然不影响正常使用，但有强迫整的我看不得一点报错。使用for()循环代替forEach()或者使用遍历对象的方法遍历即可。
2023-12-08 02:57:01
483
原创 前端实现主题（深色模式）切换的几种方案
实现思路：首先定义几个我们需要的全局样式变量，之后定义几个集合属性（不同的主题样式），然后将其放在html根元素标签里，再动过js动态的切换这个集合属性就可以实现主题的切换，具体看以下代码；
2023-12-06 16:00:20
2274
1
原创 figma拉伸画板，导致元素变形，一键搞定
老样子废话不多说，直接上解决办法！MAC按住Cmd进行拉伸，windows按住Ctrl进行拉伸即可！
2023-10-17 11:41:58
1032
原创 vue3 路由的二次封装
为了使路由便于后续的维护和修改，将路由拆分为多个文件，例如将导航守卫，路由列表，路由模式啊等等将这些不同的功能存放在不同的文件里，最后设置一个主的入口文件将这些拆分好的文件导入进去
2023-03-20 23:11:43
737
1
原创 vue中触发更新检测的几种方案
在使用vue开发中大部分人应该都遇见过这种问题即数据明明发生了变化却没有触发视图的更新，这时候你可能各种尝试，比如把生命周期函数mounted()更改为created()，于是数据的重新绑定直接被你提前到new Vue()节点；终于，碰了几次南墙，你想回头。属性，它会对数据进行监控，但对数组的每一项都进行监控的话就会对性能产生影响，但问题又来了数组的更新检测如何触发呢，不要慌官方给出了解决方法，即他们对一些数组的方法进行了重写，我们可以使用这几种方法对数组进行修改从而触发更新检测。
2023-02-02 22:26:04
734
原创 vue中的data为什么是一个函数
首先组件的data写成一个函数并将数据以函数返回值的形式定义，这样就可以让组件在每次复用的时候返回一份新的data数据，从而使各个组件之间不会相互影响（即当某个组件中的数据发生变化时其他组件里的数据也会跟着发生变化，因为他们共用了一份数据）。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。
2023-02-02 21:57:22
420
原创 Object.assign()用法和特性
假如源对象的属性值是一个对象的引用，那么它也只指向那个引用；简单来说，就是Object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利用这个特性可以实现对象属性的合并。1.当目标对象和源对象中有重名属性时后面的属性值会覆盖前面的属性值，也就是说拷贝的源对象里的属性值会将目标对象里的重名的属性值覆盖掉；2.拷贝多个源对象时，没重复的属性会按序拷贝到目标对象，同理后面的重复属性也会覆盖前面的属性；简单来说Object.assign()就是一个对象的拷贝方法。以下是vue中的用法。
2022-12-15 21:52:55
591
原创 JSON.parse(JSON.stringify()常见坑
首先这行代码在执行时，他的执行过程就是利用json.stringify()将对象序列化（将对象转为可存储和传输的形式），再通过json.parse()进行反序列化；2.如果json里有RegExp、Error对象，则序列化的结果将只得到空对象 RegExp、Error => {}；5.如果json里有对象是由构造函数生成的，则序列化的结果会丢弃对象的 constructor；但是这种深拷贝的方法是有局限性的，他仅仅适用于一般数据的拷贝，例如对象和数组。6.如果对象中存在循环引用的情况也无法实现深拷贝。
2022-12-15 21:27:45
1709
转载 vite和webpack对比
当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显；vite充分利用这点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack先打包，交给浏览器执行的文件是打包后的；当需要打包到生产环境时，vite使用传统的rollup进行打包，所以，vite的优势是体现在开发阶段，另外，由于vite使用的是ES Module，所以代码中不可以使用CommonJs；文章引用于简书上的一个大佬，原文链接。
2022-12-14 20:10:21
299
原创 ly-tab插件动态更改高度进行多端适配
可以看出当在其他设配时布局是没有问题的，但切换到ipad时，很明显ly-tab闭关没有自适应从而导致与下面的元素产生了很大的间隙，看过官方文档的小伙伴应该清楚ly-tab虽然后有设置高度的api但那个是设置底部选中状态的底线的高度的，并没有设置整个插件高度的api，起初打算直接更改此组件的高度，但结果不尽人意（或许是我技术不够牛改不动）无效，但可以使用动态计算来解决它！比如当我们想将其定位到顶部时，设置主元素的padding-top值后，在不同的设备会出现不同的结果，而有些结果显然不是我们想要的，如图。
2022-11-18 20:12:08
514
原创 ly-tab插件报错
根据三方文档进行配置后一直报错，搞不懂因为啥，也查不到原因，头都大了，后来开始怀疑是版本问题，进行检查后发现安装的是最新版而三方文档是2.0版本（果然是版本差异问题）根据官方文档进行配置，一定要是官方文档
2022-11-17 21:18:01
624
1
原创 vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation
路由重复点击报错解决方法
2022-11-17 17:38:16
5380
1
原创 ✖ 48 problems (48 errors, 0 warnings) 45 errors and 0 warnings potentially fixable with the `--fix
起初此报错以为是eslint导致的，在尝试了关闭eslint或者或者添加新的校验规则后始终无效，以下方法为针对此报错有效的一种就是将vue.config.js里的配置进行修改....
2022-11-16 21:12:23
1129
原创 Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be
即100%就会转换成100px，就会导致图表过小或者干脆显示不出来得问题，但是用内敛样式即可完美解决此问题。
2022-10-28 19:17:49
1920
原创 Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“ 解决方法
改成最新版的引入方式即可
2022-10-26 17:13:27
1306
1
原创 elementui 气泡确认框不显示
查阅资料后发现是没有添加唯一值的原因，pop需要加唯一标识符，可以是key可以是ref也可以scope的$index。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。
2022-10-08 16:16:16
2581
1
原创 正则表达式
正则表达式是用来处理字符串的，它可以让你节省很多很多的代码，例如：如果一个输入框不让提交，这个过程就是表单验证的过程。如果我们输入的不是手机号，就不让提交如果我们输入的不是邮箱地址，就不让提交如果我们输入的不是身份证号，不然提交上面这些操作都是表单验证的场景，而这些都需要用到正则表达式。
2022-09-28 09:12:42
755
原创 elementui 分页器跳转问题
关键代码 this.getPageList(this.list.length > 0?然后再删除成功后请求上一页数据时，将list的长度通过插槽传过来的索引删除一条数据，然后使用自减的方法进行页数的减少就可以辣。注意，此处如果使用-1是没有效果的。
2022-09-23 11:21:31
5998
原创 BOM对象常用方法总结
首先BOM全称为浏览器对象模型（BOM）。是用来获取浏览器相关信息的对象，并且可以操纵浏览器，hash 表示url中”#“后跟着的的内容 hash内容不管怎么改变，访问的网页是不变host 域名 和 hostname 一致hostnamehref 当前网页的urlorigin 只包含协议和域名pathname 路径port 端口protocol 协议search?后面的参数。
2022-09-22 20:41:53
5469
原创 elementui（对话框分页器）组件兼容适配移动端
elementui组件库虽说大大提高了我们开发的效率，但相继也出现了一些问题，比如组件样式的修改，自定义效果变差，组件适配等问题。看的出来效果还是很不错的，完美的解决了组件适配问题，这个思路同样适用elementui一些其他组件。例如对话框组件可以看出在pc端效果还是很理想的，但移动端却是以下效果。看的出来效果并不理想，不过问题不大我们可以使用媒体查询让其适配移动端。
2022-09-21 15:01:46
10244
原创 ES6解构赋值与扩展运算符
扩展运算的作用可以简单理解为：把数组的中括号，和对象的{}直接去掉。直接去除后，里面的数据格式，我是无法在JS的环境的中独立存在。扩展运算符的操作需要被放置在合适的位置上。解构赋值很容易遇到一种情况，我们要使用的名字和已有变量名冲突（重复）了。在我们使用map操作时，可以保留原有数据的基础上，添加新的属性。解构赋值，可以实现直接从数组或者对象中取值赋值给变量。
2022-09-21 10:08:07
6680
原创 ES6中的常用数组方法总结
数组方法：forEach map filter find findIndex some every reduce reduceRight。
2022-09-21 10:00:04
6817
原创 Paused in debugger 弹框解决办法
解决办法 准备冻手首先打开 source 面板，把 Any XHR 勾选去掉，然后将paused on exception （八边形那个东西）点灰
2022-09-20 20:58:22
8026
原创 客户端存储localStorage和sessionStorage以及Cookie
正常情况下，我们前端写的静态页面，只要刷新，就重置了，无法保留任何信息。为解决这一弊端我们可以利用js中的客户端数据存储。在JS中存储在客户端数据有很多方式：Storage有两个对象：localStorage （本地存储）和sessionStorage（临时存储），Cookie，indexedDB（一般用于游戏开发存储体积较大）
2022-09-19 19:27:09
7582
原创 浅析Promise
承诺，在声明函数时承诺好，如果成功就执行resolve，如果失败就执行reject。定义resolve和reject函数的人，是使用这个Promise对象的人。
2022-09-19 09:08:45
7500
原创 聊天室案例实现保姆级教学
先来看效果图， 基于axios，js实现，// 首先创建一个自执行函数(function () { // 获取元素 let header = document.querySelector('.header') let ipt = document.querySelector('.ipt') let send = document.querySelector('.send') // 注册事件 send.addEventListener('click', sen
2022-09-16 11:37:51
7524
原创 前端常用请求方法总结
这是一个别人封装好的http请求库，使用时需要我们引入才能够使用。因为个人比较喜欢用这种方法请求数据所以放到第一位。ES6中出现的替代xhr对象进行异步请求的一个对象。它默认是基于promise解决异步操作。fetch的用法很简单。我们获取到的response是一个JSON字符串，使用时需要将其转换为JSON对象。要发起ajax请求有很多方法，原生xhr或者fetch都可以，我们先了解xhr。以上两种为常用方法，剩下的很少用到所以这里我就不多巴巴了，详情参考官方文档。
2022-09-14 19:35:33
9822
原创 To install it, you can run: npm install --save core-js/modules/es.error.cause.js
这是最近在做一个后台管理系统下载依赖时报的错，先来看报错提示可以看出它提示我们需要下载这个依赖才能运行（依赖之前已经npm i 过），按照提示进行下载下载完成，重新运行依旧报错，尝试重新把所有依赖全部删除重新下载，结果依旧如此，
2022-09-13 19:18:51
11192
原创 前后端交互之网络服务的基本概念
在我们进行前后端数据交互时，一般使用ajax或者axios，在我们进行请求时，需要请求网络上的url。这里有几个概念，我们通过传递不同的参数，获得到不同的资源。具体参数的作用是什么，则需要和后台沟通。以上的三个东西，都是由后台提供好的文档，我们只需要在ajax特定的地方填入特定的内容即可。
2022-09-13 12:14:37
10709
1
原创 使用ECharts绘制中国地图
想要在echarts中展示地图，我们需要有对应的地图数据，可以去我们需要的数据就是一个对象，我们需要使用他们提供的接口或者把这个对象下载到本地。
2022-09-06 19:40:01
17496
原创 EChart常见配置项解析
EChart是什么以及作用，它是一个图表库，用来进行数据可视化操作，同样的库还有很多：蚂蚁金服的AntV，HightCharts等。
2022-09-06 19:19:26
13035
原创 js读取文件的内置方法之 FileReader
基于该对象，我们可以实现对选中的读取操作fileReader读取的文件需要从input中获取给fileReader绑定onload事件。
2022-09-05 11:20:54
16984
原创 5分钟学会canvas的使用
在HTML5新增新的标签，名为画布，可以使用JS在上面完成对应的画的操作。正常情况我们可以把它当成一个img看待。
2022-09-05 11:14:47
16017
原创 一分钟学会使用js读取上传图片文件
显示一个图片，除了直接放文件路径，还可以放Base64当我们用file选择一个文件时，我们希望能够读取到文件路径，然后显示到一个img上或许你会想利用value值显示，input:file上确实有value但是这个value不能用fileReader，尽量先监听，然后再读取，好了不废话了直接看代码吧。
2022-09-05 10:39:21
15817
原创 call apply bind的用法和区别
bind一般用在事件绑定时使用，因为事件绑定时，函数内部的this指向绑定的元素，如果函数中不需要用到这个this，但是要用到其他this，我们就可以进行绑定时修改。有n个参数，第一个参数是this指向，设置后，函数内部的this就会指向对应的我们设置的值。有两个参数，第一个参数是this指向，设置后，函数内部的this就会指向对应的我们设置的值。在声明函数时使用，该方法调用后，会得到一个新的函数，这个函数中的this指向被改变。他会返回一个绑定死的指定上下文的函数，他不会调用函数，从IE9开始兼容。
2022-09-02 15:17:34
16597
原创 如何借助this指向实现精确判断类型和将类数组对象转数组
数组调用toString时调用自己的toString，没办法调用到Object的toString方法，所以我们如果想要让其他类型调用Object.prototype.toString方法。因为Object.prototype.toString这个方法中的this 在 通过obj.toString调用时指向obj，所以我们得到[object Object]csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。...
2022-09-01 12:06:13
18009
原创 js修改函数this指向的三种常用方法总结
函数在调用时this指向可以随意的进行修改。通过使用call apply bind可以修改对应的this指向。
2022-09-01 12:02:36
18220
原创 uniapp开发微信小程序Error in onLoad hook: “SyntaxError: Unexpected end of JSON input“
这个报错之前一直没出现，今天运行代码测试搜索功能时出现的问题，推测是项目之前存储的本地缓存数据被清除，然后初始化读取不到导致的，查阅资料后发现其实是由于JSON.parse无法识别某些url中的特殊字符比如&等特殊符号造成的。...
2022-08-31 20:36:10
21469
可以自定义安装路径的谷歌浏览器
2022-08-16
uniapp uni.getUserInfo(OBJECT) API 不兼容H5
2022-08-25
js中for循环var声明的变量最后一次不输出
2022-08-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人