- 博客(89)
- 收藏
- 关注
原创 解决 Echarts 图 tooltip 层级太高穿透问题
问题场景:Echarts 图 tooltip 是自动轮播的,当点击某个区域出现弹窗时,tooltip和弹窗同时显示,没在遮罩层下面,查看tooltip的层级显示99999,所以这里改一下tooltip的层级。设置 extraCssText: "z-index: 2;
2024-05-29 11:05:13 638
原创 vue3中web前端JS动画案例(四)侧边栏横幅效果-右下角广告-淘宝案例
myJsAnimation.js, 这里使用了上次封装的动画方法,并进行了改造。
2024-04-22 16:26:35 490
原创 vue3中web前端JS动画案例(三)链式运动-同时运动
这里把方法抽取成JS文件,文件2是同时运动,对传入的属性,以及边界除了进行了改动,使代码更加完善。
2024-04-19 15:02:42 238
原创 vue3前端加载动画 lottie-web 的简单使用案例
Lottie 是 Airbnb 发布的一款开源动画库,它适用于 Android、iOS、Web 和 Windows 的库。UED 提供动画 json 文件即可, 开发者就可以直接运用在 iOS、Android、Web 和 React Native之上,无需其他额外操作。1、SVG 渲染器支持的特性最多,也是使用最多的渲染方式。3、HTML 渲染器受限于其功能,支持的特性最少,只能做一些很简单的图形或者文字,也不支持滤镜效果。2、Canvas 渲染器就是根据动画的数据将每一帧的对象不断重绘出来;
2024-04-08 17:16:58 1386 4
原创 vxe-table内置导出表格的提示message层级提升
业务场景:在el-dialog里有vxe-table表格,表格有前端导出功能,使用vxe-table自带的导出,但是导出的提示框层级低会被弹框盖住,无法显示到最顶层。
2024-03-26 11:49:01 378
原创 vxe-table编辑单元格动态插槽slot的使用
业务场景:表格中只有特定某一行的的单元格可以编辑,列很多,为每个列写个插槽要写很多重复代码,所以这里使用动态插槽,简化代码量。显示编辑图标,点击编辑图标隐藏。失去焦点保存调后台接口。2、把列数组里的插槽和field提取出来为循环使用做准备,如果直接使用导入进来的columns无法显示,所以需要处理后使用。1、后端返回的数据里可以编辑的行数据添加属性 edit: true;不可编辑的行数据里添加属性 edit: false;列名文件示例columns.js。
2024-03-01 10:45:05 4248
原创 ECharts里x轴的name位置
x轴的name默认是显示在x轴的最后面,但是需求要把name 显示在x轴的上方,所以需要设置nameTextStyle,设置行高,padding和verticalAlign。
2024-02-21 09:41:11 2099
原创 el-date-picker日期时间选择器限制可选的日期范围
业务场景:需要限制日期时间选择器可选择的日期,有两种模式,一种是已知范围,只能选已知范围内的日期,另一种是知道最近天数,只能选今天往前的天数内的日期,超出不能选。
2024-01-04 18:52:50 2132
原创 el-table表格自动循环向上滚动鼠标放上去停止,移开恢复
el-table表格自动循环向上滚动鼠标放上去停止,移开恢复,排序的图标是两个图片,点击向后端发请求带不同的参数。
2023-12-31 17:31:13 1793
原创 使用countup.js制作数字滚动效果
1、数字定时刷新,显示从0变动到最终数的效果,字体可以下载不同的字体包。3、设置了保留两位小数的情况和整数情况。2、先下载 countup.js,
2023-12-31 16:51:57 932
原创 html文件Js写输入框和弹框调接口jQuery
业务场景:需要使用写一个html文件,实现输入数字,保存调接口。1、使用 JS原生写法,fetchAPI调接口,使用 alert 方法弹框会阻塞线程,所以写了一个弹框。2、使用jQuery,先 npm install jquery,然后引入。1、使用 JS原生写法, fetchAPI调接口,使用。方法弹框会阻塞线程,所以写了一个。
2023-12-30 15:52:19 819
原创 算法-从树某节点到顶级的id,拼接成字符串
业务场景:选中树的末级节点后,拿到id,向上找每个层级的父级,把向上的所有层级的id,按照从顶级到末级顺序拼接成字符串
2023-12-23 11:47:25 550
原创 Echarts饼图tooltip渐变色,内部legend百分比保留整数方法
业务场景:1、tooltip的背景需要渐变色,写 html 标签,2、饼图内部的百分比需要保留整数 ,使用formatter,
2023-12-22 18:51:29 651
原创 vxe-table循环生成表格,表格里的某些数值设置颜色
业务需求:表格的列名是循环出来的,后台返回每行的表格数据结构如下,需要表格里只有“当期”的行里数值超限waterGuildLine后显示红色。需要在vxe-table里写个插槽,再写个方法
2023-12-14 10:55:57 767
原创 Vue3使用kkFileView预览文件pdf
kkFileView - 在线文件预览kkFileView官网 - kkFileView使用Spring Boot搭建,易上手和部署,基本支持主流办公文档的在线预览,如doc,docx,Excel,pdf,txt,zip,rar,图片等等业务场景:需要点击按钮,弹出弹框预览pdf文件这里使用的是3.x.x 版本,需要下载base64。
2023-11-27 13:57:59 1858
原创 Vue3中调用外部iframe链接方法
业务场景,点击某个按钮需要跳转到外部iframe的地址,但是需要在本项目内显示。以前项目中写过调用外部链接的功能,是有菜单的,但是这次是按钮,所以不能直接把地址配到菜单里。
2023-11-27 11:37:53 2218
原创 Vue3挂载完毕后,隐藏dom再重新加载组件的方法
组件原本是在PC端使用的,现在需要把组件再封装一次,供app调用,但是在app上会显示tag栏,有占位影响空间,所以需求去掉头部tag,只显示下方组件。实现方法,以前是直接引用的组件,现在改为动态引用组件,使用,挂载后,获取tag栏的dom,使用display:‘none’;隐藏,然后再动态导入组件。
2023-11-27 10:48:25 1227
原创 el-input-number输入框超过限制后自动变为最大值
el-input-number方法不支持插槽,只有el-input支持下面的插槽append写单位,但是el-input输入的数字超过限制后不会自动变成最大值,所以这里使用的是el-input-number,单位使用div,重写了样式,注意要给div设置高度。需求:目标室温输入框数据库设置最大是4位整数,限制一位小数,且后面要加单位,当输入数字超过限制,默认显示限制的最大值 ,所以就有了输入完图一自动变为图二的数字。input输入框使用了el-input-number。
2023-11-07 09:54:30 1472
原创 vue3使用swiper6.7.0写轮播图,按钮在轮播图外面
应用场景:需要在header区域,写24小时天气预测轮播,按钮在轮播图外面,默认隐藏左侧按钮,当点击右侧按钮后,左侧按钮显示,当点击到最后一个轮播图的显示时,隐藏右侧按钮。通过获取索引,监听索引的方法实现。项目里以前使用的是swiper6.7,所以这次写这个轮播还用了6版本,没有升级。
2023-10-18 12:06:18 790
原创 点击弹窗页面右侧缩小问题
主页面是由header和下面的tabel,2个组件构成,需要在css里使用flex布局, 就解决了弹窗导致的页面右侧缩小问题。
2023-10-11 19:04:12 195
原创 git常用命令
(我的文档下.gitconfig文件)公司vpn连接时,只能用https协议。我的文档 ---> .ssh目录下。id_rsa、id_rsa.pub文件。2.配置user.name 和 user.email(global为全局配置)git config --list //查看配置。三、切换https和ssh协议(.git 下config文件)一、设置user.name 和 user.email。1.查看user.name和user.email。1.查看本地是否已经有ssh文件(pub文件)
2023-09-19 19:02:44 564
原创 el-form表单中不同数据类型对应的时间格式化和校验规则
在表单中,当选择不同的数据类型时,需要在下面选择时间时和数据类型对应上, 通过监听数据类型的变化, 给时间做格式化,校验规则,都是不能选当前的时间,所以需要转换时间戳.
2023-09-07 11:09:32 1636 1
原创 Error: cannot push because a reference that you are trying toupdate on the remote contains commits
微信小程序推送到码云上报错问题。使用 git push -u origin mfy -f //其中mfy是你的分支名,这个命令可用.参数之前,你已经仔细检查了你的更改,因为这可能会覆盖远程仓库中的其他更改。参数可以强制推送,即使远程仓库有更新。
2023-08-24 15:13:23 1268
原创 获取element-ui的Collapse折叠后高度
因为折叠面板使用的是动画,所以要监听动画结束,再获取折叠后的高度,再更新表格的最大高度即可
2023-06-26 16:18:51 1906
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人