lgdaren的博客

代码】vue开发不能不知的小知识。

相互依赖的异步接口处理

vue源码总结

mapbox 矢量瓦片

1.地图 mapbox ,v2以上版本必须加access token2.mapbox的库deck.js添加链接描述3.PixiJS是一个快速的轻量级的2D动画渲染引擎，主要使用了WebGL技术，能帮助展示、驱动和管理富有交互性的图形、制作游戏。使用JavaScript以及其他HTML5技术，结合PixiJS引擎，可以创建出丰富的交互式图形，跨平台的应用程序和游戏。...

git add .git commit -m"feat: msg"git pull --rebase如果冲突：处理冲突git rebase --continue一直处理完所有rebase，直到devgit push

bug复现：根据路由加载动态组件，使用了computed 监听路由变化，离开页面会重新加载组件，触发钩子函数。computed会执行两次，而第一次是没有数据的，需要额外进行处理。今天用一种简单的方式即可解决。添加链接描述...

1.使用reduce对数组对象去重let log = console.log.bind(console);let person = [ {id: 0, name: "小明"}, {id: 1, name: "小张"}, {id: 2, name: "小李"}, {id: 3, name: "小孙"}, {id: 1, name: "小周"}, {id: 2, name: "小陈"}, ];let obj = {};person =

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。export const getDomRect = (domId) => { const dom = document.getElementById(domId); if

{root: true, // 当前配置为根配置，将不再从上级文件夹查找配置parserOptions: {parser: ‘babel-eslint’, // 采用 babel-eslint 作为语法解析器sourceType: ‘module’, // 指定来源的类型，有两种script或moduleecmaVersion: 6, //指定ECMAScript支持的版本，6为ES6},env: {browser: true, // 设置为所需检查的代码是在浏览器环境运行的es6

可以使用 this.layData = JSON.parse(JSON.stringify(data.data).replace(/xCenter/g, 'axisX').replace(/yCenter/g, 'axisY'))

以规划执行页面为例（存在翻页崩溃问题）：第一页内存占用：500M点击第2页内存占用：510M点击第3页内存占用：1G点击第4页直接崩溃好了现在我们分析每一页加载的数据：可以看到前三页的数据量都不足0.5M，第四页data5的数据量明显较大，达到4M我们假设浏览器崩溃是由于渲染的数据过大超过了Google浏览器的内存极限，通过查看第4页数据，发现绝大部分都是报错信息，我们现在把page4的报错信息移动一部分到page3看看内存的变化情况通过分析page4数据，一条报错信息是40k作用，

生产环境数据字典没维护坐标朝向和库位类型，导入仓库坐标数据会导致页面崩溃问题分析：分析是由于报错数据量太大，前端把错误信息解析成字符串的过程中导致的崩溃。在错误信息超过5000条，页面会有崩溃风险。解决方案：a:后端控制报错信息的数量或数据结构（优先） b.前端对报错信息截取处理...

Element.getBoundingClientRect()该Element.getBoundingClientRect()方法返回一个 DOMRect对象，提供有关元素大小及其相对于视口的位置的信息。价值返回值是一个DOMRect对象，它是包含整个元素的最小矩形，包括其填充和边框宽度。的 left，top，right，bottom， x，y，width，和height性质描述在像素整体矩形的位置和大小。width和以外的属性 height相对于视口的左上角。...

如果要判断数组中是否存在某个元素的话很好判断，直接用数组的indexOf方法就好，存在返回当前索引不存在返回-1var arr=[1,2,3,4]arr.indexOf(3) // 2arr.indexOf(5) // -1要只是判断的话是可以遍历后判断对象的属性是否相同的，像这种：arr.forEach(item=>{ if(item.name=='Alex'){ alert('存在这个元素'); }})但实际中往往是需要动态添加或删除对象.

Echats参考地址：https://echarts.apache.org/examples/zh/index.htmlEcharts的设计出发点是图表。基于每一个图表类型，提供图表中数据相关的图形映射配置以及一些图表间通用的基本组件配置(如axis, legend, tooltip等)。2012年发布至今，现在已经更新到5.0.2版本。UI设计风格：3d图表支持：更详细的api文档：更完善社区作品：Antv参考地址：https://antv.vision/zhAntv是蚂蚁集团数据可

前端UI库的选择会直接决定产品的页面主基调风格，特别是一些高度封装的组件，例如时间日期控件，级别联动或者树形控件，一旦确定UI库，风格就将锁定。另外不同的UI库、组件库数量的多少、封装的完善度、使用体验、是否存在隐藏bug也是不一样的。我下面罗列了几种针对PC端web开发最常用的几种UI组件库，可以点击链接感受一下各自的UI风格，然后晶姐再找个时间和大家碰一下，给出最终选择方案吧。Element UI开发团队：饿了么前端官网：https://element.eleme.cn/#/zh-CNgithu

1.数据结构的二次构造：一键绑定多个对象的时候，需要重新整理数据结构例如：watch: { 'doing':{//深度监听，可监听到对象、数组的变化 handler(val, oldVal){ const obj = val; this.stagArr = []; obj.forEach(item =>{ this.sta

清明节期间网站突然变成黑白效果，不是网站又做了一套样式，而是在html根节点加上了一个css 属性filter: grayscale(1);

iview实现自定义表头十分麻烦，最后终于解决{ title: `来访人数`, key: 'number', tooltip: true, align: 'center', render: (h, params) = >{ if (params.row.number == null || params.row.number == u...

const arr=[{id:1,name:'a'},{id:2,name:'b'},{id:3,name:'c'}]arr.some(({id})=>id==2)

:editable=“false” :clearable=“false”

邀请函模板新增：v ar json = {}; var supplementList = []; var supplementValue; var supplementKey; $('.addli').each(function () { supplementKe...

使用ejs渲染数据，但是在写点击事件的时候发现无效，最后找到原因 绑定事件要绑定到模板的父级才可以生效。

iview select组件 option的vule值很重要，他决定了绑定得值

上传图片图片返回的地址在浏览器中可以显示，但是在页面中去显示不了，最好发现是后端返回地址有问题http:192.168.0.137/data/5a3c0f9721c04ead8352de010562f855.png 这种路径在浏览器会自动补全，但是在页面中不会。后端应该修改为http://192.168.0.137/data/5a3c0f9721c04ead8352de010562f855.p...

export default { data () { return { diasabledInput:false, } }， methods: { handleSubmit:function () { if(this.diasabledInput){ ...

正常的页面突然就报错了，报错截图导致的原因，后台接口返回的数据为null导致。

this.defList1.splice(index,1);可以实现应用实例：

用niginx代理了一个本地访问地址，昨天还能访问正常，今天再看已经报错。如图：原因：nginx的缓存机制，导致的，重启nginx，并且要清理浏览器的缓存：停止命令:nginx.exe -s stop;启动命令:start nginx；...

可以使用@click.once解决

在做移动端开发的过程中，后台需要前端把获取的地理位置返回给后台，但是请求必须不能是json格式。设置的时候需要encodeURI转义一下。补充，设置的数据最好存在vuex里面，存在localstrage里面不是很好。...

步骤1.npm安装 npm install --save js-sha12.引入 let sha1 = require(‘js-sha1’); //引入sha1加密文件3.加密his.see.userPassword = sha1(this.see.userPassword);