vue
前端程序媛Ying
这个作者很懒,什么都没留下…
展开
-
vue3中web前端JS动画案例(四)侧边栏横幅效果-右下角广告-淘宝案例
myJsAnimation.js, 这里使用了上次封装的动画方法,并进行了改造。原创 2024-04-22 16:26:35 · 379 阅读 · 0 评论 -
vue3中web前端JS动画案例(三)链式运动-同时运动
这里把方法抽取成JS文件,文件2是同时运动,对传入的属性,以及边界除了进行了改动,使代码更加完善。原创 2024-04-19 15:02:42 · 170 阅读 · 0 评论 -
vue3中web前端JS动画案例(二)多物体运动-多值运动
【代码】vue3中web前端JS动画案例(二)多物体运动-多值运动。原创 2024-04-19 11:26:36 · 297 阅读 · 0 评论 -
vue3中web前端JS动画案例(一)
vue3中web前端JS动画案例,上述案例主要使用定时器,和绝对定位产生动画。原创 2024-04-18 15:50:35 · 243 阅读 · 0 评论 -
vue3中lottie-web封装组件和api的使用
vue3中lottie-web封装组件和api的使用原创 2024-04-18 15:45:25 · 358 阅读 · 0 评论 -
vxe-table编辑单元格动态插槽slot的使用
业务场景:表格中只有特定某一行的的单元格可以编辑,列很多,为每个列写个插槽要写很多重复代码,所以这里使用动态插槽,简化代码量。显示编辑图标,点击编辑图标隐藏。失去焦点保存调后台接口。2、把列数组里的插槽和field提取出来为循环使用做准备,如果直接使用导入进来的columns无法显示,所以需要处理后使用。1、后端返回的数据里可以编辑的行数据添加属性 edit: true;不可编辑的行数据里添加属性 edit: false;列名文件示例columns.js。原创 2024-03-01 10:45:05 · 1852 阅读 · 0 评论 -
el-date-picker日期时间选择器限制可选的日期范围
业务场景:需要限制日期时间选择器可选择的日期,有两种模式,一种是已知范围,只能选已知范围内的日期,另一种是知道最近天数,只能选今天往前的天数内的日期,超出不能选。原创 2024-01-04 18:52:50 · 1356 阅读 · 0 评论 -
el-radio-button自适应充满盒子的写法
el-radio-button自适应充满盒子的写法。原创 2024-01-02 19:53:55 · 730 阅读 · 0 评论 -
el-table表格自动循环向上滚动鼠标放上去停止,移开恢复
el-table表格自动循环向上滚动鼠标放上去停止,移开恢复,排序的图标是两个图片,点击向后端发请求带不同的参数。原创 2023-12-31 17:31:13 · 1357 阅读 · 0 评论 -
使用countup.js制作数字滚动效果
1、数字定时刷新,显示从0变动到最终数的效果,字体可以下载不同的字体包。3、设置了保留两位小数的情况和整数情况。2、先下载 countup.js,原创 2023-12-31 16:51:57 · 631 阅读 · 0 评论 -
Echarts饼图tooltip渐变色,内部legend百分比保留整数方法
业务场景:1、tooltip的背景需要渐变色,写 html 标签,2、饼图内部的百分比需要保留整数 ,使用formatter,原创 2023-12-22 18:51:29 · 481 阅读 · 0 评论 -
格式化Echarts的X轴显示,设置显示间隔
业务需求:x轴间隔4个显示,并且末尾显示23时原创 2023-12-15 15:17:51 · 1546 阅读 · 0 评论 -
vxe-table循环生成表格,表格里的某些数值设置颜色
业务需求:表格的列名是循环出来的,后台返回每行的表格数据结构如下,需要表格里只有“当期”的行里数值超限waterGuildLine后显示红色。需要在vxe-table里写个插槽,再写个方法原创 2023-12-14 10:55:57 · 595 阅读 · 0 评论 -
echarts修改tooltip默认的圆点图标为其他样式
业务需求,默认是圆点,需要把线的由圆点改为线原创 2023-11-28 19:12:41 · 1001 阅读 · 0 评论 -
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 · 1524 阅读 · 0 评论 -
Vue3中调用外部iframe链接方法
业务场景,点击某个按钮需要跳转到外部iframe的地址,但是需要在本项目内显示。以前项目中写过调用外部链接的功能,是有菜单的,但是这次是按钮,所以不能直接把地址配到菜单里。原创 2023-11-27 11:37:53 · 1622 阅读 · 0 评论 -
Vue3挂载完毕后,隐藏dom再重新加载组件的方法
组件原本是在PC端使用的,现在需要把组件再封装一次,供app调用,但是在app上会显示tag栏,有占位影响空间,所以需求去掉头部tag,只显示下方组件。实现方法,以前是直接引用的组件,现在改为动态引用组件,使用,挂载后,获取tag栏的dom,使用display:‘none’;隐藏,然后再动态导入组件。原创 2023-11-27 10:48:25 · 891 阅读 · 0 评论 -
vxe编辑保存表格
需要点击编辑时,全部表格显示编辑框,点击保存,全部保存。原创 2023-11-22 19:59:48 · 684 阅读 · 0 评论 -
vue3使用swiper6.7.0写轮播图,按钮在轮播图外面
应用场景:需要在header区域,写24小时天气预测轮播,按钮在轮播图外面,默认隐藏左侧按钮,当点击右侧按钮后,左侧按钮显示,当点击到最后一个轮播图的显示时,隐藏右侧按钮。通过获取索引,监听索引的方法实现。项目里以前使用的是swiper6.7,所以这次写这个轮播还用了6版本,没有升级。原创 2023-10-18 12:06:18 · 543 阅读 · 0 评论 -
vue3弹窗中循环生成表单的校验和重置问题
vue3弹窗中循环生成表单的校验和重置问题原创 2023-10-18 11:27:04 · 1450 阅读 · 0 评论 -
点击弹窗页面右侧缩小问题
主页面是由header和下面的tabel,2个组件构成,需要在css里使用flex布局, 就解决了弹窗导致的页面右侧缩小问题。原创 2023-10-11 19:04:12 · 139 阅读 · 0 评论 -
el-form表单中不同数据类型对应的时间格式化和校验规则
在表单中,当选择不同的数据类型时,需要在下面选择时间时和数据类型对应上, 通过监听数据类型的变化, 给时间做格式化,校验规则,都是不能选当前的时间,所以需要转换时间戳.原创 2023-09-07 11:09:32 · 1366 阅读 · 1 评论 -
实现循环滚动效果
【代码】实现循环滚动效果。原创 2023-09-01 10:56:26 · 190 阅读 · 0 评论 -
el-table中点击跳转到详情页的两种方法
点击el-table跳转到详情页的两种写法原创 2023-08-31 17:02:56 · 2315 阅读 · 2 评论 -
获取element-ui的Collapse折叠后高度
因为折叠面板使用的是动画,所以要监听动画结束,再获取折叠后的高度,再更新表格的最大高度即可原创 2023-06-26 16:18:51 · 1606 阅读 · 0 评论 -
使用虚拟滚动优化el-table长列表加快运行速度
项目背景: 在vue2中el-table的数据量太大,并且有点击单元格选中和鼠标框选单元格选中数据,并对数据进行操作的功能,所以在不使用虚拟滚动前,非常卡顿,使用后完美解决卡顿问题.原创 2023-06-26 14:45:26 · 3463 阅读 · 4 评论 -
vue中实现el-table点选和鼠标框选功能
项目有两个需求,既能在el-table实现点选又能实现鼠标框选,原创 2023-06-21 10:52:02 · 5288 阅读 · 6 评论 -
vue2中私有过滤器filters用法
【代码】vue2中私有过滤器filters用法。原创 2023-06-13 09:21:45 · 154 阅读 · 0 评论 -
ECharts日历热力图点击事件和选中日期加边框
切换日期时,选中框问题和日总计问题。原创 2023-06-06 11:57:47 · 521 阅读 · 0 评论 -
vue2中el-table在页面右下方时点击右键菜单位置设置
由于el-table的位置有偏移, 当右键点击el-table的行事件时弹出菜单, 但是当点击最右边或者最下边的时候, 菜单会被盖掉, 所以在获取距离的时候减去整个table的偏移距离, 并且要把盖住的菜单的宽和高减去,就能正常显示到页面了.原创 2023-05-24 11:18:05 · 645 阅读 · 0 评论 -
3. Vue自定义全局指令-时间格式化案例
通过使用自定义指令 v-ftime,格式化时间。原创 2023-04-05 19:54:56 · 173 阅读 · 0 评论 -
2.Vue自定义指令参数-修饰符-值/案例-自定义全局指令往数字前添加单位¥
自定义指令的参数-修饰符-值,自定义一个全局 v-unit 指令, 往数字前面添加 ¥ 单位。原创 2023-04-05 19:50:03 · 132 阅读 · 0 评论 -
Vue自定义指令
缺点:只能在局部使用,不能复用。注意:需要定义一个标识符 v 开头-- 方式二、自定义指令 -->focus: {// focus: {} 这个对象里放的是生命周期的函数(自定义指令),会把元素 el 传过来// 当v-focus应用到 input上,input被挂载到DOM上后,就会回调 mounted 生命周期函数console.log('v-focus 应用到元素被挂载了', el)el?.focus()// 2.方式二:自定义指令(局部指令)原创 2023-04-05 19:30:02 · 1288 阅读 · 0 评论 -
轮播图组件自定义指示器
把相同类别的放在一个数组中,类别为key,数组为value,这样方便对后续指示器的显示进行处理。从后台得到的数据并没有对相应数据分组,得到的是总的数据。原创 2023-04-02 20:17:24 · 420 阅读 · 0 评论 -
vue2基础知识
系统自带了8个生命周期,分别是:哪8个,第一次进入到组件会执行前4个周期,分别是 beforeCreate,created,beforeMount,mounted,如果用到keep-alive 就变成了10个生命周期,因为会额外增加两个生命周期,activated,deactivated,如果加入keep-alive,第一次进入到组件,就会执行5个生命周期了前面那4个,再加上keep-alive那一个,如果第二次或者第N次进入到这个组件,就会执行一个生命周期了,也就是keep-alive那一个。原创 2023-03-10 22:18:32 · 264 阅读 · 0 评论