- 博客(70)
- 资源 (1)
- 收藏
- 关注
原创 vue3+el-upload+多张图片(20MB左右)+图片压缩上传到后端+可限制条数+懒加载
这就是部分大图加载不出来的截图,就是因为一下加载整个表格的所有图片,一个是卡,第二个最主要的是加载不出来,但是点击单个图片预览却可以,这也是我做这个懒加载的原因。
2025-12-22 18:44:28
454
原创 react项目使用json-server模拟接口获取数据
📁二、创建JSON格式的数据在项目根目录(或 )下新建一个文件:内容示例:⚙️ 三、在 package.json 中添加启动命令说明: 表示监听文件变化自动更新; 指定端口号(你可以改成自己喜欢的); 模拟网络延迟(单位毫秒)。注:这里的端口号便是你在package.json,这里要对应起来。注释:这里的'/users'路径就是根据你在JSON文件定义的对象名定的,例如你要获取上述的porducts数据,则是请求路径后面是'/products'
2025-11-07 17:57:10
223
原创 Vue 3 提供的 createElement 工具函数——h
h是 Vue 3 提供的创建虚拟节点 (VNode)的工具函数。它的主要用途是:在渲染函数、插槽函数中用 JS 来生成 DOM。h的写法有些啰嗦,但能提供比模板更高的灵活性。如果项目支持 JSX,可以用 JSX 替代h,代码会更直观。模板写不出来的复杂结构,就交给h吧!
2025-09-20 10:42:56
378
1
原创 修改样式还能影响功能?是的!
按钮看起来正常,但点击无效,或者点的是别的东西。:一个透明/空的元素层级高,盖住了按钮。:这个样式让元素“无法响应鼠标事件”。:按钮完全不能点击,事件不会触发。
2025-05-19 16:20:38
238
原创 vue3+el-cascader-panel+多选+动态加载+默认展开+选中查询节点并展开+查询到的这一条自动滚动到顶部+tooltip效果
vue3+el-cascader-panel+多选+动态加载+默认展开+选中查询节点并展开+查询到的这一条自动滚动到顶部+tooltip效果
2025-03-21 11:36:13
1903
原创 npm、pnpm和yarn有什么区别
选择哪一个工具通常取决于团队的需求、项目的复杂性以及个人的偏好。对于追求速度和高效的项目,pnpm通常被推荐。对于现有的npm生态系统,升级到最新版本的npm也可以获得不少性能和功能的改善。而yarn适合那些需要一致性和速度的团队,尤其是在大规模项目中。以下是使用pnpm教程。
2025-02-20 10:47:41
805
原创 级联选择器多选动态加载
样式问题:如果用级联选择器可以使用自带的popperClass属性自定义一个样式隐藏一二级多选框,例如popperClass="popper-select1"
2025-02-17 11:41:24
971
原创 你写的代码复杂并且bug不断?那就看过来,纯干货
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象(装箱)。由于 undefined 、null 无法转为对象,所以对它们进行解构赋值时就会报错。所以当 data 为 undefined 、null 时候,上述代码就会报错。如果导入的模块存在语法错误、网络或者跨域问题、文件不存在、循环依赖、甚至文件非常大导致内存不足、模块内的运行时错误等都有可能阻塞后续代码执行。如果 fetchListData() 执行报错,页面就会一直在加载中,所以一定要捕获一下。
2024-11-25 16:50:04
324
原创 async await与Promise的区别
综上所述,async/await更适合顺序执行的场景,而Promise更适合并行执行的场景。选择使用哪一种方式取决于具体的需求和场景。多个异步操作的情况。Promise通过.then()和.catch()方法处理多个异步操作的结果和错误,但不会阻塞代码的执行。多个异步操作的情况。由于await会阻塞代码执行,直到异步操作完成,因此代码看起来像是同步的,这使得代码更易于理解和维护。async/await:适用于需要。Promise:适用于需要。
2024-11-25 16:35:26
384
原创 “element-plus“: “~2.6.1“和“element-plus“: “^2.6.1“在xue项目package.json配置的主要区别
表示安装的element-plus版本将在2.6.1的基础上允许有一定的版本浮动范围,但不会超出主版本号。这意味着可以安装2.6.x的任何补丁版本,但不会升级到2.7.x的新版本。这种策略适合于希望稳定使用特定版本的开发者,避免因新版本带来的不兼容改动。 表示安装的element-plus版本将至少是2.6.1,但允许升级到2.x的任何新版本,只要主版本号不超过2。这种策略适合于希望自动获取bug修复和性能提升,同时又能保持与现有代码的兼容性的开发者。
2024-10-10 13:35:48
540
原创 CSS也可以赋一个变量值?是的
*:root 选择器匹配文档根元素。*//*在 HTML 中,根元素始终是 html 元素。*//*也就是说:root 表示的是根元素*///声明:root {//使用element {//场景二:}));/*如果提供了第二个参数,则表示备用值,当自定义属性值无效时生效。第二个参数可以嵌套,但是不能继续平铺展开下去了,例如:*/.two {.three {.three {
2024-10-08 16:24:58
595
原创 find()和findIndex()方法
这两个方法支持回调函数参数,可用于复杂条件判断,并能识别NaN,弥补了indexOf的不足。比方说,数组 [1, 2, 4, 3] 中,1 的第二大整数是 4 ,2 的第二大整数是 3 ,3 和 4 的第二大整数是 -1。对于 nums 中每一个整数,你必须找到对应元素的第二大整数。3)恰好存在 一个 k 满足 i < k < j 且 nums[k] > nums[i]1.find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。如果不存在 nums[j] ,那么第二大整数为 -1。
2024-09-30 14:08:21
342
原创 lodash中_.difference如何过滤数组
创建一个具有唯一array值的数组,每个值不包含在其他给定的数组中。(注:即创建一个新数组,这个数组中的值,为第一个数字(array参数)排除了给定数组中的值。)该方法使用做相等比较。结果值的顺序是由第一个数组中的顺序确定。
2024-09-14 11:33:10
420
原创 VUE3父子组件传参
是 Vue 3 的 Composition API 中一个新的实用函数,用于在<script setup>语法下显式暴露组件的公共属性和方法,这在处理子组件时特别有用,允许父组件访问子组件的特定属性或方法。在 Vue 3 中,当我们使用defineExpose。
2024-09-06 18:11:50
760
原创 table表格页面加载太慢如何解决
requestAnimationFrame是一种在浏览器中实现动画循环的技术,它通过定时器机制来周期性地调用指定的回调函数,以实现网页动画的效果。使用requestAnimationFrame可以将动画的每一帧绘制操作封装为一个回调函数,并将这个回调函数传递给requestAnimationFrame函数。当浏览器准备进行下一帧绘制时,会自动调用这个回调函数,从而实现了动画的循环。二.懒加载和分页数据:(这里我参考了懒加载思想,实现了数据一条一条加载展示的效果)
2024-08-19 11:42:02
961
原创 map、foreach、filter这些方法你还不知道什么时候该用哪个吗?那就看过来
创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。因此,filter适合于过滤当前数组并找出符合条件的元素,返回一个新的数组,而不会改变原数组。:创建一个新数组,其结果是该数组中的每个元素调用一个提供的函数后的返回值组成。map方法会返回一个新数组,这个新数组由原数组中的每个元素调用一次提供的函数后的返回值组成。map方法中的回调函数需要使用return来指定新数组中的值,因此它更适合于根据当前数组映射一个新的数组的情况。
2024-07-27 18:39:48
394
原创 vue3如何实现编辑器功能
3.最后,您可以根据您的需求配置 Quill 编辑器,如添加工具栏选项、自定义样式等。您可以查阅 Quill 编辑器的文档来了解更多配置选项和功能。1.首先,您需要安装Quill编辑器。您可以使用 npm 或 yarn 来安装 Quill 编辑器的 Vue 组件。2.然后,在您的 Vue 组件中引入 Quill 编辑器。
2024-06-04 14:05:52
912
原创 vue3可以快速简单的操作dom元素了
我们需要使用——也就是指向模板中一个 DOM 元素的 ref。我们需要通过:这个 ref 使用null值来初始化。这是因为当执行时,DOM 元素还不存在。模板引用 ref 只能在组件后访问。
2024-06-01 16:05:11
658
原创 如何解决0.1+0.2!=0.3的问题
/ z 的结果为 0.3。// z 的结果为 0.30000000000000004。// 返回 false。
2024-05-26 11:14:16
196
原创 数组的形式访问对象中的属性——神之操作
这种方法访问不了status-r,如果直接obj.status-r会报错,因此可用下面这种方法解决。例如:obj["status-r"]例如:obj.channels。
2024-05-24 10:08:00
256
原创 web前端面试题----->VUE
在父组件写一个函数,将这个函数绑定在子组件(子组件的实例对象上)上并赋值给子组件的v-on的方法名上,然后在对应子组件用this.$eimt(v-on上的方法名 ,参数二可以是子组件要传给父组件的数据,例如this.name,然后父组件接受参数)触发这个事件。
2024-03-27 12:59:23
1003
原创 前端面试题---->JavaScript
原因:当使用const声明一个对象或数组时,实际上是保证了对象或数组的引用不会被修改,但对象或数组本身的属性或元素是可以被修改的。这是因为const只能保证指向的内存地址不变,但并不保证内存地址指向的内容不变,而基本类型的变量在内存中存储的是值本身,而不是引用。
2024-03-26 21:33:49
1155
1
原创 web前端面试题---->HTML、CSS
对父元素操作 : justify-content:center;grid布局:对父元素操作:place-items:center。
2024-03-26 20:52:05
1258
原创 项目上线存在的缓存问题以及存在的debugger和console.log等问题
【代码】项目上线存在的缓存问题以及存在的debugger和console.log等问题。
2024-01-16 16:47:40
657
原创 数组和对象的处理方法总结
push():向数组的末尾添加一个或多个元素,并返回新的长度pop():删除数组的最后一个元素,并返回该元素的值。shift():删除数组的第一个元素,并返回该元素的值。unshift():向数组的开头添加一个或多个元素,并返回新的长度。sort():对数组的元素转换为字符串,然后按照字符串的 Unicode 编码顺序进行排序。splice():从数组中添加或删除元素。reverse():反转数组的元素顺序。join():把数组的所有元素放入一个字符串。
2024-01-16 15:19:05
488
原创 ::v-deep和&:hover的含义
来避免父组件对子组件的影响,添加了之后只能修改当前组件的样式,但同样引发不能在当前组件修改子组件的样式,因此就出现了深度选择器 ::v-deep。vue项目中经常在style 标签内添加。二. ::v-deep的含义。一.&:hover的含义。
2023-12-01 11:18:49
649
原创 用了elementui中的组件,设置样式时始终不生效的解决方案
后使用到里面样式的dom会添加data-v-xxxx这种属性防止css污染,但是message生成的dom是没有添加data-v-xxx属性的,所以样式无效。原因:可能是因为加了。
2023-11-24 10:19:03
4224
2
原创 超简单的重置表单方法---利用elementui如何重置表单
1.在dialog对话框添加close方法,执行在关闭时要进行的操作并在form表单绑定ref。2.使用resetFields方法重置表单。3.重置表单具体实现代码。
2023-11-22 16:38:11
1951
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