- 博客(25)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 使用el-tree时你可能遇到的一些问题
先看需求，这个一个角色管理的页面，在编辑的时候我们需要设置当前角色的权限，但这个权限一般都是树形结构，所以我们需要用到elementPlus的el-tree组件进行渲染，我们在提交的时候拿到所选中的id交给后端处理，但是后端不仅需要选中的id值，还需要这种连带着的半选中的id，最后组成一个 “idList” 交给后端。但是这样还不够，我还有回显的需求，这里同样是使用了el-tree组件的 setChecked 方法，我的代码是这样的，看似并没有什么问题，但是在。
2024-06-29 18:29:35
651
1
原创 封装element-plus年份范围选择器
基本功能：因为新增和编辑中都需要用到该组件，所以该组件需要能够动态的拿到值（新增拿到值）和回显值（编辑时回显），并且可以触发element的Rules。第一眼看这些代码可能会造成死循环但是并不会,两个watch是独立开的。
2024-02-18 11:41:57
897
1
原创 微信小程序自动生成骨架屏
写PR时有一个需求，需要在首页数据加载前先展示骨架屏，这时候第一时间想到的是uview组件库的 Skeleton 骨架屏，但是这种方法需要自己在插槽中写元素，首页的元素很多这种方法很复杂。我们只需要把两个文件的代码粘到对应的组件文件中即可（这里作者写的是uniapp项目，其他类型的同理）其实微信小程序官方提供了生成骨架屏功能，模拟器的右下角，点击三个点。接着点击生成骨架图，点击继续下去，这时候微信会生成两个文件。
2023-12-25 23:05:20
695
原创 Promise.all实际应用
Promise.all() 方法，她可以将多个 Promise 实例包装成一个新的 Promise 实例。由于她返回的还是一个异步，所以我们在这个基础上加上await，await Promise.all() 就相当于等待所有传入的 Promise 实例都完成后，再继续执行后面的代码。分析一下代码：第二个请求需要等第一个请求结束，而第三个请求又需要第二个请求结束，这种写法造成了严重的网络堵塞。但是这样写弊端很明显，原本只需要500ms就可以完成三个异步数据请求，这样写足足用了1500ms，
2023-12-25 22:49:54
486
原创 项目运行报错：Node.js v18.16.0 ELIFECYCLE Command failed with exit code 1.
今天下午运行项目的时候突然报错：Node.js v18.16.0 ELIFECYCLE Command failed with exit code 1.上午的时候还好好的下午就报错，这个问题直接把node_modules文件夹删除掉，重新安装一下依赖就好了。
2023-12-25 22:22:15
2034
原创 修改element-ui日历组件
这里通过通过:class动态类名的returnClass方法将插槽传回来的data传入，酱紫方便我们在方法中进行逻辑判断，点击事件同理。这里通过类名伪元素的方法改变 可约/不可约 的样式和文字，稍后我们会在JS中判断具体返回那个类名。但是element日历组件提供的可操作API太少，所以这里推荐通过动态类名动态添加。
2023-10-09 10:44:56
757
1
原创 Vue中父子组件的生命周期
beforeMount()挂载数据前：模板已经获取到，但是数据未挂载到模板上。created()实例创建后：最早可以访问到data数据，但模板未获取到。beforeUpdate() 模板更新前:data改变后,更新模板前调用。beforeCreate()实例创建前：数据和模板均未获取到。updated()模板更新后:将data渲染到数据模板中。mounted()数据挂载后：数据已经挂载到模板中。beforeDestory()实例销毁前。destoryed()实例销毁后。
2023-08-25 21:59:25
99
1
原创 JS所有常用数组方法
lastIndexOf(): 返回在数组中可以找到给定元素的最后一个索引，如果不存在，则返回-1。lastIndexOf(): 返回在数组中可以找到给定元素的最后一个索引，如果不存在，则返回-1。否则返回 undefined。map(): 创建一个新数组, 其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map(): 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。indexOf(): 返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1。
2023-08-22 23:14:12
81
1
原创 预处理语言：Less和Sass的区别
总体而言，Sass和Less在功能和语法上都有一些区别，选择使用哪种预处理语言取决于个人喜好、项目需求和团队的选择。无论选择哪种语言，它们都可以提高CSS的开发效率和可维护性。
2023-08-14 20:27:44
81
原创 export和export default 的区别
export: 使用 export 关键字可以导出多个命名的模块成员，需要使用花括号 {} 在导入时进行匹配，导出时需要和导入的变量名称相同，可以有多个export语句export default: 使用 export default 只能导出一个默认的模块成员，无需使用花括号 {} 在导入时进行匹配，引入时，可以变成不同的名称，一个JS文件只能有一个export default语句。
2023-08-09 20:27:23
167
原创 CSS实现横线滚动（隐藏滚动条）
通常这种效果是swiper实现，但是需要引入第三方组件，占用不必要的资源，但是通过CSS可以简单实现该功能。然后再用CSS的伪元素隐藏滚动条，实现效果。
2023-08-08 09:30:00
995
原创 原生JS实现京东同款轮播图
把八张图片通过绝对定位排在同一个位置上面，然后通过CSS设置第一张图片为z-index:1;opacity:1;将其显示出来，然后其他图片属性opacity设为0，z-index默认设为0，这样第一张图片会先显示出来，并且压住其他的图片，然后JS点击事件来控制哪张图片的显示。京东的轮播图主要是通过设置元素的opacity和z-index层级关系实现。我们打开京东首页时回到看这样的一个轮播图。
2023-08-08 09:00:00
436
原创 JS禁止滚动条滚动
我们在写项目时候可能会遇到这样一种效果：点击按钮，弹出一个对话框，此时只能在框内操作，此时滚动条消失并禁止滚动或是这样的。
2023-08-07 16:45:30
2488
1
原创 var、let、const的区别
let、const和var都存在"暂时性死区"的概念。在一个作用域中，当使用let或const声明一个变量或常量时，该变量或常量会在声明之前被绑定到该作用域。let和const的作用域是块级作用域。块级作用域是指在{}中的任何地方声明的变量只在该块内部有效。var在函数内部声明的变量只在该函数内部有效，而在函数外部声明的var变量为全局变量，全局有效。除了const声明的不能修改，let 和 var 声明的变量都能够修改。let声明的变量不提升。let声明的变量不提升。
2023-08-03 16:52:28
63
原创 了解jQuery：经典前端函数库
jQuery是一个广泛使用的前端JavaScript函数库，它简化了HTML文档的遍历、事件处理、动画效果和AJAX等操作。自2006年发布以来，jQuery已经成为了开发者们的首选，无论是初学者还是经验丰富的开发者，都可以从中受益。本文将深入探讨jQuery的一些关键特性和优势，帮助读者更好地理解它为什么如此受欢迎。总体而言，jQuery是一款强大、易用且高效的前端函数库。它的广泛应用使得许多网站和Web应用受益匪浅。
2023-08-02 20:50:10
77
1
原创 jQuery中bind和on的区别
在 jQuery 中，bind() 和 on() 都是用于绑定事件处理程序的方法，它们的功能很相似，但有一些区别。
2023-08-01 19:31:16
666
1
原创 JQuery的常用选择器（速通）
jQuery 是一个经典的 JavaScript 函数库，它简化了 HTML 文档遍历、事件处理、动画效果和 Ajax 操作等操作。选择器是JQuery很重要的部分，写得少，做得多，使用JQuery来 HTML 元素，可以省下很多代码。
2023-07-31 19:05:13
140
1
原创 JS防抖和节流
JS防抖（Debounce）是一种常用的前端开发技术用于对频繁触发的事件进行优化处理。当一个事件被触发时，防抖技术会延迟执行该事件处理函数，并且如果在延迟期间内该事件再次被触发，延迟期会被重新计算，只有当事件停止触发一定时间后，才会执行事件处理函数。防抖的主要目的是减少频繁触发事件时的不必要的重复操作，提升页面性能和用户体验。常见的应用场景包括搜索框输入联想、按钮点击、窗口大小改变等需要进行网络请求或者计算的操作。JS节流（Throttle）也是一种常用的前端开发技术，用于控制事件的触发频率。
2023-07-28 19:39:18
90
1
原创 VSCode的一些实用插件
这是一个代码格式化工具，可以帮助你自动格式化你的代码，使其保持整洁和统一的风格。它支持多种编程语言，包括JavaScript、CSS、HTML等。这是一个非常流行的JavaScript代码静态分析工具，它可以帮助你在开发过程中保持一致的代码风格，并找出潜在的错误和问题。该插件可以再代码界面放一张可爱的动漫人物，可更换图片（谁能拒绝写代码时有一只小可爱在看你呢）最好用的VScode插件，一边写代码一遍看页面效果快捷键（alt + l alt + 0）自动重命名成对的HTML标记，前端程序员必备。
2023-07-27 20:36:42
106
1
原创 JS数组和对象的深拷贝方法
在学习JS数组和对象的深拷贝方法前，我们必须了解JS的变量存储方式，这样才能更好的了解深浅拷贝！栈：自动分配内存空间，系统自动释放，里面存放的是基本类型的值和引用类型的地址（指针）。堆：动态分配的内存，大小不定，也不会自动释放，里面存放引用类型的值。目前只是一些比较简单的深拷贝方法，还有其他深拷贝方法，未完待续…JS 的变量存储方式： 栈（stack）和堆（heap）。
2023-07-25 19:00:38
1369
原创 关于JS的原型
在 JavaScript 中，每个对象都有一个原型（prototype）。原型是一个对象，拥有属性和方法，可以通过原型继承属性和方法，能够实现内存共享和对象之间的属性和方法的共享。原型的作用!important（很重要那种！！1.内存共享2.实现数据共享。
2023-07-25 00:18:40
77
仿当当网PC端demo源码H5C3+JS ，基本还原样式，实现滚动监听，tab切换，倒计时，轮播图、JS动画等效果
2023-07-24
仿京东移动端demo源码H5C3+JS ，1:1还原，实现滚动监听，购物车价格汇总，倒计时，轮播图等效果
2022-06-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人