黄-小智的博客

原创 JS导入excel，识别excel数据

【代码】JS导入excel，识别excel数据。

原创 报错Uncaught ReferrnceError: _i3 is not defined

原因：node版本或者webpack版本，过高或过低导致。背景：部署到服务器报此错，本地环境正常。或从正常的本地打包手动部署到服务器。

原创 el-table动态多级表头

原创 vue 导出excel

【代码】vue 导出excel。

原创 vxe-table 表头放大镜搜索，回车快捷键筛选

vxe-table 表头放大镜搜索，回车快捷键筛选。

原创 在vue使用leaflet手动绘制动态多边形

在vue使用leaflet手动绘制动态多边形第一步：// An highlighted block data() { return { map: {},//地图 points: [],//点 lines: null,//线 tempLines: null,//连接 };第二步：// An highlighted blockmounted() { // 绘制多边形 this.lines=L.polyline([])

原创 leaflet关于旋转地图问题

leaflet关于旋转地图问题openLayers支持地图旋转，但要满足其他的功能需求，其文档和使用方式都相对比较复杂据官网leaflet是无法支持地图在web端旋转的，但是可以借助大佬的改造，添加了setBearing方法，可以完成leaflet-rotate地址第一步：引用leaflet和大佬的leaflet-rotate（上面链接获取）第二步：调用setBearing方法或地图初始化是使用bearing在源码中方法的位置（./dist/leaflet-rotate-src.js）：

原创 vue使用canvas绘制360°方向盘

