- 博客(51)
- 收藏
- 关注
RSS订阅原创 vue3 + Element Plus 系统主题切换
CSS变量控制：通过修改documentElement的CSS Variables实现动态换肤。响应式存储：使用localStorage保存用户选择，结合Vue3的响应式系统。Element Plus整合：根据主题动态设置Element组件库的基础配置。系统主题监听：通过window.matchMedia检测系统主题变化。
2025-06-11 08:55:50
125
原创 postcss-px-to-viewport 实现页面自适应
postcss-px-to-viewport 是一个 PostCSS 插件，它可以将 px 单位转换为视口单位（vw、vh）。视口单位是相对于视口尺寸来计算的长度单位，而不是相对于父元素或根元素。这意味着使用视口单位进行布局和样式设置时，元素会随着屏幕尺寸的变化而自适应。
2025-06-10 10:49:03
190
原创 使用calc实现vue项目大小自适应
要做自适应的页面，但是有时候文字定了font-size后屏幕大小变化但是文字不跟着变。这时使用calc对属性值进行计算，实现宽度改变时字体大小跟随改变。
2025-02-25 11:18:49
294
原创 Promise简单介绍、使用与测试demo
const p = Promise.reject("失败");p.then((res) => {console.log("----打印：", res);//不执行},(rej) => {console.log("----打印：", rej);//----打印： 失败//另外写法p.then((res) => {console.log("----打印：p", res);//不执行},(rej) => {console.log("----打印：p", rej);
2025-02-24 15:35:23
778
原创 promise.all的使用
（1）只有p1、p2的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2的返回值组成一个数组，传递给p的回调函数。（2）只要p1、p2之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。，所造成对两个方法返回值使用时一个方法返回了，然后另一个方法值没有返回时，数据处理错误等问题。.all()该方法用于将多个Promise实例，包装成一个新的Promise实例。使用promise.all方法可以解决需要。
2025-02-20 14:26:30
306
原创 elment ui 表格数据打印
（打印表格必须要去掉表头中的fixed属性，每一列的宽度可以通过 width 来控制）通过调用浏览器自带的打印功能，完成对table数据的打印。
2025-02-11 14:49:20
330
原创 js实现深拷贝的多种方法
比较常见的深拷贝方法（JSON.stringify + JSON.parse）、递归调用、lodash、Object.assgin（注意：只有当对象中没有嵌套对象时，才可以实现深拷贝）、structuredClone（该方法为Web最新的 API，存在兼容问题）浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是指向内存的地址 ，所以如果其中一个对象改变了这个引用类型的值，就会影响到另一个对象。
2025-02-11 11:34:41
344
原创 template标签循环
代码主要思路（for循环时需要将使用key，去给dom一个标识，template标签是一个template专为包含模板内容而设计，并没有真实的dom，这时就需要将key绑定到template标签所包裹的dom元素上，这时要循环的dom元素身上才会有key）使用template标签循环，实现一个dom模版的多次循环。
2025-02-10 15:25:43
235
原创 获取字符串实际宽度、高度
将字符串放入一个js创建的dom中，设置字符串的文字大小，然后通过offsetWidth获取到宽度，获取成功后将dom销毁。
2025-01-24 17:14:35
165
原创 element tbas增加下拉框
tab-click="事件"（这个事件当中到拥有下拉框的tab里时，可以存一下Dropdown 第一个菜单的id，实现点击到拥有下拉框的tab时执行Dropdown 菜单值的查询）@command="事件"（这个事件里点击时，直接将Tabs 绑定的v-model值设置为拥有下拉框的tab ID，实现点击Dropdown 菜单时，切换到指定的Tab页）使用Tabs 标签页的label插槽，嵌入Dropdown 下拉菜单，实现Tabs 标签页增加下拉切换功能。代码（vue2、vue3同一个思路）
2025-01-23 15:55:22
580
原创 flex左右等高布局
flex布局：一个div有高度，另一个没有高度，使用align-items: stretch;将div1设置成div2的高度。
2025-01-17 11:32:31
572
原创 el-timeline时间线（Plus）左边图标改为自定义图片
时间线左侧正常根据文档内容，是填写的icon，但通过icon属性还有另外一个类型，component，可以搭配h函数写一组img元素，实现将图标改为本地图片。（目前图片有点小，还需要自己去调整下大概样式，比较懒，就放了个大概样子）
2025-01-17 10:11:19
779
原创 js多种循环方法（通过循环进行判断的相关方法）
可以判断数组或字符串内是否包含某个值，返回值是下标，找到true，没找到返回false。可以判断数组或字符串内是否包含某个值，返回值是下标，找到返回位置下标，没找到返回-1。先执行循环，再判断下次循环是否继续（如果一开始条件就不满足，他也会执行一次）将一个一维数组拼到一块，可以计算相加值，也可以将数字全部拼接成字符串。有返回值，一个条件不满足就返回false，并不继续循环。有返回值，一个条件满足就返回true，并不继续循环。可以对遍历项操作，且返回新的数组，元素组不改变。
2025-01-15 16:19:33
297
原创 nvm切换与管理node版本
nvm适用于多项目同时开发，然后项目适配node版本不同时，通过nvm进行node版本切换（安装nvm时，电脑内不应有已配置好的node，如果有的话可以先卸载掉原本node，再安装nvm）
2025-01-15 09:39:45
811
原创 http常用状态码（204，304, 404, 504，502）含义
http状态码 300 （多种选择） 针对请求，服务器可执行多种操作。http状态码 307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。http状态码 302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。http状态码 413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。http状态码 414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
2025-01-08 11:02:26
1709
1原创 当前时间转格式，不使用new Date().Format(‘yyyy年MM月dd日‘)
this.dateTypeFormat(''YYYY年mm月dd日HH:MM:SS',newDate())this.dateTypeFormat('YYYY年mm月dd日',newDate())//默认当天。this.dateTypeFormat('YYYY-mm-dd',newDate())//默认当天。返回值：2025年01月08日09:47:46。返回值：2025-01-0809:47:18。返回值：2025年01月08日。返回值：2025-01-08。
2025-01-08 09:47:13
182
原创 Ant Design Vue表格插槽
columns中声明插槽别名，然后在html中进行使用。text：当前这个key使用时返回的对应值,record：当前行数据,
2025-01-08 09:15:15
240
原创 element（vue2）表格插槽
原文链接：https://blog.youkuaiyun.com/weixin_53641562/article/details/124066501。这里的scope里边有很多属性可以获取rowIndex，只是获取内容可以{row}scope.row.属性。#default="{row}"形式。default：是内容的意思。#：是v-solt的缩写。
2025-01-07 17:34:56
643
原创 前端-杂文
时可展开或折叠的代码块。在较长的代码文件中，能够折叠或隐藏一个或多个区域会十分便利，这样，可将精力集中于当前处理的文件部分。(可以在使用 vsCode 编辑器的。
2024-11-15 13:57:17
215
原创 storage.js实现数据持久化
本地储存的 js 插件 ，提供有效期、只读取一次以及输出 json 数据等功能。使用实例（2）---（将以上js文件引入mian.js文件中）使用实例（1）---（这种需要在 HTML 文档中引用）
2024-11-13 10:36:06
375
原创 VUE对axios封装（让其支持get与delete方式传递数组）
http://IP:端口/路径?http://IP:端口/路径?不封装时,传递数组效果。在封装axios的页面。封装时,传递数组效果。
2024-11-13 09:59:30
178
原创 gantt-elastic甘特图（增加连接线箭头指向）
包的这个文件（node_modules\gantt-elastic\src\components\Chart\Row\Milestone.vue）包的这个文件（node_modules\gantt-elastic\src\components\Chart\Row\Project.vue）包的这个文件（node_modules\gantt-elastic\src\components\Chart\Row\Task.vue）由于甘特图连接线不带箭头指向样式，所以手动修改node包文件。
2024-11-08 16:30:03
404
原创 vue项目中env使用
（如使用npm run serve 会自动加载.env与.env.development中的变量，.env文件中与.env.development中声明的名相同时，会使用.env.development中声明变量的值）会生成三个env文件（.env、.env.development、.env.production）（.env文件中与.env.XXX中声明的名相同时，会使用.env.XXX中声明变量的值）.env.development 开发环境加载的配置文件。.env中变量使用，变量名声明为。
2024-10-17 17:27:28
393
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人