- 博客(41)
- 资源 (16)
- 收藏
- 关注
RSS订阅
原创 代码之外:我在2024年的前端人生探险之旅
工作和人生产生交织，年轻人的心路历程，迷茫？清醒？人生不只有工作，全球经济碰撞下，当代年轻人的缩影...
2024-12-09 14:03:58
508
原创 探索 Vue 3 中 vue-router 的 router.resolve () API
当我们在 Vue 3 应用里需要明确某个路由地址对应的详细信息时，它就能派上用场。我们给它传入路由信息，像路径、参数等，它会解析出对应的路由对象，这个对象包含了最终的 URL、要渲染的组件等关键信息。有时候，我们可能需要提前知晓某个路由对应的组件是什么，或者它是否有嵌套路由等信息。参数，它能为我们生成准确无误的 URL，避免手动拼接路径可能产生的错误。想象一下，我们的应用有一个商品详情页面，路由路径是。假设我们的路由表是这样的。
2025-04-11 17:47:28
695
原创 自定义指令--【v-lockScroll】用来锁定滚动条
于是，思考过后，发现我们自己封装一个自定义指令,在组件展示的时候将滚动条给锁定+隐藏，问题就解决了。最近在开发业务上，遇到了自己封装的modal组件，组件弹出的时候，会覆盖到页面最上层。但是覆盖出现了，而页面底层的滚动条还可以滑动，这样对用户就不是很友好了。unmounted时候将body的overflow和宽度复原到最初。这个时候当我们再次打开组件时候，页面的滚动条就被禁用了。滚动条的宽度=浏览器窗口宽度 - 文档内部宽度.
2025-03-29 10:53:56
512
原创 第三方库XLSX: 前端上传excel文件，并对excel文件内容做校验。
大家好，我是喝西瓜汁的兔叽，今天给大家分享前端上传excel文件给后端,并且对excel的内容进行检验的需求。
2025-02-18 11:09:05
681
原创 Vue3中修改父组件传递到子组件中的值(全网少有)
/此处是父组件中引入的子组件 < ChildrenView v - model : num = "num" / > //定义数据 let num = ref(10);//定义num为10,传递给子组件< script setup > //子组件接收父组件传递过来的数据 let props = defineProps({});
2024-12-09 14:40:04
8862
3
原创 使用Vite搭建vue3+TS项目
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它具有快速的冷启动，不需要等待打包操作；并且官网说是下一代的前端构建工具。
2024-12-09 14:39:49
3727
原创 避大坑！Vue3中reactive丢失响应式的问题
避开直接赋值和结构，reactive直接包裹一个对象。简单数据类型使用ref()来进行定义。
2024-12-09 14:35:42
11018
8
原创 解决右键打印html只能识别1页的问题
hello,大家好久不见,昨天在开发中遇到了一个问题,就是在自己开发的网页中右键-->打印，由于页面内容过多，打印出来的内容只被识别到一页。针对这一问题，查阅了好多资料最终解决啦。
2023-08-16 09:46:16
13196
8
原创 一篇文章让你彻底学会--节流（并且自己可以手写）
Hi,有的小伙伴们在面试的时候会被要求手写，很多都被难着了吧，宝贝，那你你没有理解节流函数。今天，就让我带你攻克它！
2023-04-23 09:40:14
1124
原创 vue3中使用base64加密(两种方法)
Hi,今天分享一个在vue中使用base64对用户名、密码进行加密的小案例。我们是可以有两种方法的：1.使用插件:js-base642.引入文件。
2023-04-17 11:45:33
6907
原创 antd-vue中树结构显示 在线数/总数，实现在线人员绿色高亮，排序在前。（超难）
antd-vue中树结构显示 在线数/总数，实现在线人员绿色高亮，排序在前。最近开发中，遇到了一个需求，需要使用到antd-vue下的Tree组件。需要实现的功能点如下：1.树结构是部门的组织机构，包含的有部门内容和人员。2.每个树节点标题需要显示（在线人数/总数）的格式。3.对于在线人员，需要图标点亮，并且排序在最上方展示。对于离线人员，需要图标暗掉。
2023-03-02 15:21:46
1710
1
原创 导出Excel表格(调用后端接口方式)
在开发中我们会遇到导出Excel表格的需求，但是导出分为前端生成和后端生成。前端生成的方式CSDN其他小伙伴已经做出了很多教程，是依赖xlsx插件。但是，今天我讲的是，调用后端接口的方式生成Excel表格。
2023-02-14 09:05:28
2543
原创 antd-vue的修改树选择器treeData的属性名(递归实现)
在项目开发中，使用了antd-vue中的树选择器，但是antd-vue的树选择器的treeData的键值对是title和value.但是我们后台给的数据是title和key,这就对应不上了，所以需要我们递归修改一下数据即可。
2023-02-14 08:48:09
1454
原创 重磅！！！Vue3中的响应式语法糖(官网更新)
ref()其实,$ref()的使用就是这么简单，我们只需要注意:每一个会返回 ref 的响应式 API ($ref、$computed等)都有一个相对应的、以 $ 为前缀的宏函数。当遇到解构/直接赋值时，响应式都会丢失！！！栗子1：hooks解构出的响应式。
2023-02-07 14:52:27
3089
3
原创 日常避坑--input输入框type=number仍可以输入“e“,“.“等符号
input输入框type=number仍可以输入"e","."等符号
2023-02-02 09:53:08
1737
原创 数组中reduce方法详解
1.首先我们要明白redeuce是干什么的？2.我们再要明白什么时候用reduce?答:reduce在业内统称为数组的累加方法。我们一般会在1.数组求和，求乘积2 . 计算数组中每个元素出现的次数3 . 数组去重4 . 数组扁平化（将二维，或者多维数组转化为一维数组）等等等等使用reduce。说白了,基本上数组方法能做的事情，reduce都能做.
2023-01-31 11:57:54
816
原创 可视化大屏--响应式适配解决方案flexible.js
我们先下载flexible.js插件(在工程化时代之前，人们都是下载的flexible.js文件，工程化之后，我们依赖npm等包管理工具进行下载)那么，在可视化大屏的基础上，我们肯定是要适配所有的屏幕设备，不能出现一换电脑，样式就紊乱的情况。1.找到node_modules下的lib-flexible下的flexible.js。so,我们也不需要自己写媒体查询了，有现成的flexible.js的插件。最近公司开了第二个项目，是一个可视化大屏。2.修改对应代码为以下代码。然后重启Vscode即可。
2022-11-24 09:42:08
1580
3
原创 WebGL--Vue+openlayers实现绘制多边形并且计算出多边形内有多少物体数量
如果使用法二，请删除data中的polygonPoints。法一：自己写的isAtRegion（）函数。methods中的isAtRegion（）
2022-11-22 17:42:17
849
原创 WebGL--vue+openlayers实现覆盖物＋popup
最近公司有需求，需要用到openlayers实现在地图上面绘制多边形，并且轨迹回放，实现弹出框，国内资料太少了，所以在这里放上openlayers的学习教程以及这个案例的代码。
2022-11-22 17:31:30
787
原创 vue中深度选择器
例如你使用了ElementUI的走马灯（轮播图）组件，你想修改其中的样式，但是你设置样式不起作用，这个时候就是因为组件的scoped的影响，所以，不妨试试我们的深度处理器吧。为了防止在一个组件内引入了子组件，而子组件没有加scoped。我们可以看到,子组件加了scoped后,父组件对h3的css样式就不会影响到子组件,如果子组件没加scoped，就会影响到也变成红色。scss: ::v-deep（如果使用了预处理器都可以使用这个(::v-deep 如果使用了预处理器都可以使用。
2022-11-04 20:33:11
5310
原创 antd-vue中的表格排序
在使用antd-vue的表格想实现排序，但是不知道怎么弄的可以看这里，此处讲解了一个是数字类的排序（例如成绩），一个是字符串类的排序(例如姓名)。对于数字类型的排序更简单了，我们只需要直接return出a-b即可,此处以上图卡号为例.首先，antd的官方说了，在定义列columns时，里面有一个sorter排序，如图，我们要实现对字符串的排序，按照设备类型进行排序。,下面是定义列的数据格式。
2022-10-27 10:26:41
2597
原创 antd-vue中的下拉选择框搜索失效的问题
Hi,最近在开发中(vue3+TS)遇到了antd-vue中的下拉选择框，案例说看官方文档就能实现的，但是这个选择框自带了搜索功能，最后搜索功能失效。
2022-10-21 14:20:38
3515
原创 好久不见呀！封装的格式化时区时间来啦！
hello,好久不见,今天开发时候遇到了一个后台返回来的时间格式的数据,本来想用dayjs进行格式化,可是最后也没有头脑,于是就有了下面的函数，快用起来叭！对于这么懒的后端,我们也不必吐槽，自己动动小手就解决啦。首先在我们的utils文件下新建format.js文件夹。
2022-10-18 15:41:52
414
原创 微信小程序的登录功能
7.前端再把phone和openid给后端存在数据库,将openid存储在本地存储,再次进来时,查询本地存储是否有openid(在生命周期onShow中先获取本地存储再判断)，利用openid发起查询,再显示出来即可。3.后端调用TX的开放接口将appid,secrect与code发送,把收到的openid与session_key发送给前端。4.前端再把openid,session_key,iv,encrypteData发送给后端,让其进行解密。1.前端需要调用wx.login()获取code。...
2022-07-29 17:54:08
617
原创 商城详情页的开发
3.给scroll-view设置高度,需要获取到屏幕的高度,在app.json里用this.getSystemInfo(),思路同适配。索引与类名保持一致,方便以后来处理，此处需要使用id来获取，而不是class[在小程序中,scroll-view的时间也要求id命名]1.利用scroll-view的scroll-into-view//根据id选择器,跳转到对应的子元素.2.根据在首页列表点击的商品id传送至详情页,详情页再根据id发送起请求，再把数据渲染。//点击获取对应的id选择器。...
2022-07-29 17:22:20
714
原创 购物车的实现
用map方法遍历购物车数据,让里面的shop_select等于当前data的selectAll,再用1个map遍历item(店铺)下的children(商品),修改is_goods_select为当前的selectAll。循环遍历整个购物车数据,如果整个数据下有shop_id等于当前cart下的shop_id,用every遍历当前店铺数据下的children(产品)的goods_is_select是否为true,是的话店铺选中。让当前店铺下的is_shop_select取反,保证点击实现选中与未选中切换。.
2022-07-28 21:41:07
779
原创 vue实现登录功能
4.客户端收到Token以后可以把它存储起来，比如放在Cookie里或者localStorage里。\6.服务端收到请求，然后去验证客户端请求里面带着的Token，如果验证成功，就向客户端返回请求的数据。\3.验证成功后，服务端会签发一个Token，再把这个Token发送给客户端。\5.客户端每次向服务端请求资源的时候需要带着服务端签发的Token。\2.服务端收到请求，去验证用户名与密码。\1.客户端使用用户名跟密码请求登录。......
2022-07-26 15:06:50
3163
原创 常用的代码片段
vue3的代码神器移动端的base.csssrc–styles–base.cssApp.vue中引入设置项目自启动vue.config.js中:vue代理跨域vue.config.js中:可视化服务项目的flexable.jssrc–utils–flexable.js
2022-06-27 14:15:39
353
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人