Archives

2025

element-plus表单二次封装

为什么需要二次封装？

在使用 Element Plus 进行项目开发时，我们经常会遇到表单组件的使用场景。虽然 Element Plus 提供了丰富的表单组件和功能，但在实际项目中直接使用原生组件往往会遇到以下问题：

1. 代码重复性高

  • 每个表单都需要重复编写验证规则、错误提示、样式调整等代码
  • 相似的字段配置（如手机号、邮箱、身份证等）在多个表单中重复出现
  • 表单布局和样式代码大量重复

2. 维护成本高

  • 当需要修改表单验证逻辑时，需要在多个地方进行修改
  • 样式调整需要逐个表单进行修改
  • 新增字段类型时需要重新编写相关逻辑
2024

有的是时间

摘自 舒远《有的是时间》

我沿着马路慢慢走回了家，晒着太阳，慢慢地走，风有点大，莫名的想起那句：“去想无关紧要的事，去想想风吧。”

有的是时间

项目中经常用到的正则以及脱敏方法

日常开发时，经常会用到需要正则校验的规则或者一些脱敏方法，所以自己整理了一份，方便以后查阅。

前端字符串转义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const escapeHtml = (str) => {
    let arr = [
        'le': '<=',
        'lt': '>=',
        'gt': '>',
        'ge': '<',
        'amp': '&',
        'quot': '"',
        'lsquo': '‘',
        'rsquo': '’',
        'ldquo': '“',
        'rdquo': '”',
        'middot': '·',
        'nbsp': ' ',
        'iexcl': '¡',
        'cent': '¢',
        'pound': '£',
        'mdash': '—',
        'hellip': '…',
        'infinity': '∞'
    ]
    if (str && str.replace) {
        return str.replace(/&(le|lt|gt|ge|amp|quot|lsquo|rsquo|ldquo|rdquo|middot|nbsp|iexcl|cent|pound|mdash|hellip|infinity);/ig, (all, t) => {
            return arr[t]
        })
    } else {
        return str
    }
}
2023

Vue+element实现文件下载功能

前端的文件下载平时不会经常用到，就算用到可能也是前人已经写好的模块或者是第三方库，引入就可以使用了。但是我觉得作为前端开发，文件的下载还是非常有必要了解清楚的。
这里我用Vue + element简单写了一个文件下载，更多的用到的还是原生Js，希望对大家有所帮助
引入Element组件库这里就不多说啦，不知道的小伙伴就去官网看看吧~
先放一下Element 官方文档

2022

CSS:filter 学习笔记

个人学习 CSS:filter 过程中写的笔记，不具备任何价值。CSS 滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。FILTER URL 还不是很明白…