![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
web coder
这个作者很懒,什么都没留下…
展开
-
闪烁事故/火灾svg图
新建.svg文件,粘贴如下代码即可,该svg构成为一个闪烁的实心圆与两个闪烁的外圈环,其中circle 中cx,cy为圆心位置,r为半径,fill为填充色,opacity为填充色的透明度, stroke-width为边框的宽度,stroke-opacity=".7"为边框的透明度,style中animation:blink 10000s infinite 代表使用 @keyframes中定义的blink动画,持续10000s,infinite 无限循环,animation其他参数如下。animati.原创 2021-07-08 16:26:05 · 361 阅读 · 0 评论 -
leaflet 弹窗里添加点击事件
方案一:1、在每个marker的popup里添加相同class "detail-button" id(marker的id)不同的元素2、监听map 的popup open事件3、找到所绑定的detail-button元素4、为该deail-button元素添加事件,点击即可获取marker所设置的id //添加点marker addEventMarker(row){ if(this.eventMark ){ //移除上一个事件mark原创 2021-05-14 10:19:06 · 5499 阅读 · 7 评论 -
优化地图显示效率的几种方式
1、减少请求次数,做好缓存,请求过的数据可以不再请求2、分级请求,如在地图上加载大数据量时,可以在大级别下如18级及以上再进行请求,小于18级不予请求3、后台可直接返回jsonSting,减少返回数据量(简化字段),使用google的protobufjs...原创 2020-12-31 17:14:43 · 279 阅读 · 0 评论 -
拷贝数组的三种方法
let arr = [1,2,3,4];let copyArray=[];1、copyArray= Object.assign([],arr)2、for(let item of arr){ copyArray.push(item) }3、copyArray= arr.slice();原创 2020-12-29 19:45:02 · 442 阅读 · 2 评论 -
DOM API实现块级全屏
效果如下:原图全屏后效果,调用dome的requestFullScreen()方法。假设要放大id为"someSmallImage"的元素 vue 代码,纯页面手打,部分函数名称不对,主要是理解思路<div id="someSmallImage" @click="imageFullScreen"></div>imageFullScreen(){ let isFull = document.fullscreenElement || document....原创 2020-11-24 16:26:16 · 155 阅读 · 0 评论 -
javaScript忍者秘籍第二版优雅代码赏析
1、利用事件冒泡,监听表格设置单元格的点击效果创建唯一的处理器,注册到比单元格更高层级的 元素上,通过冒泡可以处理所有的单元格单击事件。我们知道单元格是 表格的后代元素,通过event.target即可获得被单击的元素。将事件处理 器代理到表格上优雅得多,如:const table = document.getElementById('someTable');table.addEventListener('click', function(event){ if (event.target.ta原创 2020-11-05 17:47:48 · 234 阅读 · 0 评论 -
vue 读取protobuf数据
//该篇文章只涉及读取后台返回的protobuf,不涉及传输。1、运行npm install protobufjs --save 安装2、拿到后台给的proto文件,在src里创建一个proto目录,用于存放proto文件及编译后的js文件3、运行命令npx pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto生成proto.js文件,如图4、引入protojs如 import proto...原创 2020-10-19 16:58:06 · 1146 阅读 · 0 评论 -
canvas在图片上画矩形框和点,并控制显隐
1、定义document canvas元素<canvas id = "image-canvas"><canvas id="rectangle-canvas" ><canvas id="point-canvas">2、画图片var imageCanva = document.getElementById("image-canvas"); //获取canvas元素var imagectx = imageCanva.getContext('2d'); ...原创 2020-08-07 10:54:44 · 2508 阅读 · 0 评论 -
js获取后台传入的图片
1、以二进制流格式请求 responseType:'arraybuffer'2、处理二进制流 btoa(new Unit8Array(data)).reduce((data,byte)=>data + String.fromCharCode(byte),''));最终得到图片路径 'data:image/png;base64,' + btoa(new Unit8Array(data)).reduce((data,byte)=>data + String.fromCharCode...原创 2020-08-07 10:21:20 · 1404 阅读 · 0 评论 -
分段分颜色的进度条
这是一个自己写的进度条组件<template> <div style="display: flex;margin-top:33px" v-show="countNum"> <div class="process-content" ><!--顶部内容显示,标题头,数目--> <span style="font-size: 14px">{{processTitle}}</span>&.原创 2020-06-05 16:11:36 · 2976 阅读 · 2 评论 -
el-cascader级联实现一级菜单单选,二级菜单多选
主要是把逻辑搞清楚,实现起来容易了,主要思路就是把当前选中与上次选中做对比,使用了多选multiply属性,这个属性下,选中的数据结构为:一级为length1的数组,二级为length2的数组 <el-cascader class="cascader" v-model="shareScope" @change="shareScopeChange"原创 2020-05-16 17:46:44 · 13653 阅读 · 3 评论 -
下载后台传输的数据
// 下载方法 download(data, filename) { if (!data) { return; } let url = window.URL.createObjectURL(new Blob([data])); let link = document.createElement("a"); li...原创 2019-06-11 17:47:33 · 463 阅读 · 0 评论 -
json字符串转成json对象,以及json对象转成json字符串
json字符串是一种能转成json对象的字符串(我自己理解的),如 var MRWStr = '{name:WangHongxu,sex:man}',把 MRW转成json对象只需要var MRWObj = JSON.parse(MRWStr);就能得到{name:WangHongxu,sex:man}对象;相反有 MRWObj = {name:WangHongxu,...原创 2018-09-18 18:08:27 · 511 阅读 · 0 评论 -
vue axios 导出excel
exportExcel() { var _this = this; axios({ method: "post", url: config.EXPORT_EXCEL + this.$store.state.userId, //接口地址 data: {range: _this.range, apiNa...原创 2018-11-24 13:40:58 · 1353 阅读 · 0 评论 -
解决用户未登陆,输入IP地址仍能访问静态页面的问题
解决办法就是,判断用户的登陆状态,如果没有登陆,将路由强制转换到登陆页,在router/index.js的登陆路由配置中写入 routes: [{ path: '/', name: 'LoginIn', component: resolve => require(['../pages/login/Login.vue'], resolve) }...原创 2018-12-24 11:25:59 · 728 阅读 · 0 评论 -
工作中遇见的正则表达式
//只能使用字母、数字、符号3个(- _ .) reg = /^[a-zA-Z\d\.\-\_]*$/;//字母开头,只包含字母,数字,有且只有一个.reg = /^[a-zA-Z][a-zA-Z\d]+[\.][a-zA-Z\d]*$/;//最小长度6,最大长度20,且至少有一个字母、数字、!@#$%^&*() 中的一个var numreg=/^(?=.*...原创 2019-01-14 17:11:27 · 132 阅读 · 0 评论 -
根据文件扩展名导出文件
新建一个a标签,根据后台返回数据赋值给href,然后触发点击a事件。exportData(id) { axios .get(config.DOWNLOAD_FILE + "/" + id, { //url: 接口地址 responseType: `arraybuffer`, //一定要写 headers: { Authorizat...原创 2019-02-28 14:20:04 · 195 阅读 · 0 评论 -
利用vue-i18n中英文切换实现国际化,及从后台读取配置文件国际化解决方案
控制整个系统的中英文或其他语言显示,大概思路就是就是要把整个系统显示的中文对应的英文全部翻译一遍,然后写定key,根据配置的中英文属性,拿value。1、npm installvue-i18n --save 安装依赖2、编写语言文件,我放在这里,en.js为英文配置文件,zh.js为中文配置文件,en英文配置文件部分截图,对应的zh中文配置文件截图3、在main.js里面引入v...原创 2019-05-30 15:42:10 · 5904 阅读 · 9 评论 -
vue 强制刷新
1、在要强制刷新的父组件中注册reload方法reload() { this.isRouterAlive = false this.$nextTick(function() { this.isRouterAlive = true console.log('reload') })},控制router-view的显示与隐藏<router-view v...原创 2019-05-30 18:07:54 · 3796 阅读 · 1 评论 -
element-ui条件rules
<el-form-item prop="name" :rules="this.id==1?rules.name:[{ required: false, trigger: 'blur' }]" :label="姓名" :label-width="100px" ...原创 2019-06-13 10:11:40 · 7529 阅读 · 0 评论 -
vue 打开浮在窗口上的小窗口
因为用的是Vue框架,一直想用模态框或者element-ui的弹出框,但是他们都不够灵活,绕了一大圈,还得是window的弹出框。const {href} = _this.$router.resolve({ name: "pop2", params: { id: 0, } ...原创 2018-08-03 18:08:35 · 12985 阅读 · 0 评论