自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(53)
  • 收藏
  • 关注

原创 vue项目使用iframe加载第三方网页

这世界很喧嚣,做你自己就好。

2025-10-28 11:34:26 177

原创 el-table合并单元格

【代码】el-table合并单元格。

2025-09-19 15:18:44 369

原创 vue路由跳转,动态设置tagsView页签标题

后台管理系统详情页通常有新增、编辑、查看详情,为了减少代码冗余以及可维护性,最好是设置同一个路由,通过指定路由参数来做区分。

2025-09-12 16:49:30 358

原创 前端下载文件、压缩包

后端直接返回文件下载链接。

2025-08-19 15:51:46 440

原创 el-table合并单元格

通过以上方法就能实现合并了,主要用到了el-table的 span-method。这个是后端返回的数据结构,按id字段,把相同内容的单元格的进行合并。这世界很喧嚣,做你自己就好。

2025-08-19 13:53:31 347

原创 前端引入vue-super-flow流程图插件

这世界很喧嚣,做你自己就好。

2025-08-18 11:10:31 331

原创 微信原生小程序下载excel、pdf文件分享到微信

exportQuoteOrder是点击导出时调用的方法。调用导出接口,后端会返回文件的地址url,包含了文件名信息等。主要用到了微信原生小程序的两个api,wx.downloadFile和wx.shareFileMessage。下载和分享api还有很多参数,具体的可以在官网查看。DownloadTask | 微信开放文档。这世界很喧嚣,做你自己就好。

2025-08-08 13:45:50 470

原创 vue-print-nb实现打印报表功能

可以看到其实还是存在一些细节上的缺陷的,一个是表格边框的粗细不一致(这个调了好久都没办法完全解决,只能先这样了),还有一个是表格数据多出现分页后,打印效果不好(这个暂时也没找到好的解决办法/(ㄒoㄒ)/~~)有知道怎么优化的小伙伴欢迎留言~这里是在弹窗里写了个模板,首先点击预览然后再打印。这世界很喧嚣,做你自己就好。

2025-08-06 15:18:28 483

原创 vue2项目集成Vxe Table示例

多数情况下在开发后台管理系统常用的表格ui组件是Element UI的el-table,但是如果面对复杂的表格操作,例如列宽调整、行拖拽、列拖拽、右键菜单等一些场景时el-table是无法满足需求的。而Vxe Table功能比较丰富,可以实现这些需求。

2025-07-31 15:28:12 887

原创 vue上传图片并预览

这里只支持上传一张图片,before-upload上传文件之前的钩子用于校验文件格式,http-request可自定义上传方法。

2025-07-29 16:37:41 426

原创 echarts环形柱状图

这世界很喧嚣,做你自己就好。

2025-05-22 15:51:32 216

原创 echarts堆叠柱状图

【代码】echarts堆叠柱状图组件封装。

2025-05-22 15:48:16 317

原创 el-table实现表头带筛选功能,并支持分页查询

最开始尝试了下面方法,发现这种方法仅支持筛选当前页的数据,不符合产品要求于是通过查询资料发现可以结合filter-change事件,当表格的筛选条件发生变化的时候会触发该事件,调接口获取符合条件的数据,实现如下。

2025-04-02 18:26:57 828

原创 el-table固定表头,动态计算高度

在elementui中固定el-table表头是通过给表格设置高度来实现的。而在实际开发中开发可能无法确定表格的实际高度,因此需要动态计算表格高度。2、动态计算表格高度,并监听浏览器窗口变化,动态计算表格高度。为了更好的让表格自适应可使用max-height。这世界很喧嚣,做你自己就好。1、给表格绑定动态高度。

2025-04-01 11:28:57 862 2

原创 前端使用jszip上传文件或压缩包给后端

1、jszip是一个用于创建、读取和修改ZIP文件的JavaScript库2、iconv-lite是一个轻量级的纯JavaScript实现的字符编码转换库。

2024-11-08 18:03:34 649

原创 uniapp开发钉钉小程序流程

1、小程序开发工具登录钉钉开发平台,根据自己的需求下载合适的版本,我这里下载的是Windows (64位)版本。

2024-07-16 10:37:51 3766 1

原创 uniapp发送Form Data格式请求

设置header的Content-Type为 application/x-www-form-urlencoded 即可。这世界很喧嚣,做你自己就好。

2024-07-12 14:32:08 1836