vue使用canvas绘制360°方向盘<template> <div class="main"> <div class="huahu"> <canvas id="myCanvas" width="800" height="800"></canvas> </div> </div></template><script>export default {

原创 vue动态修改样式（计算属性computed）

vue动态修改样式 <template> <div class="main" :style="{ height: arpaHeight }" > <button class="btn" @click="clickArpaHeader()"></button> </div> </template> <script>export default { name: "AisPart",

原创 浏览器自定义滚动条样式

浏览器自定义滚动条样式// An highlighted blockvar foo = 'bar';#main {width:400px;height:400px;overflow:auto;}#main div {width:600px;height:600px;}#main::-webkit-scrollbar {width:10px;height:10px;}.main::-webkit-scrollbar-button {background-color: #95

原创 Vue-Router 路由重复点击时报错问题

在 router/index.js 文件中添加以下代码：// An highlighted blockconst routerPush = Router.prototype.pushRouter.prototype.push = function push(location) { return routerPush.call(this, location).catch((err) => err)}

原创 vant 时间选择控件只显示年份，解决只能返回1970年

第一步：在文件中找到路径：node_modules / vant / es / datetime-picker / DatePicker.js第二步：DatePicker.js文件大概96行处添加如下代码：第三步：同DatePicker.js文件大概184行处修改如下代码，即加个if判断包裹185、186行源码：第四步：同DatePicker.js文件大概257行处添加如下代码：结果：...

原创 解决echarts 多个图表在同一个页面出现的自适应问题（好用）

解决echarts 多个图表在同一个页面出现的自适应问题首先看两张图：出现的问题;缩放浏览器后：正常想要的效果：缩放浏览器，五个echarts都能自适应解决方案：在最后一个ecahrts的自适应代码里加上前面这几行即可注意：是最后一个echarts里加入这四行代码，分别是前面四个echarts出现以上问题的原因：个人认为是echarts机制里，后面创建的echarts图表会影响前面eachrts的创建渲染，从何需要在后面一个echarts创建完成之后再次刷新初始化前面一个echart

原创 Echarts的x，y网格线样式

Echarts的x，y网格线样式直接上代码：var myChart = echarts.init(document.getElementById("lineCtx")); var option = { xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Tue", "Wed", "Thu", "Fri",

原创 JS网页图片地址刷新解决缓存问题

问题：由于图片src地址没有变化，会导致浏览器误以为同样的图片，就缓存中读取缓存下来的图片地址导致无法刷新得到想要的结果方式：改变图片src地址即可，也就是在图片地址后添加一个随机数作为参数，该参数实质上也是没有意义的代码示例：......

原创 vue使用leaflet叠加图片图层刷新问题

在官网使用以上方式可在地图中添加图片图层就不多说了如果需要定时刷新显示的图片图层也可以使用它的方法改变图片地址问题：由于浏览器的问题图片地址缓存问题，浏览器会因为图片地址一致而继续使用缓存下来的 图片地址，会导致图片无法正常刷新方法：给图片地址加上一个随机数：Math.random()...

原创 leaflet清除图层（vue）

leaflet绘制多边形：// An highlighted blockvar latlngs = [ [22.484293166666666, 114.47875890877452], [22.504293166666666, 114.46875890877452], [22.514293166666666, 114.66875890877452], [22.784293166666666, 114.60875890877452] ];L.po

原创 vue打包部署服务器，背景图片显示空白

vue打包部署服务器后，往往会出现部分背景图片显示空白的情况，部分就说明只是打包过程中的图片路径问题：在build 文件夹中找到 utils.js文件加上这行代码即可：publicPath: ‘…/…/’

原创 CSS 文本可选择复制

CSS 文本可选择复制代码// An highlighted blockspan{ user-select:text}user-select 属性规定是否能选取元素的文本。

原创 echarts折线图鼠标移动到点显示数据

// An highlighted blocktooltip : { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }}

原创 vue 局部div滚动点击回到顶部

vue局部div滚动点击回到顶部针对局部div的内容滚动使用点击回到顶部的需求：第一步定义一个超过界面高度的div内容区。并设置id第二步点击回到顶部的按钮// An highlighted block<template> <div> <!-- 点击回到顶部 --> <div class="gotop" v-show="gotop" @click="toTop"></div> </div>&lt

原创 vue 自定义窗口拖拽

vue 自定义窗口拖拽创建div窗口，给一定的有效高度和宽度：在methods方法中定义一个拖拽函数：// An highlighted block//窗口拖动 move(e) { // console.log(e) //获取目标div元素 let odiv = e.target; //算出鼠标相对元素的位置 let mouseX = e.clientX - odiv.offsetLeft; let mouseY =

原创 elementUI 的图标打包后异常显示方框

elementUI 的图标打包后异常显示方框正常情况：异常：异常可以查看Network里会显示错误，原因是路径有问题的解决办法：第一步：卸载element-UI，再重新下载，主要解决避免安装包和版本出现的异常问题// An highlighted block npm uninstall element-ui npm install element-ui第二步：在config的index.js修改以下两个路径在build的utils.js中添加这行代码本人通过以上方式已解

原创 vue axios发送网络请求动态数组传参

vue axios发送网络请求动态数组传参第一步得到动态数组meterIds第二步正常传参值得注意的是：这里是用post请求，并且必须使用data，不能使用params，否则浏览器会报跨域的错误（因为报的跨域让我找了好多坑，想哭）结果以下这样后台才能获取到值如果数组是这样格式的话，后台是获取不了数组的值的...

原创 Echarts图表之间切换出现错乱的问题

难免在一些需求中需要对多个Echarts图表进行切换，切换中是会出现图表之间数据和格式错杂的问题的比如本人遇到的：以下的图表是建立在使用同个标签id上1.这里我只需要显示一条折线图2.这里我需要显示三条折线图出现的问题是，我在以上两者之间切换过程中就会出现这样的现象：这里正常应该是一条折线的而图中红色框内的都应该是三条折线图表的时候才该出现的出现以上问题的原因是因为每次图表切换过程中没有对上一个图表进行清理：方法：在setOption渲染新图表前加上图表清理即可// An highl

原创 leaflet绘制的多边形，缩放地图保持大小不变

leaflet的基本使用不再次具体说明，建议查看官方和博客；需求：如何在地图上绘制多边形，缩放地图级别时，多边形大小保持不变思路：要在屏幕的视觉上使得绘制的多边形不随地图缩放变化而变化，换个思路就是显示的效果不变。由于使用leaflet绘制多边形需要提供经纬度，所以分为以下步骤：第一步：将一个经纬度转换成像素点坐标（注意只需要一个经纬度即可）第二步：再将转化后的像素点分别加减你所需要的显示像素大小，大约绘制成你想要的的现状。比如三角形，就加减有三个像素点第三步：最后将加减后的三个像素点坐标分别再次

原创 使用leaflet在地图上绘制多个多边形

由于需要在地图上绘制大量的多边形，国内地图高德、百度等都有对应API可以使用，如果在国外就无法使用这些地图了，加上也会有偏移等问题，所以此时leaflet就发挥了很大的作用，提供了众多且强大的API等。具体如何使用leaflet，因为比较基础，这里不详细说明，具体建议查看官网以及各大博主的博客具体思路：1.leaflet提供了在地图上绘制圆，多边形，矩形，折线等各种API官网链接：链接: link.其实思路很简单，只需要有对应位置的经纬度即可直接上代码：// An highlighted b

原创 vue中Echarts在页面中通过点击隐藏和显示

vue中时常有些需求需要Echarts在页面中通过点击隐藏和显示，或者点击切换不同的图表，按平时的方式是显示不出效果的原因在于Echarts需要绑定在标签上，在切换时需要操作DOM节点，但是在vue中DOM已经渲染完成，无法重新刷新DOM节点使图表显示出来这时候只需要局部刷新DOM节点即可，需要用vue中的指令v-if和this.$nextTick上代码：template部分// An highlighted block<div class="leftcharts"> &l

原创 echarts图表实现自适应缩放(vue用法也一致)

echarts图表想要实现自适应缩放(vue用法也一致)不多说，只需要在使用图表setOption()下面添加两行代码解决：// An highlighted blockwindow.addEventListener("resize", () => { myChart.resize();});温馨提示：myChart是我获取图表标签ID定义的属性，根据自己 的修改就行：...

原创 在vue项目中使用echarts制作3D效果柱状图

在vue项目中使用echarts制作3D效果柱状图1、第一步安装echarts组件。npm install echarts2、第二步安装好echarts后，安装echarts3d图形组件echarts-glnpm install echarts-gl如果package.json文件里面也可以找到这个配置，则安装成功3.第三步在需要使用Echarts页面的script中附上以下代码import * as echarts from 'echarts';import 'echarts-gl';