自用
沈胖三
我不是一个聪明的人,但我热爱计算机,我希望我能够走的更远
展开
-
处理setInterval造成的浏览器内存溢出
起因最近的一个vue项目要求页面5秒一次实时请求数据, 最开始考虑的是建立websocket长连接进行通信,但是在数据量较大时socket链接会自动断开,后台也没有找到解决办法,最后决定由前端发送定时请求, 但是在使用过程中出现了长时间挂机页面会出现浏览器崩溃的情况后经过测试是setInterval方法造成的(原因没有搞懂)解决方案使用requestAnimationFrame方法代替setInterval进行实时请求export function RAFInit () { let RAF原创 2021-08-23 09:36:53 · 4876 阅读 · 0 评论 -
css写一个简单的方向操作
效果:![在这里插入图片描述](https://img-blog.csdnimg.cn/20210318112456360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZTgzNjIzMTU=,size_16,color_FFFFFF,t_70#pic_center)// html<div class="btnBox">原创 2021-03-18 11:25:55 · 373 阅读 · 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 · 1217 阅读 · 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 · 623 阅读 · 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 · 487 阅读 · 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 · 2141 阅读 · 2 评论 -
前端获取省市区镇数据
自动生成省市区镇四级联动数据原创 2020-07-31 13:46:04 · 2173 阅读 · 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 · 130 阅读 · 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 · 551 阅读 · 0 评论 -
百度地图仅拉框封装
在最近的项目中有需求需要拉框搜索区域内的一些特定信息在百度上找到的参考有拉框放大和拉框搜索二个,但是都是封装好的,它们并不会返回拉框区域的坐标,所以我也无法使用,最后只能把拉框部分抽出来自己做个记录<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拉框</title&原创 2020-06-19 15:15:29 · 392 阅读 · 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 · 2414 阅读 · 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 · 356 阅读 · 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 · 884 阅读 · 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 · 150 阅读 · 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 · 232 阅读 · 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 · 2755 阅读 · 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 · 930 阅读 · 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 · 1409 阅读 · 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 · 843 阅读 · 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 · 9304 阅读 · 0 评论 -
参加项目时的一些问题
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 · 163 阅读 · 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 · 24595 阅读 · 1 评论 -
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 · 3125 阅读 · 2 评论 -
Vue路由
创建路由 实例 DOM部分: js部分原创 2018-09-21 12:46:12 · 132 阅读 · 0 评论 -
佛祖保佑
<!-- _ooOoo_ --> <!-- o8888888o --> <!-- 88" . "88 --> <!-- (| -_- |) --&g...转载 2018-09-29 19:35:52 · 1186 阅读 · 0 评论 -
路由跳转以及传递参数
路由的跳转1.this.$router.push({ path: url });2.使用前需确定在定义路由时定义了namethis.$router.push({ name: '需要跳转的路由name'});路由传递参数1.传递this.$router.push({name:'路由name',params:{search:value}})获取this.$route.params...原创 2018-10-10 10:57:00 · 16093 阅读 · 2 评论 -
Error:line:731,message:"Can't faind variable: Promise"
转载 2018-12-21 14:11:08 · 232 阅读 · 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 · 205 阅读 · 0 评论 -
vue监听页面滚动到某个高度触发事件
methods: { showIcon() { if ( !!document.documentElement.scrollTop && document.documentElement.scrollTop > 200 ) { 页面高度大于200执行操作 ...原创 2019-02-19 16:22:05 · 9448 阅读 · 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 · 842 阅读 · 1 评论 -
Babel 转码器( ES6 代码转为 ES5 代码 )
下面的命令在项目目录中,安装 Babel。$ npm install --save-dev @babel/core配置文件.babelrcBabel 的配置文件是.babelrc,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。该文件用来设置转码规则和插件,基本格式如下。{ "presets": [], "plugins": []}presets字段设...转载 2019-04-01 14:08:06 · 484 阅读 · 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 · 384 阅读 · 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 · 130 阅读 · 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 · 135 阅读 · 0 评论 -
超出部分显示指定行数隐藏显示省略号
{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; // 指定显示的行数 -webkit-box-orient: vertical;}原创 2019-06-15 17:43:58 · 480 阅读 · 0 评论 -
打包后,字体图标显示失败
问题:vue项目打包之后,字体图标出现不显示的情况解决方案:查看打包后的css文件查找static将其修改为…/fonts或者…/fonts将其修改为static我的问题就此解决...原创 2018-09-21 10:07:34 · 1770 阅读 · 1 评论