自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

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

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

2020-03-28 10:43:37

阅读数 17

评论数 0

原创 js RTSP地址正则校验

先放一个主流RTSP地址格式汇总https://blog.csdn.net/qq_34654240/article/details/79924390 不逼一逼自己你永远不知道前端能拼个什么校验出来 我就是个正则渣,我能搞出来现在这个规则我已经很满意了泪目( Ĭ ^ Ĭ )只为做个记录看看以后有...

2019-12-30 11:09:08

阅读数 191

评论数 0

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

这篇是用来补充上一篇:改造layui-树(tree)组件支持添加、编辑、删除的自定义(弹框)操作(https://blog.csdn.net/liona_koukou/article/details/99824998)的,鉴于有同学问代码里下面这两个的详细代码在此做一个树操作的补充 limit...

2019-11-14 11:07:04

阅读数 761

评论数 9

原创 maptalks的动态标注(mark)效果

最终效果图如下: 1、下图这种效果是用了官方提供的插件maptalks.animatemarker,地址https://github.com/maptalks/maptalks.animatemarker 2、这种是用了maptalks的Mark的变形动画,官方例子地址https://ma...

2019-09-12 09:56:30

阅读数 809

评论数 0

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

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

2019-09-03 11:10:06

阅读数 910

评论数 0

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

新公司的项目用了layui,使用过程中踩了不少坑,大多来自tree组件,接下来如果有时间会一一码下来 layui的tree组件可以开启节点操作(添加、编辑、删除),用过的同学应该了解官方提供的逻辑是点击添加树上新增一层并命名为“未命名”然后我们在操作节点的回调operate里可以做与后台的交互,...

2019-08-20 10:51:15

阅读数 4357

评论数 18

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

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

2019-07-18 15:38:06

阅读数 182

评论数 0

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

下面我们来说项目里的请求方法-axios 插播(来自网友):存储token建议state+localStorage因为state是单页的,为了同一个浏览器打开第二个网页而不需要登录,所以要使用cookie或者localstorage存储,为什么不选用cookie:1,cookie存储量小;2,c...

2019-07-18 14:01:08

阅读数 169

评论数 0

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

项目中我们使用router进行路由管理 router文件夹下创建index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export const ...

2019-07-17 15:41:34

阅读数 129

评论数 0

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

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

2019-07-17 14:49:23

阅读数 63

评论数 0

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

最终实现按效果如下:即实现时分秒时间段的选择,结束时间要大于开始时间 使用了disabledHours、disabledMinutes、disabledSeconds来实现禁用时间 完整组件代码如下:可直接引用运行查看效果 <template> <div cl...

2019-05-22 15:58:45

阅读数 2971

评论数 3

原创 Vue-CLI3.0项目搭建过程系列一:项目创建及基本插件安装

Vue-cli3官方:https://cli.vuejs.org/zh/guide/ 这个系列计划从零开始搭建一个Vue-CLI3.0的项目,其中会包括实际项目目录框架搭建、常用的插件安装使用方法(还会详细介绍vuex、axios、router、权限管理等在具体项目里的使用),最终项目会发布在G...

2019-04-26 18:09:31

阅读数 316

评论数 0

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

这个思考来自于我们的三维项目中当对三维地图的单体进行颜色等的属性修改时发现整个地图操作变得不流畅: 左侧结果列表点击某一项-》地图跳转到这一项的位置-》该项对应的三维单体高亮-》从跳转开始变得迟缓然后拖拽地图也变得卡顿 最终定位是存放单体属性的变量问题: 在把maptalks+cesiu...

2019-02-26 17:50:20

阅读数 1379

评论数 0

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

最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1、点击导航平滑滚动到导航内容处 2、div内滚动时当前导航需要做响应 代码如下: 1、html结构(因为从项目里截取代码数据内容就不贴出来了,不算难点,这个可以根...

2019-01-08 18:07:43

阅读数 5400

评论数 3

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

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

2018-12-24 12:01:52

阅读数 3069

评论数 0

原创 JavaScript鼠标跟随显示内容

需求来自于地图绘制图形时想要提示内容比如“单击左键开始绘制”“双击左键结束绘制”,在此封装一个鼠标跟随提示的方法,要在vue里使用可相应做一下调整 效果如下:(截图无法截出鼠标,可直接运行代码查看效果) 实际项目应用效果: 代码如下: &lt;!DOCTYPE html&...

2018-12-12 14:28:52

阅读数 169

评论数 2

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

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

2018-12-10 17:41:45

阅读数 14096

评论数 7

原创 vue+elementUI(el-upload)图片压缩,默认同比例压缩

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

2018-12-06 16:54:44

阅读数 5538

评论数 21

原创 css-全屏背景图片

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

2018-11-29 12:03:44

阅读数 736

评论数 0

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

写在这里只为一个记录,感谢原作者分享,原作者地址:https://segmentfault.com/a/1190000016737140?_ea=4798728 原因是value的格式存在问题,数据库读取到的数据不一定为number或string类型 需要自己转换一下 总结: 显示不正常 多数...

2018-11-28 11:43:47

阅读数 6510

评论数 0

原创 vue项目中实现maptalks地图上弹框使用videojs播放实时视频rtmp流

不限制于vue项目,区别只是相关文件的引入 最终实现效果如下: 1、首先引入需要的资源:vue-video-player、maptalks相关 npm install vue-video-player --save npm install maptalks --save 2、以...

2018-11-21 16:33:14

阅读数 1538

评论数 0

原创 vue引入maptalks地图及聚合效果

  1、安装maptalks.js npm install maptalks --save 2、安装聚合mapkercluster npm install maptalks.markercluster 3、vue页面引入 import * as maptalks from �...

2018-11-21 11:30:29

阅读数 3815

评论数 5

原创 vue-video-player实现实时视频播放(监控设备-rtmp流)

  监控设备播放效果如下   1、vue项目安装vue-video-player npm install vue-video-player --save   2、编写视频播放组件(放上完整的组件例子,父组件调用时给videoSrc和playerOptions.sources[...

2018-11-13 11:05:24

阅读数 12243

评论数 54

原创 Vue+elementUI表单正则校验

Vue+elementUI表单正则校验 数字校验 var checkNumber = (rule, value, callback) => { if (value && value !== ''){ let regEn = /^(\-|\+)?\d+...

2018-11-09 11:10:42

阅读数 1378

评论数 0

原创 解决vue+webpack项目接口跨域问题

1、config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost) proxyTable: { '/api': { target: 'http://10.xx.xx.xx...

2018-11-07 18:52:32

阅读数 501

评论数 0

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

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

2018-11-07 18:27:58

阅读数 2817

评论数 0

原创 vue+webpack项目环境搭建说明

1、安装node.js环境 根据需求下载32位或64位安装包-node.js官网去下 https://nodejs.org/en/ 查看是否安装成功 cmd -》 node -v          查看node npm -v           查看npm 显示node和npm的版本...

2018-10-11 09:36:11

阅读数 153

评论数 0

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

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

2018-10-10 15:37:13

阅读数 11983

评论数 15

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

更新:遇到这种情况,首先请后台排查是否是后台问题,我们的项目在遇到不同接口数据也紊乱了之后最终发现是后台问题。。 在这期间前端背了很久的锅,哭 vue项目里使用axios对同一个接口同时进行多次请求导致返回数据混乱,比如:第一次请求返回的数据跑到别的请求返回里 在尝试了一些解决方法之后个人还...

2018-10-08 17:40:24

阅读数 5080

评论数 0

原创 我要窒息了,我的C币呢,我的C币呢!

我真的要疯了,啊,我的血压!!C币过期作废!!我平常辣么省是为了啥为了啥!! _(:3」∠)_ ∑(‘д′*ノ)ノ ∑(っ °Д °;)っ  

2018-07-19 09:19:35

阅读数 274

评论数 4

原创 在项目中引入新字体

在项目中引入新字体,我的环境是vue+webpack其它环境操作应该差不多1、下载需要的字体文件,我这里需要的是Let'sgo Digital Regular字体,下载压缩包里面只有一个.ttf文件,如果要兼容IE浏览器还需要IE专用文件,推荐在线转换网站https://www.font...

2018-05-24 09:46:18

阅读数 1755

评论数 2

原创 JavaScript图片的放大缩小及拖拽

实现效果如下: 实现代码:   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-...

2018-05-17 14:46:56

阅读数 4586

评论数 5

原创 JavaScript多张图片放大镜效果(不限定图片尺寸,rem单位)

效果如下:可以展示图片列表的放大镜效果,图片尺寸没有要求会自动调整至水平垂直居中效果代码如下,除了图片要替换一下,其它的可直接运行查看效果,enlarge是图片要放大查看的倍数,注意:.bigBox的宽高与.tool的宽高比值要与enlarge保持一致,比如本例中这个比值是4&lt;!do...

2018-05-16 15:12:14

阅读数 478

评论数 0

原创 vue+elementUI+echarts使用过程中遇到的坑--个人总结(不定时更新)

最近在用vue,_(:3」∠)_腥风血雨啊,这里总结一些学习使用过程中遇到的坑,因为是学习中所以会一直更新总结 目前是webpack下开发   1、图片的地址要用require(补充:当你的图片资源放在src目录下的话需要) navList:[   {src:require('...

2018-04-25 10:16:50

阅读数 7567

评论数 5

原创 css-class类选择器样式渲染优先级

今天偶然发现的,class里的类选择器先后顺序已经不影响渲染的优先级了_(:3」∠)_ 先写text-danger再写active但还是按照样式里的先走active再走text-danger 下面这段代码hello color最后出来就是红色的∑(っ °Д °;)っ   &lt;!...

2018-04-12 10:23:56

阅读数 402

评论数 0

原创 css关闭按钮样式

效果图:录屏的时候忘了把鼠标录上,效果是鼠标移上放大变红透明度改变_(:3」∠)_懒得录第二遍了,只需要修改定位的right值和top值 代码:   &lt;!DOCTYPE html&gt; &lt;html lang="en"&g...

2018-04-09 14:44:45

阅读数 3837

评论数 0

原创 jquery根据图片地址得到图片的原始尺寸

两种方法:推荐第二种,第一种存在图片未加载完获取的尺寸宽高均为0的情况 var img=new Image(); img.src=imgInfo[i].src; var realWidth = img.width; var realHeight = img.height; $("...

2018-04-09 09:30:45

阅读数 3507

评论数 0

原创 表单元素input等在IE下错位不能对齐问题——解决方案

我们常遇到输入框、下拉框、按钮等表单元素在同一行的情况,其它浏览器基本没啥问题,IE下却经常出现错位问题。 如下图: 这是测试发给我的bug截图,当初IE下错位我特意加了top:10px\0;来对IE做兼容。我自己的环境是IE11,模拟IE10;测试的环境是IE10,结果问题出现了,我这里...

2018-03-27 11:48:16

阅读数 2311

评论数 0

原创 模拟select样式+功能,兼容IE9+

效果: 代码:用了rem作单位,jquery.js   &lt;!doctype html&gt; &lt;html&gt; &lt;meta charset="utf-8"&gt; &lt;title&...

2018-03-21 09:41:30

阅读数 547

评论数 0

原创 css双圆环旋转效果

效果图如下:鼠标移上去加快旋转速度,rem做单位,两个圆环的图片可以随便找在此不上传了 代码如下:   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;...

2018-03-16 10:58:10

阅读数 1412

评论数 0

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