随笔分类 - 前端
HTML、css、JavaScript、vue、jQuery
摘要：1、向上/向下移动代码行 alt+ 下箭头/上箭头 2、向上/向下复制一行代码 shift+alt+ 下箭头/上箭头 3、选定多个相同的单词 Ctrl + d 4、全局替换 Ctrl + h 5、快速定位到某一行 Ctrl + g 6、放大缩小整个编辑器界面 Ctrl + + / - 7、添加多个光
阅读全文
摘要：一、数组 // 根据中文の首字母排序 let arr = ['上海','北京','广州','深圳'] arr.sort((a, b) => a.localeCompare(b)) console.log(arr) // 数组sort()方法是会改变原数组的，可用slice()浅拷贝一份 // new
阅读全文
摘要：inset属性说明如下： inset 属性用作定位元素的 top、right、bottom、left 这些属性的简写。类似于 margin 和 padding 属性，依照“上右下左”的顺序。举个例子： inset: 0; /* 等同于 `top: 0; right: 0; bottom: 0; le
阅读全文
摘要：问题 目前是想实现双击元素时，切换元素，显示出input框，输入新title，失去焦点再切换回去 <div @dblclick="editTitle()"> <span v-if="draggable">{{ title }}</span> <el-input v-else @blur="loseF
阅读全文
摘要：一、解决办法 vite官网 - 缓存 vite下，修改node_modules源码后，在浏览器的源代码中看不到改动的内容，查看vite文档后发现了这么一段话： 文件系统缓存¶ Vite 会将预构建的依赖缓存到 node_modules/.vite。它根据几个源来决定是否需要重新运行预构建步骤: pa
阅读全文
摘要：1.onfocus 当input 获取到焦点时触发. 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空. 3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密
阅读全文
摘要：一、基础知识 在正式使用Proj4.js时，我们首先需要了解下有关各种投影的参数定义 （例如：椭球长半轴、扁率、原点纬线、中央经线、两条标准纬线、东偏移量、北偏移量和单位等），具体参数可参考下面这个网站上的介绍。 https://epsg.io/ http://spatialreference.or
阅读全文
摘要：return 是停止本函数体执行并返回 而map，forEach里面所执行的都是函数个体，return一个，其余的也会继续执行 所以，某种程度上来说，map、forEach是不能跳出本身的'循环'的 从跳出数组本身来考虑，我们可以采用扔出异常的方式，来捕获异常，从而跳出'循环' let list=[
阅读全文
摘要：一、 Blob转成File MDN File() let blob = new Blob(['这里是要转换的字符串或者图片等'], { type: "text/plain;charset=utf-8" }); console.log("Blob对象", blob); let file = new F
阅读全文
摘要：1、安装xlsx npm install xlsx --save-dev https://docs.sheetjs.com/ 2、引入xlsx并封装读取excel方法 import * as XLSX from "xlsx"; /** * 读取excel内容 * @param {*} file *
阅读全文
摘要：实现在线表格的方式有： 1、以HTML的Table元素实现，主要靠虚拟渲染优化性能，体验较差，插件却很多。 2、以HTML的Canvas绘图实现，得益于Canvas的高性能，体验可以优化到极致，但绘图相对DOM元素操作是复杂的，相关插件也较少，但是商业产品上的在线Excel基本都是基于该技术实现的。
阅读全文
摘要：一、问题与需求 无聊的一天，后端给了一个Excel文件链接，需要前端实现Excel文件自定义文件名下载 很多人肯定会想到一下方法 const a = document.createElement('a'); a.download = `${layer.title}.xlsx`;; a.href =
阅读全文
摘要：一、Tampermonkey 二、代码 代码=>网页游戏、网页视频录屏 // ==UserScript== // @name 网页游戏、网页直播录屏 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try
阅读全文
摘要：1.直接调用canvas对象的toDataURL方法转化为指定类型 var newImg = new Image(); newImg.src=canvas.toDataURL("image/png")); 2.利用canvas对象的toBlob方法 https://developer.mozilla
阅读全文
摘要：思路 1，将base64转化为File 文件 2，动态创建a标签实现文件流的下载 代码 1)将base64转化为File 文件 let dataurl='data:image/png;base64,XXXXX...', let filename='文件名' function base64ImgtoF
阅读全文
摘要：一、数据图形 import * as echarts from 'echarts' const myChart = echarts.init(document.querySelector('pie')) 官方文档 events 官方文档 action 设置高亮 myChart.dispatchAct
阅读全文
摘要：因为浏览器的限制，网页上的字体最小只能设置12px，因为小于12px就会影响浏览效果 但有时候我们需求就是要将字体设置的很小 这就需要用到特殊的手段，用 transform 属性设置 用 transform的scale缩放属性将字体缩放，实际上并没有改变字体大小，只是将标签缩放了，这样看起来就小了很
阅读全文
摘要：问题 平时我们在开发时遇到的跨域问题，后台暂不给解决时，我们一般可以用vue代理(node)、nginx反向代理等方式来解决 但是当项目要上线的时候，这些问题将又会出现 就比如，自制的一个简单项目，只需要对请求数据并进行可视化，不需要进行后台的交互，仍旧会出现跨域问题 （就是盗用别人的api接口数据
阅读全文
摘要：主要用到了以下api FileReader <input type="file"> function addData(){ let input = document.createElement('input'); input.type = 'file'; input.accept = ".jpg,
阅读全文
摘要：1、screenX 和screenY 参照点：电脑屏幕左上角 screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量 screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量 2、clientX和clientY 参照点：浏览器内容区域左上角 clientX：鼠标点击位置相对于浏览器可视区域
阅读全文
