辣姐什么鬼-CSDN博客

原创 maptalks引入minemap地图资源插件：maptalks.minedata

踩了将近一天坑最终成功引入，插件官方给出的文件注意把minemap.js和minemap.css的版本升级到2.1.0即可。其他按照官方说明执行。基于合作项目需要maptalks需要使用minemap地图资源，找到插件maptalks.minedata。

2023-03-17 11:25:16 429 1

原创 VUE+webrtc-streamer实现实时视频播放（监控设备-rtsp）

VUE+webrtc-streamer实现实时视频播放（监控设备-rtsp）

2022-08-30 15:58:59 17828 55

原创 VUE+前端数据存储indexDB

背景最近项目中基于需求限制需要使用mineMap地图绘制路段，路段数据有3万+条（大概27.6M），前后端请求一次耗时38s，这么长的基础数据请求时间对任何一个项目来说都是无法接受的。基于此前后端做了以下操作以期解决这个问题：后端清除不需要的返回字段，处理后数据大小降至18.6M，请求时间缩短至28s 前端寻求浏览器存储大量数据的方案只在第一次打开页面时请求，后续均从浏览器存储中获取数据（indexDB）路段数据由基础路段和虚拟路段组成，虚拟路段可能会变化，沟通此处需求是否可以变更为只渲染..

2022-02-28 17:27:06 4496 2

原创 CSS:头部导航设置复杂背景图片自适应显示（与menu菜单贴合-自用）

