- 博客(40)
- 收藏
- 关注
RSS订阅原创 使用Vite搭建vue3+TS项目
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它具有快速的冷启动，不需要等待打包操作；在tsconfig.json文件中添加配置（下图打注释的都是添加的，也可自己丰富，其中只打//的是@配置，其余是其他配置）我们还可以安装ElementUI-plus和状态管理Pinia,这些我们只需要去对应的官网有指导安装。1.src下创建router文件夹,新建index.ts。1.新建utils–request.ts。2.新建api文件夹，xxx.ts。修改vite.config.ts。
2025-03-21 14:58:28
267
原创 前端怎么打断点，debugger使用教程
提醒一句：对有异步代码的文件进行断点时有个小提醒，可能你在断点的情况下正常运行了，但不断点的情况下就不正常了，这时候就要想到异步的时机问题，可能断点的时候异步就执行完了。如果我们对比一下，“下一步（Step）”命令会进入嵌套函数调用并在其第一行暂停执行，而“跨步（Step over）”对我们不可见地执行嵌套函数调用，跳过了函数内部。代表 “下一步（Step）”：运行下一条指令，快捷键 F9。第二个按钮是进行下一步，也就是执行下一个逻辑，又或者说，【按逻辑（比如会遇到 if 那些）去执行下一行代码】。
2025-03-07 10:25:24
532
原创 lodash-实用库及常用方法
sortBy方法接受两个参数，第一个参数是需要排序的数组，第二个参数是一个字符串或数组，用于指定排序的条件。如果第二个参数是数组，则先按照第一个元素指定的属性进行排序，然后按照第二个元素指定的属性进行排序。需要注意的是，sortBy方法默认按照升序排序，如果需要按照降序排序，可以传入第三个参数为true。chunk()：将数组（array）拆分成多个指定长度的区块，并将这些区块组成一个新数组。map()：创建一个新数组，数组中的元素是通过调用提供的函数在原始数组上产生的结果。如果路径不存在，则会自动创建。
2025-01-08 13:18:44
574
1
原创 uni-app引入字体图标详细步骤
进入你引入的字体图标中的iconfont.css中注意下下图标红的地方路径需要修改一下就好了。之前自己在学习中不会引入矢量图，在网上搜索方法，没找到一个详细的，自己动手记录一下。iconfont必须加上，iconfont后面的类名就是你要使用的字体图标的类名。3、将文件中的六个文件放进项目里面，就是下面截图的那六个即可。在下载的字体图标的文件中店家那个html文件进入如下页面。static：就是存放字体图标的文件的文件夹。1、在案例矢量图官网选择需要的图标进行下载。icon：是字体图标的文件夹。
2024-12-17 14:40:54
408
原创 两数组根据数组中每条数据对象中的某个值合并去重
假设有两个数组：arr1 和 arr2，并且每个数组中的元素是对象，你希望根据对象中的某个属性（比如 id），判断 arr2 中是否已经存在具有相同 id 值的对象。在这个例子中，arr1 中有 id 为 2 的对象，arr2 也有 id 为 2 的对象，因此不应该新增这个对象。当数据量较大时，使用 Set 来记录 arr2 中已存在的 id 值，可以减少 some 方法的遍历时间，提高性能。遍历 arr1 中的每一个对象，使用 some 方法检查 arr2 中是否有相同 id 的对象。
2024-11-13 16:41:28
300
原创 uniapp uni-calendar日历实现考勤统计功能
根据日历组件代码结构 构成相应结构的状态统计数据 list 再遍历到每日的子组件中。根据每日的状态字段完成样式的判断，展示状态。
2024-11-08 10:10:00
813
原创 next-date-picker日历选择 日期多选 日期单选 自定义日历组件
https://ext.dcloud.net.cn/plugin?id=12562日期选择组件有四种模式：简单的年月日弹窗选择(mode=“simple”)日历弹窗选择多个日期（多选）(mode=“multiple”)日历弹窗选择单个日期（单选）(mode=“single”)日历弹窗选择区间日期（区间）(mode=“range”)示例代码vue3<template> <view> <next-date-picker
2024-11-04 13:27:11
261
原创 vue-virtual-scroller-展示大量数据列表-虚拟列表展示优化
vue-virtual-scroller 是一个 Vue 组件库，用于高效地渲染大量数据项，通过虚拟滚动来提升性能。vue-virtual-scroller 提供了许多其他选项和事件来定制你的滚动行为。item-size：每个项的高度或宽度（垂直滚动时为高度，水平滚动时为宽度）。page-mode：设置为 true 时，将使用窗口滚动而不是组件内滚动。min-item-size：项的最小尺寸，用于估计尺寸。buffer：设置缓冲区的大小，以便在滚动时提前加载项。items：要渲染的项列表。
2024-10-21 16:06:19
448
1
原创 vue钩子函数中使用async、await 注意点__Vue.js
3.我们常用的钩子函数 created、mounted 如果加了async,await,想要同步执行代码,代码必须放在同一个钩子函数里面。我们常用的钩子函数 created、mounted 如果加了async,await,想要同步执行代码,代码必须放在同一个钩子函数里面。2.钩子函数里使用async,await, 后面只能跟promise,否则加async,awiat没有意义。钩子函数里使用async,await, 后面只能跟promise,否则加async,awiat没有意义。
2024-09-13 13:42:26
527
原创 view design ui库 table 表头固定滑动滚动条
view design ui库 table 表头固定滑动滚动条后，刷新数据，固定表头恢复到最上端，非固定表头未恢复，初始时造成数据错位。在table 上加 :key=“Math.random()” 属性， 让table 组件 刷新。
2024-08-28 11:07:38
248
原创 HTML显示json字符串并且进行格式化
注意：如果需要转换的格式是字符串，就要进行：JSON.parse()转换，否则直接使用JSON.stringify()无效。通过pre标签进行格式化展示，使用JSON.stringify()方法转换。
2024-08-09 11:14:12
503
原创 JS导出复杂多级表头的Excel
根据表头描述 columns 生成全为空的表头二维数组，二维数组行数为 columns 中子项树的最深深度，列数为 columns 中所有子项树的叶子节点数之和。在二维数组剩余的部分（红框区域）中，左上角第一项填入title，并记录下横向合并的起终点偏移量，横向合并的数目为该项的children数组中所有节点的叶节点总数。在数组左上角第一项填入 title，合并单元格时需要向下合并所有单元格，记录下合并的起始和终点项的偏移量 {s:{r:0,c:0},e:{r:0,c:2}}标题的key为 title。
2024-07-25 14:55:04
1119
1
原创 javascript 最全的数组方法总结
indexOf() 和 lastIndexOf()unshift() 和 shift()join() 和 split()every() 和 some()push() 和 pop()reverse() 方法。concat() 方法。
2024-07-06 10:16:22
202
原创 css 伪类
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类就是可以通过直接添加一个类样式达到同等效果，而伪元素，则需要先添加一个元素，然后在元素上添加样式才能达到同等效果。找出相同一级中的li元素，然后再找出它们指定下标的那个元素,给它设置样式 ， （例子：如上），注意：下标从1开始的。:first-child 向元素的第一个子元素添加样式。:hover 当鼠标悬浮在元素上方时，向元素添加样式。
2024-06-21 13:28:26
330
原创 前端实现Excel导入和导出功能
SheetJS js-xlsx 是一款能够读写多种格式表格的插件，浏览器支持良好，并且能在多个语言平台上使用，目前在 github 上有 14k 个 star。最近项目中让实现一个导入导出Excel的功能，查找了一些插件后发现js-xlsx这个插件，所以就尝试使用了一下，这里将使用方法和遇到的问题简单记录一下。4.针对文件上传和读取结果分别做了对应的提示（这里使用 ant design 中的 message 组件）1.定义导出时需要使用的方法。1.定义导入时需要使用的方法。2.项目中使用导出方法。
2024-06-17 09:12:24
344
原创 前端如何实现分页
分页的思路：把所有的数据请求回来后，通过arr.slice(开始索引，结束索引)来进行截取每一页的数据；假设当前页是currentPage = 1，pageSize = 5，那么应该从(currentPage-1)先定义分页中需要用的三个值：currentPage（当前页码）、total（总条数）、pageSize（每页展示的数据量）pageSize结束，自己验证下，找到这样的规律后，就可以截取每一页的数据了；pageSize开始截取，到currentPage。
2024-05-16 14:12:36
372
原创 css解决数字字母自动换行
解决办法：加入样式 word-break:break-all或word-wrap:break-word，如图(3)和图(4)目的：最近在项目中遇到样式问题，在样式一样的两个div中，汉字会自动换行，但数字和字母不会换行。下面就来说解决的办法。2.从上面例子中可以看到数字和字母没换行。
2024-05-13 17:19:08
1151
1
原创 CSS3弹性盒布局方式
五、align-content：align-content 属性用于修改 flex-wrap 属性的行为，设置各行元素的在侧轴上的对齐。二、justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。三、align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。align-items： 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。六、align-self：设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。flex-wrap：用于指定弹性盒子的子元素换行方式。
2024-05-13 15:06:24
415
1
原创 moment.js 运用
9.获取去年今天的日期，格式以YYYY-MM-DD显示，即简便的获取去年今天日期的方法。2.任意时间戳格式化，以YYYY-MM-DD HH:mm:ss形式显示。例如:今天2018-7-23，获取到的时间是2018-7-18。7.获取上个月今天的日期，格式以YYYY-MM-DD显示。3.获取前一天日期，格式以YYYY-MM-DD形式显示。4.获取本周五日期，格式以YYYY-MM-DD形式显示。5.获取上周五日期，格式以YYYY-MM-DD形式显示。8.获取前一天日期，格式以YYYY-MM-DD显示。
2024-05-08 13:52:58
582
1
原创 uni-app u-collapse折叠版高度问题
1.给折叠版class,利用change事件监听折叠版展开。change事件 监听所有class类， 遍历并高度自适应。解决办法：监听每一次折叠版展开，并重新计算高度。问题：展开折叠版内容展示不全。
2024-04-10 10:44:18
1200
1
原创 项目运用实例
this.$set 数组对象渲染。2、根据数组中某个对象值去重。三元表达式和class共存。from:‘张三’,from:‘王二’,from:‘王二’,from:‘王二’,
2024-01-17 13:56:03
386
原创 nodejs卸载和安装教程
1、点击进入node.js各版本下载链接，下载node-v14.17.3-x64.msi。9、cmd进入命令行界面，输入node -v 显示node版本，输入npm -v显示npm版本，如果都能显示则安装成功。10、到目前为止，node的环境已经安装完成，npm包管理器也有了。因为项目需求，重装了3个版本的node.js，记录下完整过程，少走弯路少查资料。5、不需要选择或更换，默认安装，直接next，它会自动添加系统变量。1、Win菜单中找到Node.js的卸载程序，运行卸载程序。3、勾选协议，next。
2023-12-28 09:29:20
968
1
转载 vscod 插件
内含语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger等实用功能。ts的书写规范，这个插件是一个系列，同时还提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX。在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！新建一个.http文件，写下基本的测试代码，点击 Send Request即可在右边窗口查看接口返回结果，非常nice。
2023-11-30 10:59:13
447
原创 Js实现深拷贝的方式
概念深拷贝：在堆内存中重新开辟一个存储空间，完全克隆一个一模一样的对象；浅拷贝：不在堆内存中重新开辟空间，只复制栈内存中的引用地址。本质上两个对象（数组）依然指向同一块存储空间在这里插入代码片。
2023-11-23 10:19:13
56
转载 微信小程序--》从零实现小程序项目案例
🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。👀引言⚓经过web的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了微信小程序专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第一站就是小程序开发，希望看到我文章的朋友能对你有所帮助。今天借助黑马的本地生活案例，加强一下自己对小程序的学习，并将学习过程分享出来，希望能和以前学习的知识相互印证。
2023-11-23 10:06:33
211
原创 Css实现...省略号的效果 ---
本文分为单行省略号的实现和多行省略号的实现介绍：我们无论写练习或者写项目的时候，像用户名字过长或者文本信息过长需要用到省略号的效果，特此总结一下用法。提示：以下是本篇文章正文内容，下面案例可供参考1、单行省略号给div加上如下样式div{效果就达到了2、多行省略号假设我们要把它变成三行省略div样式div{//固定三行省略好// 旧版弹性盒子// 主轴垂直// 隐藏。
2023-10-26 11:26:12
603
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人