VUE实际项目需求功能实现
文章平均质量分 55
使用vue开发实现实际工作项目中需要使用的一些组件或应用,展示多彩性的前端开发。
坐在办公室的咸鱼
咸鱼一条
展开
-
VUE引入高德地图实现驾车轨迹显示(简易版)
当我们要进行车辆轨迹查看时,实际逻辑是传递了两个经纬度点位的数据,我们使用高德api自带的轨迹规划可以实现线路图的展示。1. 首先需要在高德地图注册对应的服务,注意绑定服务一定要是`web端`,如下图,我们会拥有对应的key值和安全密钥。,比如车辆轨迹的函数我们绑定在了div元素里,但是如果我们不进行特殊处理,只在methods里定义。需要注意的是,由于我们的初始化地图是写在methods方法里的,所以调用起来有一定的问题。我们每次进入或者切换车辆时,防止信息重叠展示,都是进行点位或者线路的清除。原创 2024-01-17 11:31:50 · 1488 阅读 · 0 评论 -
vue项目实现PC端各分辨率适配
2. 配置rem.js文件(名称自己随意取就可以),一般放置在utils文件夹里,没有就新建一个utils文件夹与assets文件夹同级。如果使用postcss-px2rem在运行时报错,可以卸载postcss-px2rem,下载postcss-pxtorem,创建一个postcss.config.js与vue.config.js同级。remUnit要和rem.js中的baseSize一致。3. 在main.js中引用配置好的rem.js。4. 在vue.config.js中进行相关配置。原创 2023-04-24 09:01:21 · 1864 阅读 · 0 评论 -
vue实现人像框摄像头(手机端,PC端也适用)
1. 在浏览器上ios和Android调用都没问题,但是微信浏览器上ios系统中初次调用摄像头,请求摄像头权限后,会出现视频无显示,无法播放,就算一直重新调用invokingCamera()方法去重新渲染也无效。经研究是由于video宽高均为0,且为暂停状态导致的,不过退出页面,重新进入后又可以正常播放(我猜测是由于这次不需要重新请求摄像头权限)。3. 由于调用手机相册的功能只有三个监听事件(完成、成功、失败),监听不到取消操作,所以,目前解决方法是右上角增加了刷新图标,刷新一下,画面会重新出现。原创 2023-04-26 11:51:51 · 2036 阅读 · 2 评论 -
vue实现思维导图或者组织架构图效果
horizontal是水平排列方式,它的参数是truefalse动态绑定自定义class默认折叠展示展开默认展开// 第一个参数为数据data,第二个参数为是否全部展开});} else {点击事件// e 为 event// 当前项的所有详情 如:id label children移入/移出事件返回值与点击事件大致相同如何渲染节点标签可以对样式进行调整,得到自己想要得的效果本文参考了大神的文章,根据自己的项目做了改动,这里就不展示实际项目的效果图了。原创 2024-01-24 15:37:57 · 3065 阅读 · 4 评论