场景：头部导航是比较复杂的背景图片，有时还需要和menu菜单位置贴合，同时需要自适应不同分辨率，实现结果如下：192013662048原始背景图片如下：代码如下：.hearder-panel { position: absolute; top: 0; right: 0; left: 0; height: 70px; line-height: 50px; b

2020-06-24 12:01:17 2862

原创 CSS科技感四角边框

实现效果：使用before和after就可以实现，代码量不多，长度颜色都可以自己调整实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:.

2020-06-22 11:30:51 7686 1

原创 Vue+Element 用同一个el-dialog弹框完成新增和编辑操作

在实际业务中我们往往选择用同一个弹框组件来同时实现新增和编辑操作。但el-dialog弹框的visible.sync设置显示和隐藏往往带来很多额外的工作：处理数据的变更，带校验表单的内容移除和校验清除等这需要我们在各种隐藏的bug里耗费很多精力，处理难度会随着表单内容复杂程度的增加不断提高。（实际业务场景中经常出现非常复杂的表单页面）下面的例子使用v-if既保证数据干净每次都是新弹框不存在数据遗留和互相污染，又保留弹框弹出效果让整个调用逻辑非常简单不用担心...

2020-05-22 11:14:19 19583 10

原创 Element 树形控件el-tree在实际项目中的应用demo

整理了一下Element树形控件el-tree在实际项目中的完整应用代码，包括样式和功能都有做处理，基本包括以下内容：样式已初步编写，可直接应用 el-tree的滚动条出现及样式限制节点宽度，超出省略号并添加title 节点前图标及样式支持关键字筛选树默认选中根节点可进行节点添加、编辑、删除支持默认展开N级树可根据实际需要增删功能基本实现效果如下：完整代码如下，可直接新建vue文件复制代码运行查看效果：目前我能想到的实际项目功能就这些，有额外的功能需求的可以

2020-05-21 17:21:15 1756

原创 mpvue 计算属性computed传参写法console.log有输出但页面上没有值

需求来源：微信小程序中要对列表的日期字符串进行处理以符合设计效果如下图我们用Vue开发项目应该都处理过页面遍历数组渲染时用computed传参的写法来处理数据，此时computed写法如下：computed: { myfilter() { return function(val){ return val + 'l...

2020-05-07 15:46:34 2554 1

原创日期数据数组按实际周和实际月进行分组

实现效果如下：原始数据是两个数组，date数组存放日期，value数组存放日期对应的数值，经过按周分组和按月分组输出week和month（2020-02-27是周四，2020-03-02是周一，2020-03-09也是周一，符合要求）封装了两个方法，代码如下：groupByWeek和groupByMonth，输入值均为date-日期数组和value-值数组const date = [...

2020-04-15 09:18:14 1493

原创数组数据的分组处理

数组数据分组需求来源如下，后端一次返回所有数据，前端需要对接收数据进行按天、周、月进行分组显示（此需求不需要严格按照实际周和月区分，所以只按1天7天30天分组）// 图表数据分组方法:arr1-图表横坐标，arr2-图表纵坐标数据，group-以几条数据为一组export function dataGroupFunc(arr1, arr2, group) { const n...

2020-04-02 10:08:58 949

原创 for of + await顺序执行（用于循环请求接口）

鉴于现阶段需求，大量图片（一次限制500张）依次单张上传，不想频繁进行请求，可采用以下两种方法，第一种请求间隔递增，第二种间隔相同时间请求。let a = [1,2,3,4,5];function delay(index){ return new Promise((resolve)=>{ setTimeout(resolve,index*1000); ...

2020-04-01 17:26:40 4524

原创 vue中this.$set修改对象属性不更新问题

小问号，你是否有很多的朋友？当我this.$set修改对象属性竟然没有引发更新的时候我是崩溃的，我甚至开始怀疑起这个代码、这个编辑器甚至这个浏览器在针对我_(:з」∠)_最终原因是初始对象中没有这个属性时，我直接用obj.attr= [];新增了一个attr属性，导致在this.$set(this.obj, 'attr', '[1,2,3]');时没有引发更新其实新...

2020-03-28 10:43:37 5463

原创 js RTSP地址正则校验

先放一个主流RTSP地址格式汇总https://blog.csdn.net/qq_34654240/article/details/79924390不逼一逼自己你永远不知道前端能拼个什么校验出来我就是个正则渣，我能搞出来现在这个规则我已经很满意了泪目( Ĭ ^ Ĭ )只为做个记录看看以后有没有别的写法先说需求，前端需要严格校验RTSP地址，上面主流RTSP我都试过了可以通过rtsp...

2019-12-30 11:09:08 2084

原创改造layui-树（tree）组件的添加、编辑、删除操作（补充上一篇）

这篇是用来补充上一篇：改造layui-树（tree）组件支持添加、编辑、删除的自定义（弹框）操作（https://blog.csdn.net/liona_koukou/article/details/99824998）的，鉴于有同学问代码里下面这两个的详细代码在此做一个树操作的补充limitNodeAddLevel: 0, // 设置第X级节点不允许添加操作limitNodeDelLeve...

2019-11-14 11:07:04 12691 20

原创 maptalks标注（mark）——动态图标效果

最终效果图如下：1、下图这种效果是用了官方提供的插件maptalks.animatemarker，地址https://github.com/maptalks/maptalks.animatemarker2、这种是用了maptalks的Mark的变形动画，官方例子地址https://maptalks.org/examples/cn/animation/marker-anim/#anima...

2019-09-12 09:56:30 8433

原创改造layui-树（tree）组件支持树的关键字搜索操作

效果如下：一个不支持关键字搜索的树不是一个德智体美全面发展的好树，看了layui源码后发现官方其实提供了tree的搜索功能找到tree.js文件在基础配置这里发现showSearch，原来官方把这里注释掉了，放开注释就行（我下的版本里是注释掉的，可以看看自己的版本如果没有可以自己加上就行）接下来我们在当前页面搜showSearch字段找到如下可以看到在树上面自己添加了一...

2019-09-03 11:10:06 5296

原创改造layui-树（tree）组件支持添加、编辑、删除的自定义（弹框）操作

新公司的项目用了layui，使用过程中踩了不少坑，大多来自tree组件，接下来如果有时间会一一码下来layui的tree组件可以开启节点操作（添加、编辑、删除），用过的同学应该了解官方提供的逻辑是点击添加树上新增一层并命名为“未命名”然后我们在操作节点的回调operate里可以做与后台的交互，这样一个添加操作要走两步：添加+编辑。而按照我们的代码习惯添加的接口走完之后我们会重新绘制树——tre...

2019-08-20 10:51:15 23164 35

原创 Vue-CLI3.0项目搭建过程系列五：项目中样式管理（css reset等）

关于公共样式assets下新建css文件夹用来存放样式文件，在它下面新建common.scss文件用来放css reset(样式重置)，根据项目需要可做调整* { padding: 0; margin: 0; box-sizing:border-box;//方便设计稿取值使用}html,body { position:relative; width:100%; ...

2019-07-18 15:38:06 1114

原创 Vue-CLI3.0项目搭建过程系列四：项目中axios应用

下面我们来说项目里的请求方法-axios插播（来自网友）：存储token建议state+localStorage因为state是单页的，为了同一个浏览器打开第二个网页而不需要登录，所以要使用cookie或者localstorage存储，为什么不选用cookie：1，cookie存储量小；2，cookie存储个数有限；3，其实是最重要的请求时会带上cookie，增加网络负担，所以建议用stat...

2019-07-18 14:01:08 680

原创 Vue-CLI3.0项目搭建过程系列三：项目中router路由应用包括路由拦截

项目中我们使用router进行路由管理router文件夹下创建index.jsimport Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export const routerMap = [ { path: '*', redirect: '/404', hidden: true }, { ...

2019-07-17 15:41:34 1235

原创 Vue-CLI3.0项目搭建过程系列二：项目中vuex应用

系列一中我们安装配置了项目常用的一些插件，接下来是vuex在项目中的应用vuex官网解释如下目前我写过的项目中vuex主要是用来存放用户的信息和登录状态、权限相关等，仅在本文中介绍用法。src文件夹下新建store文件夹-》新建index.js文件然后main.js文件中引入：import store from './store'并new Vue({ sto...

2019-07-17 14:49:23 255

原创 Ant Design of Vue 时间选择器实现时分秒时间段选择（disabledHours、disabledMinutes、disabledSeconds、禁用时间）

最终实现按效果如下：即实现时分秒时间段的选择，结束时间要大于开始时间使用了disabledHours、disabledMinutes、disabledSeconds来实现禁用时间完整组件代码如下：可直接引用运行查看效果<template> <div class="select-range-time"> <a-row style...

2019-05-22 15:58:45 19358 7

原创 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 1438

原创 Vue data对象中的属性对maptalks+cesium三维地图项目的性能影响（vue项目三维地图性能优化）

这个思考来自于我们的三维项目中当对三维地图的单体进行颜色等的属性修改时发现整个地图操作变得不流畅：左侧结果列表点击某一项-》地图跳转到这一项的位置-》该项对应的三维单体高亮-》从跳转开始变得迟缓然后拖拽地图也变得卡顿最终定位是存放单体属性的变量问题：在把maptalks+cesium的方法（主要是单体高亮的方法，这些方法需要共同维护几个属性和对象值）在vue项目里实现时我理所当然的...

2019-02-26 17:50:20 4757 5

原创 vue+导航锚点联动-滚动监听和点击平滑滚动跳转

最终效果如下：（注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内）-chrome完成这个功能需要注意：1、点击导航平滑滚动到导航内容处2、div内滚动时当前导航需要做响应代码如下：1、html结构（因为从项目里截取代码数据内容就不贴出来了，不算难点，这个可以根据自己的项目进行调整，相应的方法和类名别弄错就行）<div class="all-titl...

2019-01-08 18:07:43 11580 7

原创 maptalks+three.js+vue webpack项目实现二维地图上贴三维模型

我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_最终效果如图：（地图上添加一个“三维地图”的toolbar按钮，点击后在二维地图上贴上建好的三维模型点击显示弹框）以下都在已经引入并且初始化maptalks地图的基础上，如何引入使用maptalks可以查看博客https://blog.csdn.net/liona_koukou/article/details/84316065...

2018-12-24 12:01:52 10229

原创 JavaScript鼠标跟随显示内容

需求来自于地图绘制图形时想要提示内容比如“单击左键开始绘制”“双击左键结束绘制”，在此封装一个鼠标跟随提示的方法，要在vue里使用可相应做一下调整效果如下：（截图无法截出鼠标，可直接运行代码查看效果）实际项目应用效果：代码如下：<!DOCTYPE html><html lang="en"><head> <meta ch...

2018-12-12 14:28:52 485 2

转载 vue实现每隔几秒请求一次接口（轮询）

项目中我们经常需要实现轮询-每隔几秒请求一次接口刷新数据一般都会使用setInterval，但要注意单纯使用它会导致页面卡死，关于怎么解决这个问题感谢年树先生的分享，在此做个记录方便以后查阅原博地址如下：https://www.qdfuns.com/article/51117/15a67319ddea5b043a466583d7e734c6.html解决方法如下：window.s...

2018-12-10 17:41:45 53468 19

原创 vue+elementUI（el-upload）图片压缩，默认同比例压缩

这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况，我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储，结合elementUI的el-upload组件实现图片上传功能（简单来说就是用户是老大）1、提取出压缩方法，放在公共方法.js文件里/** 图片压缩，默认同比例压缩 * @param {Object} fileObj * 图片对象 * 回调函数有一个参...

2018-12-06 16:54:44 14841 29

原创 css-全屏背景图片

一般登录页首页都会做成一张背景大图铺满全屏，这种需求很多，但如何实现兼容一直困扰我。暂时这种设置是我能使用的最好的方式，但还是会丢失部分图片元素，如果有更好的方法欢迎评论提出。position: fixed;left:0;right:0;top: 0;bottom: 0;background: url('./../../assets/baseImg/home_bg.jpg') ...

2018-11-29 12:03:44 1543

转载 element-ui的el-select如何回显value对应的label值

写在这里只为一个记录，感谢原作者分享，原作者地址：https://segmentfault.com/a/1190000016737140?_ea=4798728原因是value的格式存在问题，数据库读取到的数据不一定为number或string类型需要自己转换一下总结：显示不正常多数是由于得到的数据类型对应不上表单操作的数据类型进行相应转换即可即：option的value值如果...

2018-11-28 11:43:47 20224 1

原创 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 4703 1

原创 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 10731 5

原创 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 39307 84

原创 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 5479 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 933

原创解决vuex存储复杂参数（如对象数组等）刷新数据丢失问题

我需要在搜索页拿到结果之后跳转到搜索结果页并携带搜索结果尝试过几种方法之后最终采用vuex+sessionStorage结合的方法在mutations中setResultValue(state,flag){ sessionStorage.setItem("resultValue", JSON.stringify(flag)) state.resultValue = flag...

2018-11-07 18:27:58 7919 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 389

原创 vue+elementUI表单和图片上传及验证

最终实现需求如下图：form表单内容与重点人员图片同时上传且图片为必填项分析弹框页需要解决的问题有：1、表单内容的验证及必填项2、新增和编辑用同一个组件如何处理数据3、图片需要和信息一起传递（即不允许自动上传）4、图片必填的验证问题针对上述问题作出方案：1、el-form的表单验证需要注意几个地方：a：el-form-item的prop值需要和表单标签的v-...

2018-10-10 15:37:13 28621 17

原创 axios同时多次请求同一个接口（参数不同）导致返回数据混乱

更新：遇到这种情况，首先请后台排查是否是后台问题，我们的项目在遇到不同接口数据也紊乱了之后最终发现是后台问题。。在这期间前端背了很久的锅，哭vue项目里使用axios对同一个接口同时进行多次请求导致返回数据混乱，比如：第一次请求返回的数据跑到别的请求返回里在尝试了一些解决方法之后个人还是建议直接与后台沟通更改接口逻辑，将所有参数放到数组里后台统一接收并返回所有数据再由前端进行数据的拆分...

2018-10-08 17:40:24 12876

jquery.form.js

js+table分页

空空如也