- 博客(49)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 处理setInterval造成的浏览器内存溢出
起因最近的一个vue项目要求页面5秒一次实时请求数据, 最开始考虑的是建立websocket长连接进行通信,但是在数据量较大时socket链接会自动断开,后台也没有找到解决办法,最后决定由前端发送定时请求, 但是在使用过程中出现了长时间挂机页面会出现浏览器崩溃的情况后经过测试是setInterval方法造成的(原因没有搞懂)解决方案使用requestAnimationFrame方法代替setInterval进行实时请求export function RAFInit () { let RAF
2021-08-23 09:36:53
5049
原创 css写一个简单的方向操作
效果:// html<div class="btnBox">
2021-03-18 11:25:55
427
原创 全屏组件(支持局部全屏)
安装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
1242
原创 横向滚动组件
<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
642
原创 百度聚合卡顿解决代码
修改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
504
原创 修改百度地图点聚合点击事件获取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
2209
2
原创 笔记
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
142
原创 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
577
原创 百度地图仅拉框封装
在最近的项目中有需求需要拉框搜索区域内的一些特定信息在百度上找到的参考有拉框放大和拉框搜索二个，但是都是封装好的，它们并不会返回拉框区域的坐标，所以我也无法使用，最后只能把拉框部分抽出来自己做个记录<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拉框</title&
2020-06-19 15:15:29
416
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
2476
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
373
原创 数组合并,并去重
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
913
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
157
原创 总结的一些元素居中的方法
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
254
原创 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
2777
原创 CSS pre中josn超出宽度自动换行
{ word-break: break-all; // 按字符截断换行 /* 支持IE和chrome，FF不支持*/ word-wrap:break-word; // 按英文单词整体截断换行 /* 以上三个浏览器均支持 */ white-space: pre-wrap;}...
2019-10-14 09:54:46
961
原创 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
1442
原创 自用型小数转换百分比保留二位小数(处理浮点数可能)
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
862
原创 超出部分显示指定行数隐藏显示省略号
{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; // 指定显示的行数 -webkit-box-orient: vertical;}
2019-06-15 17:43:58
502
原创 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
147
转载 笔记:数组去重的方法
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
139
转载 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
424
转载 Babel 转码器( ES6 代码转为 ES5 代码 )
下面的命令在项目目录中，安装 Babel。$ npm install --save-dev @babel/core配置文件.babelrcBabel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下。{ "presets": [], "plugins": []}presets字段设...
2019-04-01 14:08:06
509
原创 关闭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
866
1
原创 vue监听页面滚动到某个高度触发事件
methods: { showIcon() { if ( !!document.documentElement.scrollTop && document.documentElement.scrollTop > 200 ) { 页面高度大于200执行操作 ...
2019-02-19 16:22:05
9481
原创 验证是否是后台需要的josn格式
if (JSON.parse(value)) { if (/\{.*\}/.test(value)) { let marking; if (/^[\],:{}\s]*$/.test(value.replace(/\\[&amp;quot;\\\/bfn...
2019-01-12 15:17:31
215
原创 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
3292
原创 单按钮,执行文件下载和支持多文件下载
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
300
原创 自用型动态公共面包屑配置
路由配置meta: {routeName: '首页'}在computed中定义接受computed: { currentRoute:function(){ return this.$route.matched.slice(1) } },element ui 的面包屑 <el-breadcrumb separator="/"> ...
2018-11-20 11:52:01
626
原创 vue中监听浏览器关闭方法
需求:我需要在页面关闭时清空本地储存的一个cookie方法:window.addEventListener( ‘beforeunload’,e =&gt;(执行…) ) mounted () { window.addEventListener('beforeunload', e =&gt; { window.localStorage.removeItem('tit...
2018-10-31 16:31:25
29571
2
原创 路由跳转以及传递参数
路由的跳转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
16124
2
转载 佛祖保佑
<!-- _ooOoo_ --> <!-- o8888888o --> <!-- 88" . "88 --> <!-- (| -_- |) --&g...
2018-09-29 19:35:52
1218
原创 自用的栅格布局模板
效果1html <div class="grid-container outline"> <div class="row"> <div class="col-1"><p>col-3</p></div> &a
2018-09-29 17:56:31
790
原创 localStorage的存储,读取,删除
localStorage存储我们通过以下方式将数据储存到localStorage中window.localStorage.setItem('key',value)但有时value为一个对象Object,以上面的方式写入,会出现读取的返回值为{object Object}的情况,但这并不是我们想要的,此时我们需要使用新的方式传入Objectwindow.localStorage.set...
2018-09-29 17:33:44
135244
5
原创 vue 单页面手动刷新,回到顶部
created(){ $(document).ready(function(){ $(window).scrollTop(0) }) },在created钩子中执行
2018-09-28 18:04:10
4458
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
3166
2
原创 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
24680
空空如也
在vue项目中安装vue-socket.io后在main中引入项目启动报错
2020-05-20
TA创建的收藏夹 TA关注的收藏夹
TA关注的人