- 博客(34)
- 收藏
- 关注
RSS订阅原创 解决uniapp软键盘弹起导致页面fixed定位元素被顶上去
在移动端开发中通常导航栏需要固定在页面的最顶端，但当页面中有输入框且dom元素较多时，点击输入框弹出软键盘会促使导航栏往上移正常情况如图一所示，软键盘弹起如图二所示图一图二。
2024-05-09 15:19:55
470
原创 pda广播扫码
pda扫码默认只要光标聚焦到输入框扫描到的值就会自动填充到输入框中。但是有些场景并不适用，例如：同一个页面有多个输入框或者需求要求不聚焦到输入框就能扫描，此时就不符合实际业务场景了。这时，可以用广播扫码来实现，它不需要光标聚焦。
2024-04-03 16:47:15
522
原创 three.js给模型添加CSS3DSprite精灵标签
先看下效果，如果符合你的需求可以接着往下看，避免浪费大家的时间这个需求主要有以下功能1）给模型添加热点，可以通过点击热点弹出模型标签2）给模型添加Sprite精灵图3）给模型添加CSS3DSprite模型标签在写代码之前先了解下是什么CSS3精灵模型 CSS3DSprite 对应的HTML标签，可以跟着场景缩放，位置可以跟着场景旋转，但是自身的姿态角度始终平行于canvas画布，不受旋转影响，就像精灵模型一样。
2024-02-05 11:50:44
1324
原创 移动端左滑删除交互
移动端项目开发做删除操作时常用的一个交互就是左滑出现删除按钮，点击进行删除。可以自己写样式、动画，也可以用更简单快捷的方式开发，使用现成的组件效果更好，更稳定，可以使用 uView 的 SwipeAction 滑动单元格实现。
2024-02-01 15:36:58
539
原创 three.js加载模型
three.js是一款基于原生web GL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。
2024-01-09 09:38:48
973
原创 dhtmlx-gantt甘特图
需求：1、不同状态的任务用不同颜色展示2、当前日期添加竖线标志3、周末设置背景颜色4、可按小时、日、周切换（切换时间范围也需同步修改）官方Demo。
2023-11-23 15:59:37
1111
5
原创 uniapp上传手机相册图片、视频或拍摄图片、视频上传
一开始想用现成组件uView的u-upload来实现，做到一半发现使用这个组件上传图片没有问题，可以满足从相册上传、直接拍摄、预览功能。但是，视频好像不支持预览，不知道是我写法不对还是怎么回事/(ㄒoㄒ)/~~最终图片使用的u-upload组件，视频用了uniapp API 的 uni.chooseVideo()方法。
2023-11-23 14:08:02
3063
2
原创 使用DPlayer插件预览视频
最近开发了一个PC端预览视频的需求，特此记录下，方便以后查看预览视频的插件有很多，我最后选了DPlayer，这个插件使用简单，使用文档很详细。
2023-11-15 11:07:45
1509
4
原创 vue使用dagre-d3画流程图
edges用来存储线条数据，start是开始节点，end是结束节点，label可以给线条命名。还可以使用render.shapes()自定义形状。需求：根据表格中的工序名称和上工序生成流程图。2）circle,ellipse(椭圆)数据处理，把表格数据转变成节点和线条数据。3）diamond(菱形)这世界很喧嚣，做你自己就好。1）rect(长方形)
2023-10-18 15:00:29
3541
5
原创 HBuilderX运行到手机或模拟器调试检测不到设备
开发小程序或app时有时需要在真机上进行调试，有的功能必须要在真机上才能验证，例如：扫码。而且，通过真机调试才能确保软件开发的准确性和页面显示的完整性。在使用HBuilderX进行调试时有时会遇到下面这种情况，提示“没有检测到设备，请插入设备后点击刷新再试”。但是明明已经连接好了设备，不管怎么刷新都识别不到。
2023-10-11 18:06:12
4176
1
原创 el-table分页多选，切换下一页后上一页仍然保持勾选状态
el-table默认切换分页后，前一页选中的数据项会自动取消选中。而在实际开发中大部分场景是希望切换分页后不要清除上一页已选的数据项。
2023-08-31 17:06:23
1784
原创 echarts绘制中国地图，添加标记，点击省份展示市区地图
功能描述：页面初始化展示中国地图，并设置了三个省份的标记点，点击省份进入下一级市区地图，再次点击地图回到中国地图。
2023-08-24 16:04:08
3834
5
原创 若依切换菜单路由跳转成功，没有调接口页面空白，刷新后正常
前端项目若依版本号是 RuoYi-Vue-Plus v5.1.0，在开发过程中有时会出现切换菜单或者tab，页面空白的情况，刷新页面后又恢复正常了。多次复现出现这种情况一般是在页面停留了几分钟再操作，偶尔也会莫名奇妙的出现，具体什么原因还不明确。在网上找了些资料，看到部分开发者也遇到过这个问题，应该是框架本身的bug，可能是由于在AppMain中用了transition，组件内又使用了transition导致的。删除后就没有再遇到跳转空白的情况了，虽然没有路由过渡动画了，但是保证系统正常使用才是最重要的。
2023-08-16 11:38:04
1972
6
原创 前端项目引入高德地图
进入高德开发平台申请，具体操作可以参考官方提供的文档说明准备-地图 JS API 2.0 | 高德地图API按照上面的步骤就可以成功申请一个应用，得到 key 和 安全密钥，后面都会用到。
2023-08-14 18:15:25
1357
3
原创 CSS使用过渡动画实现展开折叠效果
前端页面展开/折叠效果可通过v-show控制显示隐藏，但这样页面交互太刻意了，显得不是很顺畅，为了提高用户使用体验感可以使用过渡动画实现平缓地展开折叠效果~
2023-07-27 11:05:11
5909
1
原创 vue让光标一直聚焦到页面的某个输入框
我尝试了用其他方法，给 :focus绑定一个变量，初始化时赋值为true,操作下拉选择仓库的时候会触发@change事件，此时再给 :focus绑定的变量赋值为 true。如上图，要求光标始终聚焦在出库单输入框，我们第一想到的就是给输入框加上 :focus = true，但是实际上如果我们进行了其他操作，例如操作了选择仓库，这个时候光标就从出库单失焦了。注：给出库单输入框绑定失焦事件，失焦时 :focus 绑定的变量值赋为 false，切换下拉再重新赋值为 true 就可以了。这世界很喧嚣，做你自己就好。
2023-07-12 11:03:45
1484
1
原创 vue生成二维码和条形码
以上就可以生成二维码、条形码了，不过如果在页面初始化的时候生成可能会出现转码失败的情况，这个时候可以尝试用nextTick包裹，或许可以解决问题。安装依赖：npm install qrcodejs2 --save。安装依赖：npm install jsbarcode --save。调用 new QRcode 生成二维码。调用JsBarcode构造函数生成条形码。在需要生成二维码的页面引入即可。在需要生成条形码的页面引入即可。
2023-07-11 16:06:59
1184
1
原创 vue项目关闭浏览器清空localStorage中存储的数据
上面大致描述了localStorage的优缺点，下面我们一起来看下，有的业务场景中当关闭浏览器窗口时怎么实现清空localStorage中的数据。实现思路大致就是给项目添加一个监听器，在项目销毁前移除localStorage中的数据，一般这个监听写在App.vue文件中。浏览器兼容性不全面，IE浏览器在IE8以上的才支持（影响不大）数据永久存储，如果没有手动清空，数据会一直保存在浏览器缓存中。数据存储大小5MB，通常以json格式的字符串保存。可以跨页面存储数据，实现数据共享。
2023-06-29 11:43:16
3398
3
原创 el-select触发change事件时同时传多个参数
el-select是项目开发中常用的下拉选择表单组件，有时在和后端联调会遇到既要传下拉的value值还要传下拉的label值或者是接口指定的某个值。
2023-06-15 10:43:38
3193
原创 js识别当前设备是pc端 | 移动端 | pad端
项目开发中很多时候会遇到要求系统既要在pc中运行也可以在手机上访问的需求，这是时候就需要判断一下系统运行的平台来做页面适配。把识别的平台保存在vuex中，在需要用的页面直接取即可。在main.js中添加如下代码。
2023-06-09 10:19:57
2371
原创 vue路由跳转携带的参数消失了
最近我发现我用params传参时，参数怎么也接收不到，地址栏url中也看不见参数，控制台也不见报错，于是上网查了下原来用第一种方式传参页面刷新后参数会消失，从而获取不到，第二种方式就不会出现参数消失的情况。方法一：在配置路由的时候添加动态参数，路由跳转时还是采用第一种params传参，获取参数直接使用this.$route.params.code。但是我做的这个项目有点特殊，必须要通过路由的name进行跳转，下面两种方法我都尝试了，可以成功获取到了参数，亲测有效(*^_^*)1）params传参。
2023-05-31 17:04:01
2374
原创 解决element弹窗打开时页面往左抖动
相信很多人在使用element的弹窗组件el-dialog时都遇到过窗口往左偏移的问题，出现这个问题可能是因为页面出现了滚动条，在窗口打开后body标签上增加了padding-right: 17px;所以，我们可以在代码中强制修改body的样式，如下。
2023-05-23 17:11:20
610
1
原创 WebSocket实时通讯
websocket是HTML5开始提供的一种网络通信协议，使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在websocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。ws.send() 向服务器发送数据ws.close() 关闭连接ws.onopen 建立连接时触发ws.onmessage 客户端接收服务端数据时触发ws.onerror 通信错误时触发ws.onclose 关闭连接时触发。
2023-05-23 16:12:08
272
原创 vue单选按钮，重复点击可取消选中
项目开发中常用的单选组件例如el-radio、u-radio 组件自身是不支持取消选中，一旦选择了就只能切换选项不能取消选中。而实际开发中有些需求是希望单选按钮不但能够切换同时还允许取消选择。
2023-05-10 14:34:45
2728
原创 vue项目接入神策，数据埋点
所谓埋点就是在应用中特定的流程收集一些信息，用来跟踪应用使用的情况，记录用户在系统中的操作行为轨迹，后续用来进一步优化产品或提供运营的数据支撑，包括访问数、访客数、停留时长、页面浏览数和跳出率。埋点采集信息大致分为两大类：页面统计，操作行为统计。自动采集事件埋点，主动触发页面浏览事件，一般只在页面配置后调用一次即可。在main.js文件中，将神策埋点信息挂载到vue实例下。事件埋点（页面上事件用这个）
2023-04-28 12:06:43
2487
原创 下载excel文件，根据后端返回的文件流
sid只是我这个项目获取文件流的一个参数，大家可以根据自己实际项目传参。以上代码便可以轻松的下载excel文件啦，有需要的小伙伴自取哈~~
2023-04-28 11:13:34
117
1
原创 echarts的gallery类似图表库
最近发现echarts的gallery访问不了了，于是找了一些其他的图表网站，有需要的小伙伴们可以去这上面看看。
2023-04-28 10:17:17
303
1
原创 uniapp(安卓、H5)在线预览pdf实现
在static目录下新建一个pdf文件夹，将hybrid放到pdf目录下。注意：下载整个文件，只需要保留里面。
2023-04-28 10:03:25
3278
12
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人