![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
沈胖三
我不是一个聪明的人,但我热爱计算机,我希望我能够走的更远
展开
-
处理setInterval造成的浏览器内存溢出
起因最近的一个vue项目要求页面5秒一次实时请求数据, 最开始考虑的是建立websocket长连接进行通信,但是在数据量较大时socket链接会自动断开,后台也没有找到解决办法,最后决定由前端发送定时请求, 但是在使用过程中出现了长时间挂机页面会出现浏览器崩溃的情况后经过测试是setInterval方法造成的(原因没有搞懂)解决方案使用requestAnimationFrame方法代替setInterval进行实时请求export function RAFInit () { let RAF原创 2021-08-23 09:36:53 · 4825 阅读 · 0 评论 -
全屏组件(支持局部全屏)
安装npm install vue-fullscreen使用<template> <div id="app"> <fullscreen :fullscreen.sync="fullscreenType"> <div>需要全屏的内容</div> </fullscreen> <button type="button" @click="fullscreenTypeChange" >原创 2020-09-28 17:59:14 · 1211 阅读 · 0 评论 -
横向滚动组件
<template> <div class="inherentRiskBox"> <div class="titleBox"> <div class="searchBox"> <el-date-picker v-model="startTime" type="date" value-format="yyyy-MM-dd" placeh.原创 2020-08-22 11:21:49 · 618 阅读 · 0 评论 -
百度聚合卡顿解决代码
修改MarkerClusterer.js有兴趣的可以研究一下,不想研究的直接贴吧/** * @fileoverview MarkerClusterer标记聚合器用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能。 * 主入口类是<a href="symbols/BMapLib.MarkerClusterer.html">MarkerClusterer</a>, * 基于Baidu Map API 1.2。 * * @author Baidu Map Api G原创 2020-08-19 17:33:09 · 476 阅读 · 0 评论 -
修改百度地图点聚合点击事件获取markers数据
百度聚合点击事件(需要修改MarkerClusterer.js)this._clusterMarker.addEventListener('click', function (event) { thatMap.setViewport(thatBounds); // 放大地图 });为marker添加自定义属性let marker = new BMap.Marker(new BMap.Point(lng, lat))marker.customData = { name: 'xxx', num原创 2020-08-13 13:54:09 · 2123 阅读 · 2 评论 -
前端获取省市区镇数据
自动生成省市区镇四级联动数据原创 2020-07-31 13:46:04 · 2163 阅读 · 0 评论 -
笔记
this.fuxin(this.treeData, this.checkedKeys) // checkedKeys: [1,2,3,4,5] treeData为一个树形结构数据this.xunfu(this.treeData, arr) // arr: [1,2,3,4,5]xunfu (tree, groupIds, idf) { // 有部分子级添加父级id tree.map(res => { if (res.hasChildren && !id原创 2020-07-17 09:42:58 · 123 阅读 · 0 评论 -
BD-09转GCJ-02在转WGS84在转web墨卡托
bd09togcj02 (lng, lat) { // BD-09->GCJ-02 console.log(lng, lat, '百度') let xPI = 3.14159265358979324 * 3000.0 / 180.0; let x = lng - 0.0065; let y = lat - 0.006; let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * xPI)原创 2020-07-13 14:10:31 · 548 阅读 · 0 评论 -
百度地图仅拉框封装
在最近的项目中有需求需要拉框搜索区域内的一些特定信息在百度上找到的参考有拉框放大和拉框搜索二个,但是都是封装好的,它们并不会返回拉框区域的坐标,所以我也无法使用,最后只能把拉框部分抽出来自己做个记录<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拉框</title&原创 2020-06-19 15:15:29 · 387 阅读 · 1 评论 -
vue使用socket.io
安装npm install vue-socket.io --save引用import io from 'socket.io-client'建立链接initWebSocket () { this.socket = null this.socket = io.connect('http://localhost:5000', { timeout: 300000, reconnectionDelayMax: 1000, recon原创 2020-06-18 09:33:10 · 2403 阅读 · 3 评论 -
IE中一些特定的数字或IP地址会变成点击按钮处理
现象:在展示这些数据时,在IE浏览器中数据本身会变成可点击的状态解决方案:使用a标签包裹并禁止点击<a style="color: #000;text-decoration: none;" disabled="disabled">23.135.2.255</a>原创 2020-06-09 09:20:35 · 352 阅读 · 0 评论 -
数组合并,并去重
let a = [1,2,3,4,5]let b = [4,5,6,7,8]let c = new Set([...a,...b])console.log(c) // [1,2,3,4,5,6,7,8]原创 2019-11-07 10:43:23 · 879 阅读 · 2 评论 -
数组去重
虽然有多种实现方式,但是考虑到性能的问题我个人只记录两种1. new Set()function duplicateRemoval(a, b) { return Array.from(new Set([...a, ...b]))}2. for…of + Objectfunction duplicateRemoval(a, b) { let arr = a.concat(...原创 2019-11-07 10:08:07 · 142 阅读 · 0 评论 -
总结的一些元素居中的方法
1.定长定宽1.1绝对定位和负magin值HTML:<div class="father-box"> <div class="children-box"></div></div>CSS:.father-box { width: 200px; height: 200px; border: 1px solid re...原创 2019-11-05 11:36:58 · 228 阅读 · 0 评论 -
VUE点击复制组件
1.安装依赖 npm install --save v-clipboard 2.在main.js中引入 import Vue from 'vue' import Clipboard from 'v-clipboard' Vue.use(Clipboard) 3.Html <template> ...原创 2019-10-24 11:13:32 · 2751 阅读 · 0 评论 -
CSS pre中josn超出宽度自动换行
{ word-break: break-all; // 按字符截断换行 /* 支持IE和chrome,FF不支持*/ word-wrap:break-word; // 按英文单词整体截断换行 /* 以上三个浏览器均支持 */ white-space: pre-wrap;}...原创 2019-10-14 09:54:46 · 918 阅读 · 0 评论 -
Babel 转码器( ES6 代码转为 ES5 代码 )
下面的命令在项目目录中,安装 Babel。$ npm install --save-dev @babel/core配置文件.babelrcBabel 的配置文件是.babelrc,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。该文件用来设置转码规则和插件,基本格式如下。{ "presets": [], "plugins": []}presets字段设...转载 2019-04-01 14:08:06 · 478 阅读 · 0 评论 -
Traceur 转码器
Traceur转码器是Google 公司的一款转码器,也可以将 ES6 代码转为 ES5 代码直接插入网页Traceur 允许将 ES6 代码直接插入网页。首先,必须在网页头部加载 Traceur 库文件。<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>&...转载 2019-04-01 14:12:46 · 378 阅读 · 0 评论 -
笔记:数组去重的方法
Set方式去重let arr = [1,2,3,2,1]arr = Array.from(new Set(arr)) // [1,2,3]const removeDuplicateItems = arr => [...new Set(arr)]; console.log(removeDuplicateItems([42, 'foo', 42, 'foo', true, ...转载 2019-04-03 09:42:13 · 126 阅读 · 0 评论 -
vue组件传值
父传子父组件结构如下<template> <child :mydata="mydata" :myString="myString" :Array="Array"></child></template><script>import child from './child'export default {compo...原创 2019-04-16 09:51:02 · 131 阅读 · 0 评论 -
超出部分显示指定行数隐藏显示省略号
{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; // 指定显示的行数 -webkit-box-orient: vertical;}原创 2019-06-15 17:43:58 · 477 阅读 · 0 评论 -
自用型小数转换百分比保留二位小数(处理浮点数可能)
let formateRate = function(num) { if (typeof num !== 'number') return num let result = (num * 100).toFixed(2) if (result.toString().split('.').length > 1) { result = parseFloat( res...原创 2019-06-21 11:12:41 · 836 阅读 · 0 评论 -
list新增删除Key:Value
向一个对象数组里面添加新的属性var arr = [{a:'我是a',b:我是b,c:'我是c',d:'我是d'},{a:'我是a',b:我是b,c:'我是c',d:'我是d'},{a:'我是a',b:我是b,c:'我是c',d:'我是d'}]var arr2=[]arr.map((item, index)=> { arr2.push(Object.assign({},item,{...原创 2019-09-03 14:48:34 · 1399 阅读 · 0 评论 -
关闭node_modules映射页面时不停发送的请求
找到/node_modules/sockjs-client/dist/sockjs.js2.找到代码的 1605行try { // self.xhr.send(payload); 把这里注掉 } catch (e) { self.emit('finish', 0, ''); self._cleanup(false); }...原创 2019-03-14 16:15:00 · 836 阅读 · 1 评论 -
vue监听页面滚动到某个高度触发事件
methods: { showIcon() { if ( !!document.documentElement.scrollTop && document.documentElement.scrollTop > 200 ) { 页面高度大于200执行操作 ...原创 2019-02-19 16:22:05 · 9443 阅读 · 0 评论 -
验证是否是后台需要的josn格式
if (JSON.parse(value)) { if (/\{.*\}/.test(value)) { let marking; if (/^[\],:{}\s]*$/.test(value.replace(/\\[&amp;quot;\\\/bfn...原创 2019-01-12 15:17:31 · 200 阅读 · 0 评论 -
vue本地读取图片转码Base64
<input type="file" id="id" name="image" class="getImgUrl_file" @change="shangc($event)" accept="image/jpg,image/jpeg,image/png">通过:let files = document.getElementById('id').files[原创 2018-09-21 12:37:46 · 24576 阅读 · 1 评论 -
参加项目时的一些问题
1.问题:svn拉代码报错:解决方案:连接内网2.VS code 中标签报错原因:不明解决方案:用户配置中(ctrl+shift+p下的Preferences:Open User Settings)配置"vetur.validation.template": falseNpm I 下拉node-modules时发上以下报错原因npm 服务器没有jquery-ui-slider...原创 2018-09-21 11:14:05 · 160 阅读 · 0 评论 -
在vue中实现事件委托
在父元素上绑定点击事件<div class="panel" @click="rowClick1($event)"> <li>1</li> <li>2</li> <li>3</li> <li>4</li>原创 2018-09-21 10:51:54 · 9296 阅读 · 0 评论 -
打包后,字体图标显示失败
问题:vue项目打包之后,字体图标出现不显示的情况解决方案:查看打包后的css文件查找static将其修改为…/fonts或者…/fonts将其修改为static我的问题就此解决...原创 2018-09-21 10:07:34 · 1762 阅读 · 1 评论 -
清除浮动代码片段
{ “clearfix”: { “prefix”: “clearfix”, “body”: [ “.clearfix::before,\r”, “.clearfix::after{\r”, ” content: \”\”;\r”, ” display: block;\r”, ” hei...原创 2018-09-10 21:57:55 · 139 阅读 · 0 评论 -
Vue组件自我总结
组件的创建组件创建有三种方式 注意 1. 模板template中只能有一个根节点; 2. 组件的名字,如果采用驼峰命令的话,在使用的时候,就要加上 “-”,比如组件名字叫indexA,那么在使用的时候就叫index-a第一种方法 通过Vue.extend()和Vue.component()两个方法创建 Vue.extend()函数会返回一个组件构造器,它里面包含一个参数,它是一...原创 2018-08-11 19:43:42 · 168 阅读 · 0 评论 -
vue指令:v-text,v-html,v-show
指令指令带有前缀 v-;列表内容指令需要添加在DOM元素上常用的指令v-text 解释:更新元素的 textContent。如果要更新部分的 textContent 为空,需要使用 {{ Mustache }} 插值。 实例: 插值语法接受三元运算符 实例: v-html 解释: 更新元素的 innerHTML 。 注意:内容按普通 HTML 插入 -...原创 2018-08-09 15:56:15 · 3157 阅读 · 0 评论 -
处理字符串的方法
1. charAt()Str.charAt(n) => 返回字符串的第 n 个字符,如果不在 0~str.length-1之间,则返回一个空字符串。2. indexOf()indexOf(substr[,start]) => 返回 substr 在字符串 str 中首次出现的位置,从 start 位置开始查找,如果不存在,则返回 -1。 start可以是任意整数...原创 2018-08-09 14:52:33 · 477 阅读 · 0 评论 -
vue 生命周期
执行顺序生产创建区间beforeCreate(){console.log(1)}在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 ↓created(){console.log(2)}在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算...转载 2018-08-09 14:47:26 · 114 阅读 · 0 评论 -
vue指令:v-bind,v-for,v-model,v-on,v-cloak,v-once
v-bind 用法1.动态地绑定一个或多个特性,或一个组件 prop 到表达式。 2.在绑定 class CSS样式或 style 特性时,支持其它类型的值。 3.在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。 4.没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。 实例: ...原创 2018-09-21 12:44:57 · 3114 阅读 · 2 评论 -
Vue路由
创建路由 实例 DOM部分: js部分原创 2018-09-21 12:46:12 · 130 阅读 · 0 评论 -
this.$parent.$data
this.parent.parent.parent.data 可以获取父级数据,也可以给父级数据赋值定义变量data() { return { name:'' }}this.$parent.$data.name = 1 //赋值console.log(this.$parent.$data.name) //获取...原创 2018-12-21 15:23:36 · 3254 阅读 · 0 评论 -
Error:line:731,message:"Can't faind variable: Promise"
转载 2018-12-21 14:11:08 · 227 阅读 · 0 评论 -
单按钮,执行文件下载和支持多文件下载
val = ['href','href','href','href']for (let i = 0; i &amp;lt; val.length; i++) { var a = document.createElement(&quot;a&quot;), e = document.createEvent(&quot;MouseEvents&quot;); e.initEvent(&原创 2018-12-04 17:40:58 · 277 阅读 · 0 评论