原创 纯前端实现打字机效果

前端实现打字机效果一个简单的方法就是采用定时器做字符串拼接,让文字一个一个显示出来,可以使用间隔定时器setInterval来控制文字拼接的速度。

2024-06-12 10:22:29 1450

原创 CSS实现3个圆点加载动画

加载动画主要使用了css的animation和transform属性,animation用来实现动画效果,transform实现过渡,让动画看起来更真实。

2024-06-07 11:15:24 1839

原创 解决uniapp软键盘弹起导致页面fixed定位元素被顶上去

在移动端开发中通常导航栏需要固定在页面的最顶端,但当页面中有输入框且dom元素较多时,点击输入框弹出软键盘会促使导航栏往上移正常情况如图一所示,软键盘弹起如图二所示图一图二。

2024-05-09 15:19:55 4529 2

原创 pda广播扫码

pda扫码默认只要光标聚焦到输入框扫描到的值就会自动填充到输入框中。但是有些场景并不适用,例如:同一个页面有多个输入框或者需求要求不聚焦到输入框就能扫描,此时就不符合实际业务场景了。这时,可以用广播扫码来实现,它不需要光标聚焦。

2024-04-03 16:47:15 5913 1

原创 three.js给模型添加CSS3DSprite精灵标签

先看下效果,如果符合你的需求可以接着往下看,避免浪费大家的时间这个需求主要有以下功能1)给模型添加热点,可以通过点击热点弹出模型标签2)给模型添加Sprite精灵图3)给模型添加CSS3DSprite模型标签在写代码之前先了解下是什么CSS3精灵模型 CSS3DSprite 对应的HTML标签,可以跟着场景缩放,位置可以跟着场景旋转,但是自身的姿态角度始终平行于canvas画布,不受旋转影响,就像精灵模型一样。

2024-02-05 11:50:44 3980 5

原创 移动端左滑删除交互

移动端项目开发做删除操作时常用的一个交互就是左滑出现删除按钮,点击进行删除。可以自己写样式、动画,也可以用更简单快捷的方式开发,使用现成的组件效果更好,更稳定,可以使用 uView 的 SwipeAction 滑动单元格实现。

2024-02-01 15:36:58 1163

原创 three.js加载模型

three.js是一款基于原生web GL封装通用Web 3D引擎,在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

2024-01-09 09:38:48 2790

原创 时间处理,获取年月日时分秒

这篇博客主要为了总结平时常用的时间处理方法,方便以后使用。

2023-12-01 16:27:05 916

原创 dhtmlx-gantt甘特图

需求:1、不同状态的任务用不同颜色展示2、当前日期添加竖线标志3、周末设置背景颜色4、可按小时、日、周切换(切换时间范围也需同步修改)官方Demo。

2023-11-23 15:59:37 3868 7

原创 uniapp上传手机相册图片、视频或拍摄图片、视频上传

一开始想用现成组件uView的u-upload来实现,做到一半发现使用这个组件上传图片没有问题,可以满足从相册上传、直接拍摄、预览功能。但是,视频好像不支持预览,不知道是我写法不对还是怎么回事/(ㄒoㄒ)/~~最终图片使用的u-upload组件,视频用了uniapp API 的 uni.chooseVideo()方法。

2023-11-23 14:08:02 7550 5

原创 使用DPlayer插件预览视频

最近开发了一个PC端预览视频的需求,特此记录下,方便以后查看预览视频的插件有很多,我最后选了DPlayer,这个插件使用简单,使用文档很详细。

2023-11-15 11:07:45 5800 6

原创 vue使用dagre-d3画流程图

edges用来存储线条数据,start是开始节点,end是结束节点,label可以给线条命名。还可以使用render.shapes()自定义形状。需求:根据表格中的工序名称和上工序生成流程图。2)circle,ellipse(椭圆)数据处理,把表格数据转变成节点和线条数据。3)diamond(菱形)这世界很喧嚣,做你自己就好。1)rect(长方形)

2023-10-18 15:00:29 5458 5

原创 HBuilderX运行到手机或模拟器调试检测不到设备

开发小程序或app时有时需要在真机上进行调试,有的功能必须要在真机上才能验证,例如:扫码。而且,通过真机调试才能确保软件开发的准确性和页面显示的完整性。在使用HBuilderX进行调试时有时会遇到下面这种情况,提示“没有检测到设备,请插入设备后点击刷新再试”。但是明明已经连接好了设备,不管怎么刷新都识别不到。

