vue.js
文章平均质量分 56
辣姐什么鬼
这个作者很懒,什么都没留下…
展开
-
VUE+前端数据存储indexDB
背景最近项目中基于需求限制需要使用mineMap地图绘制路段,路段数据有3万+条(大概27.6M),前后端请求一次耗时38s,这么长的基础数据请求时间对任何一个项目来说都是无法接受的。基于此前后端做了以下操作以期解决这个问题:后端清除不需要的返回字段,处理后数据大小降至18.6M,请求时间缩短至28s 前端寻求浏览器存储大量数据的方案只在第一次打开页面时请求,后续均从浏览器存储中获取数据(indexDB) 路段数据由基础路段和虚拟路段组成,虚拟路段可能会变化,沟通此处需求是否可以变更为只渲染..原创 2022-02-28 17:27:06 · 4670 阅读 · 2 评论 -
Element 树形控件el-tree在实际项目中的应用demo
整理了一下Element树形控件el-tree在实际项目中的完整应用代码,包括样式和功能都有做处理,基本包括以下内容:样式已初步编写,可直接应用 el-tree的滚动条出现及样式 限制节点宽度,超出省略号并添加title 节点前图标及样式 支持关键字筛选树 默认选中根节点 可进行节点添加、编辑、删除 支持默认展开N级树 可根据实际需要增删功能基本实现效果如下:完整代码如下,可直接新建vue文件复制代码运行查看效果:目前我能想到的实际项目功能就这些,有额外的功能需求的可以原创 2020-05-21 17:21:15 · 2057 阅读 · 0 评论 -
数组数据的分组处理
数组数据分组需求来源如下,后端一次返回所有数据,前端需要对接收数据进行按天、周、月进行分组显示(此需求不需要严格按照实际周和月区分,所以只按1天7天30天分组)// 图表数据分组方法:arr1-图表横坐标,arr2-图表纵坐标数据,group-以几条数据为一组export function dataGroupFunc(arr1, arr2, group) { const n...原创 2020-04-02 10:08:58 · 978 阅读 · 0 评论 -
vue中this.$set修改对象属性不更新问题
小问号,你是否有很多的朋友?当我this.$set修改对象属性竟然没有引发更新的时候我是崩溃的,我甚至开始怀疑起这个代码、这个编辑器甚至这个浏览器在针对我_(:з」∠)_最终原因是初始对象中没有这个属性时,我直接用obj.attr= [];新增了一个attr属性,导致在this.$set(this.obj, 'attr', '[1,2,3]');时没有引发更新其实新...原创 2020-03-28 10:43:37 · 5518 阅读 · 0 评论 -
vue+elementUI+echarts使用过程中遇到的坑--个人总结(不定时更新)
最近在用vue,_(:3」∠)_腥风血雨啊,这里总结一些学习使用过程中遇到的坑,因为是学习中所以会一直更新总结目前是webpack下开发 1、图片的地址要用require(补充:当你的图片资源放在src目录下的话需要)navList:[ {src:require('../assets/home.png'),txt:"首页",href:"#" }]设置background...原创 2018-04-25 10:16:50 · 20373 阅读 · 6 评论 -
maptalks+three.js+vue webpack项目实现二维地图上贴三维模型
我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_最终效果如图:(地图上添加一个“三维地图”的toolbar按钮,点击后在二维地图上贴上建好的三维模型点击显示弹框)以下都在已经引入并且初始化maptalks地图的基础上,如何引入使用maptalks可以查看博客https://blog.csdn.net/liona_koukou/article/details/84316065...原创 2018-12-24 12:01:52 · 10416 阅读 · 0 评论 -
vue+导航锚点联动-滚动监听和点击平滑滚动跳转
最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome完成这个功能需要注意:1、点击导航平滑滚动到导航内容处2、div内滚动时当前导航需要做响应代码如下:1、html结构(因为从项目里截取代码数据内容就不贴出来了,不算难点,这个可以根据自己的项目进行调整,相应的方法和类名别弄错就行)<div class="all-titl...原创 2019-01-08 18:07:43 · 11640 阅读 · 7 评论 -
Vue data对象中的属性对maptalks+cesium三维地图项目的性能影响(vue项目三维地图性能优化)
这个思考来自于我们的三维项目中当对三维地图的单体进行颜色等的属性修改时发现整个地图操作变得不流畅:左侧结果列表点击某一项-》地图跳转到这一项的位置-》该项对应的三维单体高亮-》从跳转开始变得迟缓然后拖拽地图也变得卡顿最终定位是存放单体属性的变量问题:在把maptalks+cesium的方法(主要是单体高亮的方法,这些方法需要共同维护几个属性和对象值)在vue项目里实现时我理所当然的...原创 2019-02-26 17:50:20 · 4867 阅读 · 5 评论 -
Vue-CLI3.0项目搭建过程系列一:项目创建及基本插件安装
Vue-cli3官方:https://cli.vuejs.org/zh/guide/这个系列计划从零开始搭建一个Vue-CLI3.0的项目,其中会包括实际项目目录框架搭建、常用的插件安装使用方法(还会详细介绍vuex、axios、router、权限管理等在具体项目里的使用),最终项目会发布在GitHub上以便大家下载第一部分我们讲一个Vue-CLI3.0的项目的创建及基本插件安装1、首...原创 2019-04-26 18:09:31 · 1478 阅读 · 0 评论 -
vue+elementUI(el-upload)图片压缩,默认同比例压缩
这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况,我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储,结合elementUI的el-upload组件实现图片上传功能(简单来说就是用户是老大)1、提取出压缩方法,放在公共方法.js文件里/** 图片压缩,默认同比例压缩 * @param {Object} fileObj * 图片对象 * 回调函数有一个参...原创 2018-12-06 16:54:44 · 15010 阅读 · 29 评论 -
vue项目中实现maptalks地图上弹框使用videojs播放实时视频rtmp流
不限制于vue项目,区别只是相关文件的引入最终实现效果如下:1、首先引入需要的资源:vue-video-player、maptalks相关npm install vue-video-player --savenpm install maptalks --save2、以vue cli3.0为例,在vue.conig.js文件中添加配置chainWebpack: ...原创 2018-11-21 16:33:14 · 4803 阅读 · 1 评论 -
vue+webpack项目环境搭建说明
1、安装node.js环境根据需求下载32位或64位安装包-node.js官网去下https://nodejs.org/en/查看是否安装成功cmd -》node -v 查看nodenpm -v 查看npm显示node和npm的版本号则安装成功 2、安装vue\vue-cli#全局安装 vue-cli脚手架npm...原创 2018-10-11 09:36:11 · 426 阅读 · 0 评论 -
axios同时多次请求同一个接口(参数不同)导致返回数据混乱
更新:遇到这种情况,首先请后台排查是否是后台问题,我们的项目在遇到不同接口数据也紊乱了之后最终发现是后台问题。。在这期间前端背了很久的锅,哭vue项目里使用axios对同一个接口同时进行多次请求导致返回数据混乱,比如:第一次请求返回的数据跑到别的请求返回里在尝试了一些解决方法之后个人还是建议直接与后台沟通更改接口逻辑,将所有参数放到数组里后台统一接收并返回所有数据再由前端进行数据的拆分...原创 2018-10-08 17:40:24 · 13089 阅读 · 0 评论 -
vue+elementUI表单和图片上传及验证
最终实现需求如下图:form表单内容与重点人员图片同时上传且图片为必填项分析弹框页需要解决的问题有:1、表单内容的验证及必填项2、新增和编辑用同一个组件如何处理数据3、图片需要和信息一起传递(即不允许自动上传)4、图片必填的验证问题针对上述问题作出方案:1、el-form的表单验证需要注意几个地方:a:el-form-item的prop值需要和表单标签的v-...原创 2018-10-10 15:37:13 · 28966 阅读 · 17 评论 -
Vue+elementUI表单正则校验
Vue+elementUI表单正则校验数字校验 var checkNumber = (rule, value, callback) => {if (value && value !== ''){let regEn = /^(\-|\+)?\d+(\.\d)?$/if (!regEn.test(value)) {callback(...原创 2018-11-09 11:10:42 · 5527 阅读 · 1 评论 -
解决vuex存储复杂参数(如对象数组等)刷新数据丢失问题
我需要在搜索页拿到结果之后跳转到搜索结果页并携带搜索结果尝试过几种方法之后最终采用vuex+sessionStorage结合的方法在mutations中setResultValue(state,flag){ sessionStorage.setItem("resultValue", JSON.stringify(flag)) state.resultValue = flag...原创 2018-11-07 18:27:58 · 7970 阅读 · 1 评论 -
解决vue+webpack项目接口跨域问题
1、config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost)proxyTable: { '/api': { target: 'http://10.xx.xx.xx:8080/renter-server', // 开发环境 // target: 'http://10.xx.xx.xx:8...原创 2018-11-07 18:52:32 · 953 阅读 · 0 评论 -
vue-video-player实现实时视频播放(监控设备-rtmp流)
监控设备播放效果如下 1、vue项目安装vue-video-playernpm install vue-video-player --save 2、编写视频播放组件(放上完整的组件例子,父组件调用时给videoSrc和playerOptions.sources[0].src赋值就可以播放了,具体操作有注释)注:style样式部分用了lang=scss,如果自...原创 2018-11-13 11:05:24 · 40588 阅读 · 84 评论 -
vue引入maptalks地图及聚合效果
1、安装maptalks.jsnpm install maptalks --save2、安装聚合mapkerclusternpm install maptalks.markercluster3、vue页面引入import * as maptalks from 'maptalks'import {ClusterLayer} from 'maptalks.marker...原创 2018-11-21 11:30:29 · 10958 阅读 · 5 评论 -
vue搭建脚手架报错:rollbackFailedOptinal:verb npm-session解决
vue搭建脚手架报错:rollbackFailedOptinal:verb npm-session解决如果你是在公司,而你的公司又用了代理连的外网想办法直接连外网吧,问题就是代理造成的我用手机连电脑USB共享网络_(:3」∠)_心好累原创 2018-01-11 14:37:49 · 1385 阅读 · 0 评论