- 博客(41)
- 收藏
- 关注
RSS订阅原创 二次封装el-upload组件包含文件上传进度条、复制粘贴上传等的功能
1. 支持图片上传进度条2. 支持粘贴上传图片行为3. 支持最大图片上传数量4. 支持图片大小限制5. 支持图片类型限制6. 支持图片预览。
2024-01-17 16:32:55
1137
原创 display布局实现一侧的盒子高度与另一侧盒子的高度等高
实现两边容器的高度等高主要是用 align-items: stretch 这个属性。stretch 拉伸: 子元素没有高度或高度为auto，将占满整个容器的高度。
2024-01-16 17:17:25
1093
原创 用el-image-viewer实现全局预览图片
其实就是把根组件的图片预览显现，和调用预览方法 都是交给状态管理控制的，这样就用el-image-viewer 实现全局预览图片的功能。
2024-01-16 15:02:41
2077
原创 vue3实现element table缓存滚动条
对于后台管理系统，数据的展示形式大多都是通过表格，常常会出现的一种场景，从表格跳到二级页面，再返回上一页时，需要缓存当前的页码和滚动条的位置，以为使用keep-alive就能实现这两种诉求，实际开发的时候，才发现。keep-alive组件是不会缓存滚动位置的。在二次封装的列表组件中，监听。先使用keep-alive。生命周期，设置表格的滚动条。
2023-11-27 15:21:58
900
原创 js实现数组的上下移动
表示index索引位置增加1。使用数组的splice方法实现。例如上移：splice('元素当前索引位置'，1(删除1个元素)，‘元素当前索引位置 - 1’)。表示index索引位置减去1，
2023-11-24 09:55:15
279
原创 ElementPlusError: [ElOnlyChild] no valid child node found
查了下原来是这里导致的，只需要把v-if 挪到popover那层即可。突然发现页面报了一堆黄色的错误提示。
2023-11-23 13:57:48
798
原创 ts实现合并数组对象中key相同的数据
构造 [ { parent: "xx", child: [ { xx }, { xx } ] } ] ，需要传入数据源，匹配合并的键。前端展示时需要归类展示 ，因此需要构造 类似[{parent: "xx", child: [{xx},{xx}]}] 这样的数据。在平常的业务中，后端同学会返回以下类似的结构数据。
2023-11-22 09:32:06
906
原创 vue3+vite使用import.meta.glob实现自动引入文件全局注册
在components的文件下新建global文件夹，这里文件夹表示是全局的组件文件，"以往在vue中注册全局组件，都是需要先手动引入需要注册全局组件的文件，然后挨个注册，在global文件下建一个index.ts文件，是全局组件入口页面。这样就实现了在global文件下的vue文件自动引入全局注册了。缺点就是需要频繁的手动引入手动注册，重复的机械工作。
2023-11-21 09:53:39
1117
原创 Vue3在axios中控制loading
以往在请求接口时，常用的写法是在请求前打开loading状态，请求接口完后再去设置loading的状下面以局部loading + element形式实现态为false，繁琐的代码，需要频繁的手动去更改loading的状态。主要的思路就是，把loading当作一个配置项传递给api，在axios的请求拦截器中展示loading，在axios的响应拦截器中取消loading。通过以上的思路，还可以去拓展实现全局的，按钮的loading...下面以局部loading + element形式实现。
2023-11-20 17:20:53
565
原创 实现el-input-number数字框带单位
实现的效果展示，可以是前缀单位，也可以是后缀单位。实现的思路就是动态修改伪元素 ::before 和 ::after 的 content值。
2023-11-20 09:35:03
1522
原创 当自定义指令遇到keep-alive (vue3)
近期在实现权限指令时，出现了诡异的bug，在切换页面时，传入的权限值是混乱的，导致页面出现丢失按钮的情况。查了下发现是由于开启了keep-alive页面缓存导致的，因此需要在deactivated，activated这两个生命周期对权限指令绑定的值做重置处理。
2023-11-15 09:04:30
188
原创 使用css实现表格中数据为空时的默认展示
那当然也会遇到需要使用自定义默认内容，数据也存在空的状态，如果只用以上的样式是起不到效果的， 可以根据自己的需求通过审查元素改造下，方式都是一样的。前端人员一般会写一个公用处理无数据情况的方法，或是使用逻辑或( || )的表达式来转换无数据的情况。针对实现数据的空处理如果大家有更好的办法欢迎提出，大家一起学习，一起进步 👏👏。解决的办法有很多，我会例举2种常用的方法，以及推荐一种用css的方式去实现。从以上的方法不难看出，无一例外都需要去自定义默认的内容，编写重复的表达式。最终实现的效果都是一致的。
2023-04-16 16:17:14
1319
原创 Vue中动态显示modal的优化写法
在写后台管理系统的业务中，列表页常常会需要控制新增或编辑的弹窗显现，那一般弹窗都会以组件的方式引入到页面，如何去动态控制组件内的弹窗显现呢？实现虽然很简单，但是在这我用了另一种写法去控制弹窗展示，仅凭个人理解去实现，如果我的理解有误或者思路不对，请大家指出或者想听取大家更优的解决方案🙏。以上只是个人对如何更好的控制弹窗的实现做的一些其他思考，如有更好的方法希望大家提出，一起学习，一起进步！下面的演示是基于 vue + ant-design-vue 实现。
2023-02-25 18:40:55
719
1
原创 Vue—使用canvas实现电子签名
实现签名的功能听着很复杂，其实很简单。使用canvas辅助的API和监听鼠标相关事件即可实现。思考：1、如何使用canvas画线？2、如何判断在提交签名时判断是否有签名？3、如何将canvas 转成的base64转成File文件对象传给后端？1.绘制直线ctx.strokeStyle = "#000" // 设置线条颜色ctx.lineWidth = 2 // 设置线条宽度ctx.beginPath() // 开始绘图路径ctx.moveTo(x, y) // 将输入的坐标移动至直线起点。
2022-12-15 22:25:38
2371
1
原创 记录使用vue-i18n实现项目的双语国际化
本文是使用vue2.x + ant-design-vue 搭建的项目，对于框架使用不会做过多的说明以下是需要思考的问题1、如何使用vue-i18n？2、互译的语言数据存放在哪里合适？3、ant-design-vue如何国际化？4、如何全局监听切换了语言？5、语言的不同如何兼容样式？
2022-12-15 13:52:37
1583
原创 sku排列算法实现商品规格属性组合
前两年做过一个电商系统的新建商品模块，记忆中比较有难点的是在新增商品的sku规格时，需要把每个规格名称下的规格属性一一组合起来。因此在这里稍微的写个小demo记录下这种规格属性组合的思路😁。sku排列算法 -- 将二维数组使用扩展运算符传入参数，调用数组的reduce循环，在内部使用双重循环concat拼接后存储到全局变量中。将sku集合的属性列表 -- 集合成这样的格式[ [ {...},{...},...],[{...},{...} ] ] 二维数组的数。构造渲染的表格数据，调用排列sku的方法。
2022-12-12 20:04:19
2785
原创 WebSocket的心跳机制和断线重连
心跳机制的实现，在客户端连接成功的回调中即开启心跳。心跳处理函数内部使用定时器延时触发向服务端发送消息的方法，待服务器将消息返回证明是连线成功状态下，继续调用心跳检测方法。如果客户端给服务端发送心跳消息，在定义的超时时间后客户端没有收到回复，则说明和服务端断线了,此时会触发到客户端连接关闭的回调函数，在此回调中发起重新连接websocket。
2022-12-12 01:17:30
22728
2
原创 使用node简单搭建websocket服务器
客户端通过定时器，每隔一段时间就会主动发送请求给服务器，这无疑是会耗很多的流量和带来网络宽带的问题；而websokcet实时性更强，当服务器和客户端之间交换数据时更少的控制开销。但是websocket协议最大的特点是服务端可以主动向客户端推送消息，客户端也可以主动向服务器发送消息。目前来说，我在工作中用到websocket的主要场景是：需要实时轮播通告用户订阅的消息，实时的图表数据展示。当然还有应用最广泛的是使用websocekt实现聊天室功能，这个还没玩过😂，有时间可以试试。后续单独详说这部分。
2022-12-11 17:04:26
4424
1
原创 intersection observer之初认识
以往，判断某个元素是否进入了“视口”，传统的方法都是监听“scroll”事件，调用某元素的getBoundingClientRec()方法获取位置信息来判断是否在视口内，但是由于scroll事件密集发生，计算量大容易导致性能问题。浏览器原生提供的IntersectionObserver API ，可以“自动观察”元素是否是可见，由于可见的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。mdn文档：Intersection Observer - Web API 接口参考 | MDN
2022-12-07 20:52:24
562
原创 ECMAScript新特性
模板字符串// 可支持换行const msg = ` hey boy `// 支持插值表达式const name = 'zsl'const msg2 = `hey ${name} -- ${1 + 1} --- ${Math.random()}`console.log(msg2) // hey zsl -- 2 --- 0.7603014058103252// 可以在定义模板字符串之前添加一个标签//
2022-05-24 23:06:35
349
原创 ECMAScript新特性 - 数组、对象解构
数组的解构const arr = [100, 200, 300]// 正常写法 const foo = arr[0]const bar = arr[1]const bar2 = arr[2]console.log(foo, bar, bar2)// 解构const [foo, bar, bar2] = arrconsole.log(foo, bar, bar2) // 100 200 300const [, , bar2] = arrconsole.log(bar2) //
2022-05-21 23:21:06
139
原创 ECMAScript新特性- let、const
var、 let、const 的区别1、var是ES5提出的，let和const是ES6提出的。2、let和var声明的是变量，声明之后可以更改，声明时可以不赋值； const声明的是常量，一旦声明必须赋值，并且声明后不能再修改；但如果声明的是复合类型数 据，可以修改其属性。/* const 在声明的同时 就必须要设置一个初始值 声明和赋值不能像var那样 分开...
2022-05-21 21:53:30
211
原创 ECMAScript新特性-前言
ECMAScript 概述ECMAScript 也是一门脚本语言，一般缩写为ES，通常看作JavaScript的标准化规范。实际上JavaScript是ECMAScript的扩展语言，因为ECMAScript只是提供了最基本的语法，就是约定了代码该如何编写，例如该怎么去定义变量和函数，或者怎么写分支循环值类的语句，只是停留在语言层面，并不能完成实际的功能开发。而JavaScript实现了ECMAScript语言的标准并且在基础之上做了拓展，使得可以在浏览器环境中去操作DOM和BOM，在node环境中可以
2022-05-21 15:50:22
285
原创 javascript异步编程之Promise
Promise 概述Promise，一种更优的异步编程统一方案如果我们直接使用传统回调的方式去完成复杂的异步流程，就无法避免大量的回调函数嵌套，这也就会导致回调地狱问题。为了避免回调地狱的问题，CommonJS社区率先提出了一种Promise的规范，目的就是为异步编程去提供了一种更合理，更强大的统一解决方案，后来在ES2015当中被标准化，成为语言规范。所谓的promise其实就是一个对象，用来表示一个异步任务最终结束过后它究竟是成功，还是失败。就像是内部对外界做出了一个承诺，一开始的承
2022-05-19 23:10:52
2094
原创 javascript异步编程之回调函数
所有异步编程的方法根本就是回调函数。回调函数可以把它理解成一件你想要做的事情，你明确知道这件事情该怎么做，怎么一步一步的往下做，但是你并不知道这件事情所依赖的任务什么时候才能完成，所以说最好的办法把你这件事情的步骤写到一个函数当中，交给任务的执行者，这个异步任务的执行者它是知道这个任务是什么时候结束的，那他就可以在结束过后去帮你执行你想要做的事情，这件想要做的事情呢，其实我们就可以理解成回调函数。以ajax为例，调用ajax操作，目的是为了拿到请求结果过后做一些事情，例如显示到界面上，但是这个请.
2022-05-19 22:56:57
783
原创 javascript异步编程之执行模式
为了解决耗时任务阻塞的这种问题，JavaScript的语言将任务的执行模型分成了两种同步模式（Synchronous） 异步模式（Asynchronous）一、同步模式同步模式指的是代码当中的任务依次执行，后一个任务必须要等待前一个任务结束才能够开始执行；程序的执行顺序跟我们代码的编写顺序是完全一致的，也就是说这种方式会比较简单；那在单线程情况下，我们大多数的任务都会以同步模式去执行，注意这里所说的同步并不指的的是同时执行，而是排队执行。同步模式的图栗
2022-05-18 22:29:16
211
原创 javascript异步编程之单线程模式
众所周知，目前主流的javascript的环境都是以单线程的模式去执行js代码一、采用单线程模式工作的原因？这与最早的设计初衷有关，最开始javascript就是一门运行在浏览器端的脚本语言，它的目的是为了用来去实现页面上的动态交互，而实现页面交互的核心就是dom操作，那这也就决定了它必须使用单线程模型，否则就会出现很复杂的线程同步问题；我们可以试想一下，假定我们在JavaScript中同时有多个线程一起工作，那其中一个线程修改了某一个dom元素，而另外一个线程同时又删除了这个元素，那此使我们的浏览
2022-05-18 22:13:58
256
原创 周期扣款产品 相关支付宝文档
周期扣款产品 相关支付宝文档https://opendocs.alipay.com/open/20190319114403226822/quickstarthttps://opendocs.alipay.com/pre-open/01o4xwhttps://opendocs.alipay.com/support/01rg2ihttps://opensupport.alipay.com/support/knowledge/50249/201602487537https://opendocs.alip
2022-05-12 14:51:56
68
原创 mac如何安装MongoDB
**本文使用的命令行来安装**一、下载安装打开官网：MongoDB Community Download | MongoDB点击copy link复制链接如：https://fastdl.mongodb.org/osx/mongodb-macos-x86_64-5.0.7.tgz在电脑中打开终端 输入目标文件 如：cd/Users/zhangshuangli/local 进入目录输入sudo curl -Ohttps://fastdl.mongodb.org/osx/m...
2022-04-18 21:43:08
1881
1
原创 收藏的好用链接
30 seconds of codehttps://www.30secondsofcode.org/You-need-to-know-csshttps://lhammer.cn/You-need-to-know-css/#/zh-cn/mouse-cursorip33.comhttp://www.ip33.com/Unicode编码解码http://www.ip33.com/unicode.htmlURL Encode/Decodehttp://www.ip33.com/urlencode
2022-03-25 17:36:11
440
原创 moment.js常用方法
获取当前时间moment().format("YYYY-MM-DD")获取本周的开始日期 - 结束日期// 如当前是2021-3-23 则本周开始日期2021-03-21 结束日期2022-03-27getWeek() { const weekOfday = moment().format("E"); const startTime = moment() .subtract(weekOfday - 1, "days") .format("YYYY-MM-DD");
2022-03-23 17:56:42
1377
原创 好用的js方法
获取图片的第一个像素点颜色 (可作用于背景颜色)/** * @description: 获取图片的第一个像素点颜色 * @param {*}url/图片地址 * @return {*} */export const getColor = (url) => { return new Promise((resolve, reject) => { if (!url) { reject("url不能为空") } .
2022-03-01 17:03:25
312
原创 手写Promise源码
分析Promise里面的核心方法从new Promise可得出，Promise就是一个类，在执行的时候需要传递一个回调函数进去，这个回调函数称之为执行器，这个执行器会立即执行，也就是说当new Promise的时候这个回调函数会被立即调用Promise中有三个状态分别为： 成功(fulfilled) 失败(rejected) 等待(pending)pending -> fulfilledpending -> rejected一旦状态确定就不可以更改执行器上有
2021-04-11 17:31:36
161
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人