2023-10-11 18:06:12 10568 3

原创 el-table分页多选,切换下一页后上一页仍然保持勾选状态

el-table默认切换分页后,前一页选中的数据项会自动取消选中。而在实际开发中大部分场景是希望切换分页后不要清除上一页已选的数据项。

2023-08-31 17:06:23 3416 4

原创 echarts绘制中国地图,添加标记,点击省份展示市区地图

功能描述:页面初始化展示中国地图,并设置了三个省份的标记点,点击省份进入下一级市区地图,再次点击地图回到中国地图。

2023-08-24 16:04:08 8167 8

原创 若依切换菜单路由跳转成功,没有调接口页面空白,刷新后正常

前端项目若依版本号是 RuoYi-Vue-Plus v5.1.0,在开发过程中有时会出现切换菜单或者tab,页面空白的情况,刷新页面后又恢复正常了。多次复现出现这种情况一般是在页面停留了几分钟再操作,偶尔也会莫名奇妙的出现,具体什么原因还不明确。在网上找了些资料,看到部分开发者也遇到过这个问题,应该是框架本身的bug,可能是由于在AppMain中用了transition,组件内又使用了transition导致的。删除后就没有再遇到跳转空白的情况了,虽然没有路由过渡动画了,但是保证系统正常使用才是最重要的。

2023-08-16 11:38:04 4231 11

原创 前端项目引入高德地图

进入高德开发平台申请,具体操作可以参考官方提供的文档说明准备-地图 JS API 2.0 | 高德地图API按照上面的步骤就可以成功申请一个应用,得到 key 和 安全密钥,后面都会用到。

2023-08-14 18:15:25 2617 3

原创 CSS使用过渡动画实现展开折叠效果

前端页面展开/折叠效果可通过v-show控制显示隐藏,但这样页面交互太刻意了,显得不是很顺畅,为了提高用户使用体验感可以使用过渡动画实现平缓地展开折叠效果~

2023-07-27 11:05:11 10149 1

原创 vue让光标一直聚焦到页面的某个输入框

我尝试了用其他方法,给 :focus绑定一个变量,初始化时赋值为true,操作下拉选择仓库的时候会触发@change事件,此时再给 :focus绑定的变量赋值为 true。如上图,要求光标始终聚焦在出库单输入框,我们第一想到的就是给输入框加上 :focus = true,但是实际上如果我们进行了其他操作,例如操作了选择仓库,这个时候光标就从出库单失焦了。注:给出库单输入框绑定失焦事件,失焦时 :focus 绑定的变量值赋为 false,切换下拉再重新赋值为 true 就可以了。这世界很喧嚣,做你自己就好。

2023-07-12 11:03:45 2343 1

原创 vue生成二维码和条形码

以上就可以生成二维码、条形码了,不过如果在页面初始化的时候生成可能会出现转码失败的情况,这个时候可以尝试用nextTick包裹,或许可以解决问题。安装依赖:npm install qrcodejs2 --save。安装依赖:npm install jsbarcode --save。调用 new QRcode 生成二维码。调用JsBarcode构造函数生成条形码。在需要生成二维码的页面引入即可。在需要生成条形码的页面引入即可。

2023-07-11 16:06:59 2439 1

原创 vue项目关闭浏览器清空localStorage中存储的数据

上面大致描述了localStorage的优缺点,下面我们一起来看下,有的业务场景中当关闭浏览器窗口时怎么实现清空localStorage中的数据。实现思路大致就是给项目添加一个监听器,在项目销毁前移除localStorage中的数据,一般这个监听写在App.vue文件中。浏览器兼容性不全面,IE浏览器在IE8以上的才支持(影响不大)数据永久存储,如果没有手动清空,数据会一直保存在浏览器缓存中。数据存储大小5MB,通常以json格式的字符串保存。可以跨页面存储数据,实现数据共享。

2023-06-29 11:43:16 4573 3

原创 el-form嵌套el-table在表格中实现输入并设置校验

【代码】el-form嵌套el-table在表格中实现输入并设置校验。

2023-06-15 11:20:13 2755

原创 el-select触发change事件时同时传多个参数

el-select是项目开发中常用的下拉选择表单组件,有时在和后端联调会遇到既要传下拉的value值还要传下拉的label值或者是接口指定的某个值。

2023-06-15 10:43:38 4907

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除