- 博客(98)
- 资源 (7)
- 收藏
- 关注
RSS订阅原创 前端文件下载（解决a标签多次下载只成功一次）
在测试过程中发现自由第一次点击下载成功，后面在点击下载都失败。最后解决方式是获取blob文件流下载。
2023-08-24 11:29:14
414
原创 基于vue3实现无缝滚动 vue3-seamless-scroll
拷贝列表次数，默认拷贝一次，当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果。singleHeight and singleWidth 是否开启 rem 度量。通过v-model控制动画滚动与停止，默认开始滚动。开启滚动的数据量，只有列表长度大于等于该值才会滚动。在开启鼠标悬停的情况下是否开启滚轮滚动，默认不开启。无缝滚动列表数据，组件内部使用列表长度。动画效果，可以传入贝塞尔曲线数值。动画循环次数，默认无限循环。控制滚动方向，可选值。
2023-07-17 14:45:23
617
原创 已知两点坐标，计算两点的方向角度
在已知两点坐标的情况，我们如果去计算两点的角度呢？在计算角度之前，先了解下会用到的函数Math.atan2Math.atan2()概述Math.atan2()返回从原点(0,0)到(x,y)点的线段与x轴正方向之间的平面角度(弧度值)，也就是Math.atan2(y,x)语法Math.atan2(y, x) 参数y, x数值描述atan2方法返回一个 -pi 到 pi 之间的数值，表示点 (x, y) 对应的偏移角度。这是一个逆时针角度，以弧度为单位，正X轴和点 (
2022-04-13 15:08:01
2592
原创 leaflet 绘制可编辑圆形
Leaflet Draw页面引入 leaflet draw 文件首先在地图上绘制圆形，我们需要圆心坐标（latlng）和半径（radius）来确定需要绘制圆的位置和大小// latlng 圆心坐标点 ，radius 半径let circle = L.circle(latlng, radius);圆形绘制了，现在我们需要把状态改成编辑状态（可拖动、改变半径）circle.editing.enable();添加圆形图层到地图地图上circle.addTo(map)可通.
2022-03-31 11:03:22
1299
原创 WebSocket connection to ‘ws://localhost:8080/api/handler‘ failed: Invalid frame header
proxy:{ '/api/handler':{ target: { protocol: 'wss:', host: '172.31.4.248', }, ws: true, changeOrigin: true, secure: false, }}如上项目中websocket配置的代理；初始建立连接没有问题，能连接成功；但是一会就报错（Invalid f..
2021-11-26 14:29:55
17449
6
原创 vue图片预览缩放 - v-viewer
v-viewer：https://github.com/mirari/v-viewer在实际项目应用中，我们是有出现图片原始宽高很大，所以在页面不好展示，只好同比例缩小图片尺寸显示在列表、详情等地方，这样图片的展示效果不好。那我们的解决方法就是可以点击预览原尺寸图片，当然如果有放大、缩小、移动等效果就更好了。v-viewer就解决了我们的问题安装npm install v-viewer --save引入import Vue from 'vue'import Viewer from
2021-09-22 16:25:35
392
原创 Leaflet.MiniMap 切换地图
在项目中使用leaflet来实现地图的相关效果，其中就有容器地图（大地图）需要切换电子地图和卫星地图；当然这部分最后是实现了，但是发现我们右下角使用leaflet.minimap实现的鹰眼地图（小地图）的底图瓦片没有跟地图的底图瓦片切换对应；如大小地图都是初始化加载电子地图，结果大地图切换成卫星地图的时候，小地图还是电子地图到这里我们肯定是想把小地图也切换为跟大地图一样的底图瓦片，保持视图的统一；通过查看文档和源码我们知道可以使用changeLayer来实现改变底图瓦片图层的效果// 初始
2021-09-17 16:35:23
1553
原创 vue $forceUpdate强制刷新
$forceUpdate强制更新视图渲染。由于vue数据双向绑定的原理，在使用vue的时候一些简单的数据更新，触发视图渲染的行为直接完成。但是也有复杂数据（深结构数据）的时候，如对象里面的数组更新或增加对象长度（添加对象新属性值），就无法触发视图渲染更新了vue不能监听已有对象的属性添加和删除，我们可以创建一个新对象包含原对象和新增对象属性this.obj = Object.assign({}, this.obj, { a: 1, e: 2 })这里也可以用 $forceUpdat
2021-07-14 16:41:10
227
转载 改变this指向 call()、apply()、bind()
相同点三者都是用来改变函数体内部 this 的指向； 三者第一个参数都是this要指向的对象，也就是想指定的上下文； 三者都可以利用后续参数传参； 不同点 bind是返回对应函数，便于稍后调用；apply、call则是立即调用 apply、call接收参数的方式不一样func.call(this, arg1, arg2);func.apply(this, [arg1, arg2]);bind()提供永久的绑定，还会覆盖后面的call\apply命令。使用bind()绑定后，
2021-06-09 10:33:35
127
原创 坐标系的转换 - 地图纠偏
了解下各个厂家使用的坐标系：国家测绘局规定国内的地理位置信息至少进过一次加密，发布GCJ-02加密算法，对真实坐标进行加密处理，称为火星坐标系/国测局坐标。高德地图使用的就火星坐标系（GCJ-02）百度地图在此基础上又进行了一次加密处理，称为百度坐标系（BD-09）世界标准地理坐标(WGS-84)，又称原始坐标，一般国际的GPS使用的就是这种坐标系坐标转换的话，各个厂家都有提供，但是是不公开，得调用接口。下面用eviltransform来进行坐标转换，提供坐标系之间的转换，还提.
2021-04-27 14:29:57
432
原创 vue 使用 v-if 控制组件显示，组件注册监听事件多次执行
在项目中遇到过这样的情况，组件里面注册了window监听事件，组件加载用v-if控制，第一遍加载操作是没有问题，但是在第二遍及之后的加载操作有点问题。window监听事件会触发多次经过检查后发现，当操作完成组件用v-if控制不显示，但是window监听事件还存在并没有被注销，所以导致后面加载的组件操作会显示触发多次监听事件。解决方法：在组件销毁的时候移除当前不需要的window监听事件添加事件监听：window.addEventListener(event, function, tr.
2021-04-26 17:08:38
1397
原创 筛选直线一定范围内的坐标点
//经纬度转换成三角函数中度分表形式。rad:function(d) { return d * Math.PI / 180.0;},计算两点间的距离，也可以用leaflet提供的distance方法/*** 计算两个经纬度间的距离* @param lat1 纬度* @param lng1 经度* @param lat2 纬度* @param lng2 经度*/geoDistance:function(lat1, lng1, lat2, lng2) { let r
2021-01-26 14:21:55
408
1
原创 leaflet 绘制半圆扇形 饼图
插件Leaflet-semicircle示例demo http://jieter.github.io/Leaflet-semicircle/examples/semicircle.html/*** [] 坐标* radius 半径* startAngle 开始角度* endAngle 结束角度*/L.semiCircle([51.5, -0.09], { radius: 500, startAngle: 45, stopAngle: 135}).addTo(map);
2021-01-26 09:15:51
1648
1
原创 vue 多环境配置
实际情况下我们用vue-cli脚手架生成的项目，可能部署在不同环境下运行，如开发环境、测试环境、生产环境；那接口地址等可能有所改变，我们不能每次手动修改文件里的地址。那么可以配置多环境1. package.json添加test打包命令"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "uni
2020-08-24 14:33:03
304
原创 layui 动态设置radio选中
html<div class="layui-card-header fk-mail-group" index="0"> <input type="radio" name="mailOne" class="recover" value="recover" title="收件人"> <input type="radio" name="mailOne" class="sender" value="sender" title="发件人" > <in
2020-07-15 15:55:06
7450
原创 echarts 关系图
先放一张效果图// 基于准备好的dom，初始化echarts实例myChart = echarts.init(document.getElementById('relationChart'));// 数据格式let data = { nodes: [{ name: '王大妈', category: 0 }, { name: '王二麻子', category: 1 }, {
2020-07-15 10:23:35
1255
5
原创 3D翻转
向上html<div class="div1"> <img src="images/ad_stock.jpg" alt=""> <div> 山水 </div></div>css.div1{ width:150px; height:150px; margin:2%; position:relative; transform-style:preserve-3d;
2020-07-06 15:27:24
162
原创 layui 一个页面绑定多个日期
<input type="text" name="" class="layui-input" id="datePicker">js// 绑定日期控件layui.use('laydate', function(){ var laydate = layui.laydate; //同时绑定多个 lay('#datePicker').each(function(){ laydate.render({ elem: this,
2020-06-29 14:45:20
686
原创 拖动时禁止选中文字
js全局document.body.onselectstart = document.body.ondrag = function(){ return false;}css元素样式 -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
2020-06-18 14:57:09
1082
原创 iview 重新显示Modal内嵌的Tabs默认选中显示指定项
Tabs的value当前激活 tab 面板的 name，可以展示相应项；但是只有初始加载是有效；当重新显示指定显示项没有用能用的是 this.$refs.tabs.activeKey = ‘name1’ ，activeKey是活动的TabPane 对应的值是TabPane 中的name值(name1)<Tabs ref="tabs"> <TabPane label="" name="alarmInfo"> </TabPane>
2020-06-18 14:52:06
1189
原创 动态数据生成collapse自动打开第一面板
vue使用iview手风琴遇到的坑。vue动态数据生成手风琴，初始化打开面板值时，不会自动打开面板值。<Collapse ref="Collapse" v-model="collapseValue"> <Panel ref="resultChcked" v-for="(item,index) in siteList" :key="index" > <span style="margin-left:30px;">{{item.time}}</span&
2020-06-05 14:23:37
1445
原创 在vue项目中使用echarts
项目中我们想要数据可视化处理，并且简单明了多元化的展示统计数据。这种情况下，数据图表展示成为了一种选择。那么图表展示工具Echarts、Highcharts也就呈现在我们眼前。官方文档：Echarts：https://www.echartsjs.com/zh/index.htmlHighcharts：https://www.highcharts.com.cn/在html中使用图表我们查看...
2020-04-29 09:56:03
219
原创 window.open()参数及浏览器兼容
window.open() 用于新开一个浏览器窗口、浏览器新开标签页、查找已命名的窗口语法window.open(URL,name,specs,replace)URL 页面路径name 窗口命名specs 参数参数说明浏览器兼容上表中为各个浏览器对 features 各参数选项的支持程度，其中需要特殊说明的如下：【标注1】：IE7 IE8 Firefox Chr...
2020-04-28 15:37:07
1130
原创 leaflet 曲线
项目开发过程中有绘制历史轨迹的功能，上面说直线绘制效果不是太好，想看看曲线绘制的效果。由于leaflet没有提供绘制曲线的方法，只能自己算出曲线的坐标点以直线相连，绘制成曲线算法部分https://blog.csdn.net/TarkuNi/article/details/99054036<!DOCTYPE html><html><head> ......
2020-04-21 09:10:34
2468
2
原创 前端存储数据库----IndexedDB
前端需要本地存储的数据量大的情况，cookie、sessionStorage、localStorage受其存储内存大小的限制，不能满足需求的情况下；就需要用到前端数据库的存储方式（ Web SQL、IndexedDB）;这里我们了解下IndexedDB简述IndexedDB是一种底层API，用于客户端存储大量结构化数据(包括, 文件/ 二进制大型对象(blobs)。IndexedDB是一个事...
2020-04-10 14:35:42
644
1
原创 前端数据存储 cookie sessionStorage localStorage
Cookie是一种以文本形式存在于客户端的数据；由于cookie储存大小的限制即具有保质期，所以一般用于记录用户的登录信息；cookie的使用除了本地存储数据信息，还可以携带在请求头里传递给后台，用于客户端身份标识等使用JavaScript对cookie进行操作1.创建cookie// 创建的时候可以添加cookie的过期时间；如果不加则默认页面关闭删除cookiedocument.c...
2020-04-10 10:11:30
273
原创 获取视频流播放
项目中遇到的小视频回放的问题，客户需要查看视频设备某一段时间的视频获取视频是其他平台提供的接口，地址类似:http://10.231.20.42:8080/v4/clips/bweed—16-_340c5d5779a1/data播放视频使用的是video.js1、引入<link href="./videojs/video-js.css" rel="stylesheet" type="...
2020-03-26 10:07:53
1143
原创 获取本地上传图片、网络图片资源的base64编码
1、获取本地上传图片的base64编码var file = $_('upload_file').files[0];var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) { imgBase64 = e.target.result;};点击了解FileReader2、...
2020-03-25 15:52:59
345
原创 leaflet 大数据处理 点聚合功能
官方文档：https://github.com/SINTEF-9012/PruneCluster引入文件;<link rel="stylesheet" href="static/leaflet/leaflet.css" /><script src="static/leaflet/leaflet.js" type="text/javascript"></scrip...
2020-03-20 10:42:24
1368
原创 vue 路由前进刷新，后退不刷新
做项目的过程中，会遇到这种情况，如商城类显示，点击商品列表中的某一个商品进入到商品详情页面，我返回的时候希望的是商品列表呈现之前的页面状态，不重新加载商品列表改写router-view<div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-v...
2020-03-17 15:47:46
219
原创 iview table展示图片、文字，判断显示相应内容
在项目中使用iview的table控件时，遇到的问题：1.表格如何显示图片(居中)：{ title: '户籍照片', type: 'photoUrl', align: 'center', render: (h, params) => { return h("div",{ style: { height: "100px", margin: "10px",overflow...
2020-03-17 15:34:19
1040
原创 vue axios请求头携带信息（token）
vue项目使用axios请求，其中部分接口需要token值；但是开发阶段前后端分离项目设计跨域问题，设置cookie请求头不携带；解决：用axios拦截器设置请求头携带信息axios.interceptors.request.use(config => { var userInfo = sessionStorage.getItem("userInfo"); if (use...
2019-12-06 11:29:14
3495
1
原创 vue父子组件传值，子组件改变值后父组件的值也变了
问题复述父组件给子组件传值，子组件改变值，父组件的值也相应的跟着变化，但有时并不想父组件的值改变问题原因双向绑定解决办法最简单有效的方法是JSON.parse(JSON.stringify(data ))参考https://blog.csdn.net/weixin_43254676/article/details/91361532深入理解javascript的浅拷贝和深拷贝ht...
2019-11-28 16:46:18
596
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人