- 博客(130)
- 收藏
- 关注
RSS订阅原创 Object.assign详解
分析：从例子中可以看出，当我们修改目标对象的属性值时，源对象的name没有变化，但是grade.chi却被改变了（修改源对象的属性也是同理），因此我们可以看出Object.assign()拷贝的只是属性值，假设源对象的属性值是一个指向对象的引用，那么它也只拷贝那个引用值。1、Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象，Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。这个对象的任何变化，都会反映到目标对象上面。
2024-04-11 09:53:48
1040
原创 解决el-table设置固定高度后，展示不同列时表格高度变小bug
究其原因可知是el-table列动态发生变化后，el-table__body-wrapper的高度变小了。在更新表格数据后对el-table进行重载。
2024-04-03 10:13:34
614
原创 vue2中vue-print-nb实现打印功能
若打印时，末尾总是出现空白页，则存在定义了height:100%的元素，删除掉此样式即可 通常都是因为存在以下样式导致,通常被定义在全局样式文件中，或index.html中。您可以通过在需要隐藏的div上添加class=“no-print”，然后在打印样式中设置该类的display属性为none来实现隐藏。设置打印内容样式，不影响页面原有样式 以下内容为设置 element table 在打印时的样式，防止打印不全。在要进行分页的标签上，添加以下样式。或者 在需要分页的内容最后加上。
2024-03-28 10:26:36
540
原创 ElementUI中的el-table表格实现动态添加一行、删除一行、清空所有行
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行。
2024-03-27 17:43:55
1091
原创 彻底搞懂Vue3中 watch、watchEffect区别！
注意：使用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。使用异步回调创建一个侦听器，则不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。这个回调函数接受三个参数：新值、旧值，以及一个用于清理副作用的回调函数。是懒执行的：当数据源发生变化时，才会执行回调。注意：深层侦听需要遍历所有嵌套的属性，当数据结构庞大时，开销很大。的主要功能是相同的，都能响应式地执行回调函数。接受两个参数，第一个参数是数据发生变化时执行的回调函数，用法和。第二个参数是一个可选的对象，支持。
2024-02-28 10:10:48
909
原创 JavaScript值类型和引用类型两道经典面试题
属性（此处不同人有不同理解，我暂时理解为属性名不是变量，没有开辟新的空间），此时才进行赋值运算，赋值从右往左，一次赋值，即把。首先，小试牛刀，请看第一道题。那么上述代码输出结果是多少呢？废话不多说，直接上答案。号运算符，此时先执行。
2023-12-16 20:23:36
241
原创 vue2通过权限控制tab标签显示和隐藏
在开发过程中，我们可能会遇到这样一个场景：根据不同权限对tab栏内容进行控制，这时候用自定义指令v-permission就达不到我们想要的效果，其是将当前节点的子元素进行移除，此时当前节点依然存在，如下图所示。这时候就需要利用v-if自定义控制，其思路实：v-if中执行一个函数，函数传入一个权限值。在函数中判断权限值是否属于权限菜单内，返回布尔类型值。<el-tab-pane label="负荷跟踪" name="first" v-permissions="['load_track']">
2023-11-28 15:08:49
1092
原创 vue3中引入svg矢量图
在项目开发过程中，我们经常会用到svg矢量图,而且我们使用svg以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且我们svg文件比img要小的很多，放在项目中几乎不占用资源。
2023-11-24 15:06:34
778
原创 前端本地存储数据库IndexedDB
前端本地化存储算是一个老生常谈的话题了，我们对于存储量小：即使是web storage的存储量最大也只有 5M；存取不方便：存入的内容会经过序列化，当存入非字符串的时候，取值的时候需要通过反序列化。当我们的存储量比较大的时候，我们一定会想到我们的indexedDB，让我们在浏览器中也可以使用数据库这种形式来玩转本地化存储，然而indexedDB的使用是比较繁琐而复杂的，有一定的学习成本，但第三方库的出现，让我们轻松无负担的在浏览器中使用indexedDB。截止今天，在github的star已经。
2023-11-20 15:20:24
217
原创 vue实现无感刷新token
最近在做vue3管理系统项目的时候，涉及到登录token有效时间问题，能不能让token过期时间长一点，避免频繁进行登录。前端：后端，你能不能把token过期时间设置的长一点。后端：可以，但是那样做不安全，你可以用更好的方法。前端：什么方法?后端：给你刷新token的接口，定时去刷新token前端：好，让我思考一下需求当token过期的时候，刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知，避免频繁登录。
2023-11-13 15:07:00
487
原创 JavaScript开发技巧（上篇）
JavaScript中有很多速记技巧，可以缩短代码长度，减少冗余，提高代码的可读性和可维护性。本文将介绍提高效率的JS缩写技巧，帮助你告别写垃圾的生活，轻松写出优雅的代码！
2023-10-31 18:18:23
124
原创 解决Vue2封装组件含有echarts时多次调用出现id重复问题
封装组件中使用echarts时，多次调用导致id重复，出现页面不渲染、数据覆盖等问题。
2023-10-16 11:41:27
323
原创 一文彻底搞懂前端ES6模块化
在以前的JavaScript中是没有模块化概念的，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。如果要进行模块化操作，就需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化，于是才有了ES6模块化的诞生。为什么要有模块化，或者模块化的好处是什么呢？大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块间的相互调用。可以将一段复杂的程序拆解开来，方便维护可拓展。ES6模块化规范是浏览器端与服务端通用的模块化开发规范。
2023-10-13 16:40:09
120
原创 彻底弄懂js函数柯里化
函数柯里化(Currying)在JavaScript中总感觉属于一种不温不火的存在，甚至有些开发者在提起柯里化时，竟然会有点生疏不懂。其实不然，对于它们的概念可能在日常开发中不太提到，但是它们的思想和用法，却在前端开发中经常借鉴和使用，它可以帮助我们写出更加优雅、灵活的代码。本文将介绍柯里化概念、实现原理和应用场景，希望对大家能有所帮助！函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。
2023-09-26 17:41:44
137
原创 vue3中两个el-select下拉框选项相互影响
label: '1月' ,label: '2月' ,label: '3月' ,label: '4月' ,label: '5月' ,label: '6月' ,label: '7月' ,label: '8月' ,label: '9月' ,label: '10月' ,label: '11月' ,label: '12月' ,disabled: false, } , ] //把方法和数据返回出去 return {
2023-09-21 17:28:41
625
原创 vue3+vite3项目打包优化
Vue项目开发完毕后，对项目进行打包发布之前，必不可少的操作就是项目优化，这也是程序猿的加分项。跟随本文的脚步来看看如何对项目进行优化吧！
2023-09-20 10:21:27
1468
原创 vue3 + vite3 addRoute 实现权限管理系统
在权限系统开发中，根据后端返回的菜单列表动态添加路由是非常常见的需求，它可以实现根据用户权限动态加载可访问的页面。本篇文章我们将重点介绍动态添加路由的全过程。
2023-09-19 10:54:23
879
原创 手把手搭建Vue3+Vite项目模板
本项目是一个基于Vite3搭建的Vue3项目模板，集成了TypeScriptESLintPrettierStylelintHuskyCommitlintpnpm包管理工具、Vue RouterPiniaSVG图标配置、SASSAxios等等。运行环境：VSCodeNode16+VSCodeTypeScript。注意：需要关闭Vetur插件。
2023-09-15 17:30:32
504
原创 vite和webpack的区别
Webpack和Vite是现代前端开发中非常重要的工具，有助于改善开发者的工作流程和提高生产力。从底层原理上来说，Vite是基于esbuild预构建依赖。而esbuild是采用go语言编写，因为go语言的操作是纳秒级别，而js是以毫秒计数，所以vite比用js编写的打包器快10-100倍。下面这篇博客将对比Webpack和Vite的区别，并探讨在什么样的项目中选择哪一个工具。综上所述，Vite和Webpack都是构建Web应用的工具，它们在开发模式、打包效率、插件生态、配置复杂度和热更新机制方面存在差异。
2023-09-14 22:31:22
1131
原创 vue3中使用viewerjs实现图片预览效果
viewer.js支持移动设备触摸事件支持响应式支持放大/缩小支持旋转（类似微博的图片旋转）支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式（可做屏保）支持缩略图支持标题显示支持多种自定义事件GitHub。
2023-09-06 15:07:27
1417
原创 js判断对象是否为空对象的方法总结
在面试或者开发过程中，我们经常会遇到这样一个问题——如何判断一个对象是否为空对象？下面让我们一起来总结一下吧！
2023-08-30 23:13:21
625
原创 详解vue3中ref和reactive用法和区别
ref和reactive是Vue3中用来实现数据响应式的API，一般情况下，ref定义基本数据类型，reactive定义引用数据类型。<template>})})const { data } = await getTableDataApi(queryParams) // 模拟接口获取表格数据</script>以我们常用的表格数据举例，可以看到，ref定义数组与定义基本数据类型没什么差别，接下来看看reactive<template>})})
2023-08-29 22:34:51
1145
原创 十分钟，带你了解 Vue3 的新写法
本文的目的，是为了让已经有 Vue2 开发经验的 人 ，快速掌握 Vue3 的写法。因此， 本篇假定你已经掌握 Vue 的核心内容 ，只为你介绍编写 Vue3 代码，需要了解的内容。好了，对于快速上手 Vue3 来说，以上内容基本已经足够了。这篇文章本身不能做到帮你理解所有 Vue3 的内容，但是能帮你快速掌握 Vue3 的写法。如果想做到对 Vue3 的整个内容心里有数，还需要你自己多看看 Vue3 的官方文档。
2023-08-23 10:46:44
132
原创 vue3父子组件相互调用方法详解
在vue3项目开发中，我们常常会遇到父子组件相互调用的场景，下面以setup语法糖格式详细聊聊父子组件那些事儿。
2023-08-20 21:46:58
2203
2
原创 vue3 基于element plus对el-pagination进行二次封装
在vue3项目中，如果每个列表页都敲一遍分页方法，显然是不合理的，那么，下面我将基于element plus对el-pagination进行二次封装，使用vue3语法糖格式，废话不多说，开干。
2023-08-20 20:29:55
1046
原创 vue3中hooks用法详解
hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks还真是函数的一种写法。vue3借鉴开发出了，所以也就意味着也能进行自定义封装hooks。vue3中的hooks就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实hooks和vue2中的mixin有点类似，但是相对mixins而言，hooks更清楚复用功能代码的来源, 更清晰易懂。
2023-08-02 17:27:10
1432
原创 一次电路和二次电路的区别
目前，一次电路和二次电路的区别在当代的应用可谓是越来越广泛，一次电路和二次电路的区别是值得我们好好学习的，现在我们就深入了解一次电路和二次电路的区别一次电路和二次电路的区别 一次电路主电路也叫一次电路，它是从电源到负载输送电能时电流所经过的电路。一次电路中的各种电气设备叫一次设备，它们包括了各种开关、断路器、接触器、熔断器和用电设备；二次回路中的各设备叫二次设备，它们包括各种控制开关（如按钮等），继电器、接触器的线圈和辅助触点、信号灯、测量仪表等。
2023-08-02 09:28:46
1389
原创 ES6：Generator函数详解
从另一个角度看，也可以说 Generator 生成了一系列的值，这也就是其名称的来历(在英语中generator”这个词是“生成器”的意思)。上面的代码中，函数 f 如果是普通函数，在为变量 generator 赋值时就会执行。方法时，内部的指针就会从函数的头部或上一次停下来的地方开始执行，直到遇到下一个。方法等于该对象的遍历器对象生成函数，调用该函数会返回该对象的一个遍历器对象。函数运行的不同阶段从外部向内部注入不同的值，从而调整函数行为。上面的代码已经把回调函数改成了直线执行的形式，但是加入了大量。
2023-07-29 19:19:54
850
原创 git远程一个分支对应本地两个分支推送
这样，两个本地分支都会被推送到远程仓库中的同一个远程分支。请确保在执行这些命令之前，你已经将对应的本地分支进行了合适的提交。
2023-07-27 10:12:53
523
原创 Vue实现柱状图横向自动滚动
原理：通过定时器修改Echarts的配置（options）达到我们想要的效果。此外，我们还需要了解Echarts中dataZoom这个组件，这个组件用于：用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。简单来说就是，在数据量多的时候，既能保持Echarts美观度，也能让用户自由查看所有数据。在dataZoom组件中有三种类型，在本次需求中，使用的是内置型数据区域缩放组件（dataZoomInside）。
2023-07-27 09:39:39
635
原创 ES6：Object.assign方法详解
首先了解下Object.assign()是什么。我们先看看ES6官方文档是怎么介绍的？Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。注意：Object.assign() 方法至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。
2023-07-24 10:18:28
2435
原创 小程序生命周期
onHide 事件是小程序的一种隐藏事件，当小程序被用户隐藏或者关闭时，该事件会被触发。通常，你可以在 onHide 事件中处理小程序的隐藏逻辑，例如保存用户数据或者关闭小程序的界面等。onReady 事件在小程序准备好渲染时发生，该事件通常用于渲染小程序的界面和数据。例如，你可以在 onUnload 事件中删除小程序的缓存或者关闭小程序的界面。需要注意的是，小程序的 onHide 事件不会在用户手动关闭小程序时触发，只会在小程序被自动隐藏或者关闭时触发。组件生命周期 有 3 个重要的生命周期。
2023-07-19 16:06:38
1212
原创 uin-app 的条件编译（APP-PLUS 、H5、MP-WEIXIN ）
uni-app不止是处理js，任何代码都可以多端条件编译，才能真正解决实际项目的跨端问题。举例，微信小程序主题色是绿色，而百度支付宝小程序是蓝色，你的应用想分平台适配颜色，只有条件编译是代码量最低、最容易维护的；关键在于项目里，复用的代码多还是个性的代码多，正常都是复用的代码多，所以仍然应该多端。而个性的代码放到不同平台的目录下，差异化维护。条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE；
2023-07-12 09:25:28
934
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人