- 博客(7)
- 收藏
- 关注
RSS订阅原创 element-plus el-form表单自定义验证、数据重置
rules中的key值对应表单上的prop，required: 必填项，message: 错误信息，trigger: 触发验证的方式，还支持邮箱格式、数据长度等等。这时候再进行用户添加就会发现数据没有重置，因为表单还没有初始化，数据已经赋值了。rule: 验证规则，value: 触发验证时表单元素的值，callback: 返回验证结果的回调函数。如果出现数据重置不生效的问题，首先检查prop定义是否准确，再检查表单赋值的时机有没有问题。el-form提供给我们了数据重置的方法，组件实例上的。
2024-06-02 00:14:46
425
原创 VUE项目中如何遍历枚举，使用枚举与其它值进行比较
roles[key] 数据类型可能是string或者number，但是我们过滤了number类型的key值，这时候的roles[key]只能是number类型的数据，但是ts不知道， 所以不能直接roles[key] as number, 要使用unknown做一次中转 roles[key] as unknown as number。== 0就搞定了，我们先来尝试一下。以select选择器为例，使用isNaN过滤掉number类型的key，到这里，基本效果就实现了。
2024-06-01 13:32:28
649
原创 VUE3 + TS + el-upload实现头像上传
/ 添加or编辑用户password?: string,/** 用户头像 */avatar?
2024-05-31 17:05:24
295
原创 VUE项目CSS样式穿透，轻松解决element-puls样式不生效的问题
再找到你需要样式穿透的选择器如上图的.el-upload-list--picture-card，在需要样式穿透的选择器上加上deep。我们在编辑器上书写的标签，都添加了一个唯一标识符data-v-xxxx(因为scoped),然后样式匹配的时候都是根据这个标识符去匹配，有这个标识符的标签，样式能够直接修改，没有的情况下，我们看看是什么情况。这时候不难看出给el-upload-list--picture-card这个类名匹配了唯一标识符，浏览器渲染的标签并没有这个标记，所以样式不生效。
2024-05-31 01:55:31
669
原创 vue3 + ts + axios封装，接口返回数据有代码提示
有过工作经验的小伙伴应该对axios二次封装比较熟悉，但是加入ts后就比较犯难，被ts的数据格式校验搞的头大，接下来就简单分析一下axios，作者版本引入axios以及实例化})
2024-05-29 17:44:45
403
原创 vue3 + ts + element-plus 实现递归组件（用于导航栏）
简单来说，就是组件内部引入自身的情况，用于实现树形、菜单等层级结构的数据展示。
2024-05-29 14:55:51
326
原创 vue3+ts 纯前端实现动态路由
1. 路由守卫permission.ts一开始放在了文件根目录下，但是tsconfig.app.json 配置中"include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "src/**/*"只识别src下的文件，导致我在文件中使用@别名，编辑器一直爆红，更改文件路径后修复。2.没有使用动态路由时，一直使用useRouter().options.routes渲染导航栏，但是这是一个只读属性，addRouter后值并不会更改，所以选择pinia存贮用户路由表。
2024-05-29 01:18:59
768
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人