![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
三劫散仙
唯有学习,可以解忧
展开
-
vue3 + tsx 表格 Action 单独封装组件用法
先上图看右侧列 action 的 UI 效果:正常来说,如果一个表格的附带 action 操作,我们一般会放在最右侧的列里面实现,这个时候有些UI 框架支持在 SFC 模板里面定义额外的 solt,当然如果不支持,更通用的做法是通过 vue 的 h 函数来实现,纯粹用 js 或 ts 组装组件方式实现,这种方式很灵活,但有一个弊端,当定义的组件很多的时候,比如上图有4 个Button,还得定义按钮样式和点击事件,代码就显的非常乱。原创 2024-07-10 16:14:59 · 274 阅读 · 0 评论 -
vue3 + tsx 报错JSX element implicitly has type ‘any‘ because no interface ‘JSX.IntrinsicElements‘
【代码】vue3 + tsx 报错JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements'原创 2024-06-07 17:07:55 · 442 阅读 · 0 评论 -
Vue3 + Echarts集成时柱状图和折线图的tooltip不显示问题
今天在使用echarts绘制一个双图表的数据统计图时候,发现 tooltip 无法显示,经过一番排查,发现是使用上错误导致,如下图所示,鼠标悬浮上不能正确触发tooltip和自定义的 valueFormatter。原创 2024-03-25 11:23:02 · 1271 阅读 · 2 评论 -
package.json包版本控制方法介绍
最近一个 Vue 3 + Spring boot 的项目在生产环境打包失败了,排查下了原因,发现是版本没有锁定导致的,因为在开发环境,我们的机器都可以连通外网去下载依赖,但生产环境nexus一般都会限制网络访问,所以某些不匹配的版本可能就会下载失败,从而导致构建失败。原创 2024-01-22 16:08:04 · 1018 阅读 · 0 评论 -
vue3 + naive ui + Tabs 报错 ‘Slot “default“ invoked outside of the render function‘
如下给Tabs组件加一个defaultValue的默认值即可。原创 2024-01-05 11:57:14 · 2127 阅读 · 0 评论 -
Vue3 + Vite + TSX + vue3-ace-editor 踩坑
由于 ace-editor 官网并没有提供各个前端框架Vue,React,Angular的直接使用的适配版本, 所以本次使用的vue3-ace-editor 是个人开源者维护的版本,原生是支持 SFC 模版用的,由于我这里习惯使用 JSX 或 TSX的方式,所以遇到了两个小问题,特此记录。原创 2023-11-23 19:34:39 · 532 阅读 · 0 评论 -
Ant Design Vue Table 列属性报错 Type ‘string‘ is not assignable to type ‘AlignType | undefined‘.
整体感觉 TypeScript 的类型限制方案还有缺陷或者说不完美,要么就和 Java 强类型一样,用枚举限制某些值,真的没必要出现 Type 这种不伦不类的数据类型,还容易和 Interface 极度混淆,这对于非专业前端的后端来说真的是有点痛苦。原创 2023-11-21 11:10:11 · 747 阅读 · 0 评论 -
Ant Design Vue Select下拉框内容显示不全问题解决
设置完之后:dropdownMatchSelectWidth={false},已经全部展开了。原创 2023-11-14 19:25:21 · 1463 阅读 · 1 评论 -
js 正则替换实现特殊分隔符的单词首字母大写
原因在于:\w 是匹配的 字母、数字、下划线。[_\s-]* 第二部分是接着第一部分结果的追加限定:必须以 0个或多个 (下划线 或 空白字符 或 连字符)组成部分结尾才可以。这里面需要注意:[_\s-] 的顺序,连字符不能放中间,因为放空间表示一个范围,会导致编译报错。[a-zA-Z]* 第一部分匹配任意 0个或多个字母组成的单词。原创 2023-11-14 17:37:45 · 210 阅读 · 0 评论 -
mac 安装 selenium + chrome driver
使用 selenium 模拟浏览器渲染数据,需要依赖各浏览器的驱动才能完成,因此需要单独安装chrome driver。原创 2023-11-09 17:43:17 · 2370 阅读 · 0 评论 -
Vue3 实现 clipboard 复制功能
一个很小的交互功能,网上搜了一下有一个 vue3-clipboard 直接支持vue3,到github仓库看了下,原作者已经不维护这个项目了:推荐使用 vueuse 自带的 useclipboard 功能,由 vue 团队维护,稳定性基本没问题上面的例子并不具备通用性,我们实际应用肯定需要再次封装,下面给出我封装的效果,在 Table 的每一行中,有一个name提供快捷拷贝展示效果如下:这样用图标代替复制的按钮样式会更加美观一点。原创 2023-11-02 12:03:22 · 1392 阅读 · 0 评论 -
Ant Design Vue Table 表格内容高度自适应+固定表头踩坑
对于非专业前端开发者来使用 Ant Design UI 组件来开发企业级后台管理系统来说是非常不错的选择,但这并不意味着我们能够用好这个框架,因为 UI 交互上和有许多细节上的问题对于非专业前端来说并不容易解决,最近在使用 Table 组件时就遇到一个小坑,特此记录一下解决的方法。原创 2023-11-01 19:43:03 · 6930 阅读 · 0 评论 -
Vue3 + Tsx 集成 ace-editor编辑器
Ace Editor(全名:Ajax.org Cloud9 Editor)是一个开源的代码编辑器,旨在提供强大的代码编辑功能,通常用于构建基于Web的代码编辑应用程序。它最初由Cloud9 IDE开发,现在由开源社区维护。超过110种语言的语法高亮(可以导入TextMate/Sublime Text的.tmlanguage文件)20多种主题(可以导入TextMate/Sublime Text的.tmtheme文件)自动缩进和取消缩进可选的命令行界面处理大型文档(似乎上限为四百万行!原创 2023-10-26 19:37:29 · 1918 阅读 · 0 评论 -
学到一招 chrome 浏览器 debug 悬浮样式
今天在想调试一个开源 UI 框架的某个table row的隔行换色的样式设置,发现这个颜色只有鼠标悬浮在row的时候才能拿到,但是想要拷贝 row 样式,鼠标必须离开悬浮区域,去chrome的debug控制台内才能拷贝,但是一离开悬浮区域,样式又消失了,顿时陷入了鸡生蛋的循环中。原创 2023-10-24 10:58:16 · 695 阅读 · 0 评论 -
Ant Design Vue 注册全局消息通知组件
在一个前端工程中,消息通知组件都是使用频率非常高的组件,如果在 vue,jsx/tsx 的页面中直接使用是非常简单的,但有时候我们需要通过 API 的方式在 js 和 ts 这种非页面的场景中使用,比如 axios http 的全局拦截提示以及各种工具类的的封装中可能都会用到。Ant Design Vue 官网文档中()介绍通过 API 的方式使用 Message,Modal,Notification 三个组件并不详细,所以本文又整理了一下具体的使用步骤和方法。原创 2023-10-13 18:05:25 · 718 阅读 · 0 评论 -
vue3 route meta字段扩展
1,在项目根目录下,新建一个 augmentations.d.ts 文件。4,完成之后,TypeScript 的类型检查就不会报错了。原创 2023-10-10 14:42:16 · 889 阅读 · 0 评论 -
vue3+vite+ts 组件中自动导入 ref 和 reactive
在每个vue组件中,都去手动引入 ref 和 reactive 是非常繁琐的一件事,我们可以通过插件来完成自动导入。原创 2023-10-10 11:26:19 · 2099 阅读 · 0 评论 -
vue3 集成 tailwindcss
Tailwind CSS 是一个流行的前端框架,用于构建现代、响应式的网页和 Web 应用程序。它的设计理念是提供一组可复用的简单、低级别的 CSS 类,这些类可以直接应用到 HTML 元素上,从而加速开发过程并提高样式一致性。原子级别的 CSS 类: Tailwind CSS 的核心思想是将样式拆分为原子级别的类,每个类都代表一个特定的样式属性,例如用于文本居中对齐,用于设置背景颜色为蓝色。通过将这些类应用于 HTML 元素,可以构建精确的样式。可配置。原创 2023-10-08 16:46:07 · 1312 阅读 · 0 评论 -
Java替换 html 中隐藏的空格字符
有时候前端传过来的 json 字符串,包含了隐藏的空格 &NBSP 字符,在后端 Debug 的时候可以看到是  ,但 system.out.print() 打印出来的是正常的空格,这样看着正常但其实放入 fastjson 中去做解析会失败,所以我们需要移除这些空格。原创 2023-09-14 16:10:07 · 525 阅读 · 0 评论 -
Java json 格式化小工具兼容转义 json 串
注意第一种使用 JSON 工具处理时,并不能正常解析,需要先转义才行,注意: 在 IDEA中 测试时不能直接将上面的内容拷贝到 Java 类中,因为 IDEA 会自动反转义,正确的测试的方法时将数据保存到 resources 文件夹下的一个文件中,然后读取出来解析即可。原创 2023-09-12 18:28:44 · 487 阅读 · 0 评论 -
vue3 路由跳转携带参数传递给 props
现在假设 要从 B 组件跳转到 A 组件中来,并且要携带 props 参数应该怎么做?B 组件中的跳转代码,注意从 params 改成了 query。假设一个 JSX 组件 A 拥有下面的 props 属性。使用函数模式进行路由转换,适合所有的模式包括前后端一体。开启路由中的 props ,适合前后端分离的部署方式。B 组件中的跳转代码。原创 2023-08-21 19:15:00 · 804 阅读 · 0 评论 -
vue3+axios刷新浏览器interceptors无效问题
vue前端应用在用户登录之后,服务端会返回一个认证token,前端会将此token存在cookie中,之后前端每次发起的向服务端的请求时,会通过axios的interceptors.request方法,来自动将cookie中的token取出来放在请求头中原创 2022-12-08 19:17:31 · 1271 阅读 · 0 评论