- 博客(36)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 高德 通过 起 经 止 经纬度 获取路线经纬度，（可搜索位置，新增经过点）
根据 地图选点 经纬度 起点 经点（可多个） 终点 获取路线经纬度，可通过搜索地名自动定位地图位置。
2022-04-18 11:23:43
4694
12
原创 解决npm install安装node-sass包容易失败的问题 (Error: Cannot find module ‘node-sass‘)
解决npm install安装node-sass包容易失败的问题 （Error: Cannot find module 'node-sass'）问题与原因解决方法一、手动下载binding.node文件解决方法二、设置环境变量安装解决方法三、使用CNPM安装问题与原因问题： 在编译nodejs项目的时候，使用npm install命令安装node-sass包容易安装失败。因此执行打包命令时会出现 Cannot find module 'node-sass'原因： npm 安装 node-sass 依赖
2021-11-23 16:02:27
17639
原创 Vue 实现移动端在线选座功能（支持miniMap，支持缩放）
Vue 实现在线选座功能（支持miniMap，支持缩放）前言一、功能介绍二、选座页面效果三、实现原理布局设计方面交互实现方面四、在线例子总结前言前段时间写了一个在线选座功能，现在分享一下。纯Dom方式实现，包括miniMap，代码没怎么优化，主要提供实现思路。一、功能介绍支持选座区域划分支持缩放选座区域大小（可配置）支持拖拽选择区域支持miniMap 拖拽通过数据支持简单编辑座位布局二、选座页面效果分别是 缩小，正常，放大后效果三、实现原理布局设计方面1.一行一行渲染座
2021-08-18 15:24:12
3570
7
原创 前端压缩图片，以及使用（iview，element-ui ）的upload 组件上传前压缩
前端压缩图片，以及使用（iview，element-ui ）的upload 组件上传前压缩前言一、压缩方法介绍二、压缩代码三、 `iview` `element-ui`上传处理DEMO演示总结前言 今天分享一下前端如何压缩图片。一、压缩方法介绍前端压缩图片，主要是使用了 toDataURL 这个canvas 的方法，其实就是把 canvas 画布上的内容获取到。这个方法有两个参数，MDN 解释是参数 type 可选 图片格式，默认为 image/png encoderOptions
2021-06-01 09:13:48
2428
2
原创 使用Canvas 绘制施工进度/影像 图，支持滚动、缩放、拖拽、定位、折叠、下载、过渡，支持快捷操作
使用Canvas 绘制施工进度/影像 图，支持滚动、缩放、拖拽、定位、折叠、下载、过渡，支持快捷操作前言演示图DEMO 及介绍总结前言分享一个工作中使用canvas制作的一个施工进度/影响记录 图，代码较长，就不解释了，有兴趣的小伙伴可以查看演示效果，有问题可以下方留言演示图DEMO 及介绍支持操作：1.比例缩放：鼠标在画布内时支持 Ctrl + 滚轮 缩放，Ctrl + alt + 滚轮 快速缩放；2.横向滚动：鼠标在画布内时支持 shift + 滚轮 横向滚动，shift + al
2021-03-08 15:38:08
771
2
原创 AMap JS 高德地图，修改渲染图层层级
AMap高德地图，修改渲染图层层级问题官网方法手动方法更改层级演示最后问题前端使用 AMap JS 高德地图时，覆盖物绘制线条（AMap.Polyline），会覆盖住下方的路段名称，路段编号，以及地址名称等等。当然，只要是 覆盖物 ，都会如其描述的那样，覆盖在其他图层上方，这很正常，但是想要在路段上绘制线条后能看到下方的路段名称，路段标号等信息就需要调整渲染图层的层级了。官网方法AMap JS 有 这些图层，并且提供了 只有下方五个图层支持的setzIndex 方法，分别是TileLayer
2021-03-04 15:31:56
3937
1
原创 axios 表单（formData）方式提交请求，以及文件上传方式
axios 表单（formData）方式提交请求，以及文件上传方式一、使用表单格式请求二、上传文件总结一、使用表单格式请求更改请求头 headers 中 content-type 为 application/x-www-form-urlencodedaxios 官方文档 application/x-www-form-urlencoded 格式请求例子：import qs from 'qs';const data = { 'bar': 123 };const options = { me
2021-01-27 18:03:31
50720
4
原创 echarts 图例（legend icon）图标自定义的几种方式
echarts 图例（legend icon）图标自定义的几种方式前言一、默认 图例项的 icon二、使用图片链接或者base64 图片三、使用 矢量 路径四、创建 矢量路径并导出对比一下 创建复合路径 与不创建复合路径的区别总结前言博主开发有个习惯，会苛求自己尽量还原UI设计的图。这些年开发经常会做图表，echarts用得比较多，其中的图例 图标 (legend.icon) 样式自定义现在分享一下，毕竟独乐乐不如众乐乐。看完再评价，简单的图例 到底有啥好分享的可先查看 echarts 官方配
2020-12-21 16:47:28
62649
29
原创 实时查看css 效果最便捷方式
实时查看css 效果最便捷方式css 调试？更快的方式总结css 调试？虽然现在热更新很快了（Go Live 插件、或者nodejs 插件），但延迟还是有的。想要更快的调试css 代码的样式，用浏览器自带的功能是最方便的。这里并不是指 （chrome 浏览器下）在 Elements 控制台下更改 Styles 下的样式，这样写太慢了，只能一句一句的编写以及修改样式。如下图：更快的方式同样要进入 Elements 模块下，选中 Styles 项，点击右侧加号（new style rule）
2020-11-30 10:15:23
1261
1
原创 JavaScript 控制浏览器全屏展示
JavaScript 控制浏览器全屏展示区别控制浏览器Dom 全屏区别1.浏览器有两种全屏模式，第一种为浏览器窗口行为 称为 视图全屏，在浏览器工具栏中 缩放 一栏点击全屏按钮，或者按 F11 键（几乎所有软件都会支持的通用功能）。2.浏览器 HTML 全屏模式，意思就是使浏览器 HTML Dom 铺满整个屏幕展示的全屏模式。以上两种，由于安全策略原因，在非低版本 IE 浏览器中，都不支持控制。也就是说只能使用第二种 Dom 控制全屏的方式控制浏览器Dom 全屏...
2020-10-20 19:34:25
1622
原创 Unexpected quantifier 之 字符串方法正则使用兼容问题
Unexpected quantifier 之 字符串方法正则使用兼容问题引言出现场景总结引言本文不谈如何在字符串方法中使用正则，想要学习正则可以去 这里，这里分享一点使用正则遇到的一个不兼容问题。就是 在IE 与 Microsoft Edge 中，在字符串方法中使用预匹配正则会出现异常 Unexpected quantifier，错误会直接影响页面展示，因为是浏览器解析代码异常。出现场景所有字符串方法，能使用正则的地方，在以上两个浏览器中都会报 Unexpected quantifier 这个错
2020-09-16 16:45:42
1301
原创 前端树形结构数据的搜索与格式化
前端树形结构数据的搜索与格式化介绍啊上代码方法解释Demo 哦结语介绍啊今天分享一个借鉴 elementUI 前端过滤的方法（好吧，抄袭写得那么坦然，哈哈）。主要过滤思路从elementUI 的过滤树代码中参考的，添加了一些项目中常用到的功能。上代码代码太多不好看不要紧，下面有一丢丢解释。export const filterTree = ({ value, data, prop, filter, filterXor, children, visible, filterChildr
2020-09-09 17:13:20
929
原创 CSS 使用技巧例子，理解样式之间的配合，缩短 tabs 组件线条宽度
CSS 使用技巧例子，理解样式之间的配合，缩短 tabs 组件线条宽度引言案例场景解决方案结语引言这个标题范围有点广，css 样式很多，相互之间配合起来其实能完成很不错的效果，也能减少很多JavaScript 代码。因为对样式理解少从而造成的 JavsScript 脚本 增多是得不偿失的。案例场景之前我们UI 设计过一个 tab 切换的效果，主体样式和 vue 组件库 iview，elementui 的 tabs 组件差不多，其中有些许样式不一样。类似效果图如下。tab 平铺满， 但是下方
2020-08-06 10:14:38
1323
10
原创 Vue 数据更新页面视图未渲染 问题
Vue 数据更新页面视图未渲染 问题想解决问题，先看官方api总结一下API中的信息总结想解决问题，先看官方api点击查看 Vue 深入响应式原理这个api很详细的说明了 vue 的数据变化与视图更新的原理，推荐先阅读这篇信息，下面再分享一点自己在项目中实际踩过的一些坑。总结一下API中的信息1.一个最重要最基础的要实现响应式，你必须在初始化实例前声明所有根级响应式 property，哪怕只是一个空值。 对于基础类型数据，只要是你初始化了，后面不管怎么更改数据，都会触发更新对应视图2.对于对
2020-07-28 17:33:05
2252
原创 iView DatePicker 组件 选择年/月 下拉框异常收缩
iView DatePicker 组件 选择年/月 下拉框异常收缩引言bug 详细信息bug 出现原因结语引言上头新分给我一个之前延期处理的 bug，就是标题描述的 bug，iView 的 DatePicker 组件，在选择年或者月的情况会异常收缩起来。正常不应该收缩起来，因为选择年后还要选择月份，选择月份后还要选择天数。参照 iView 的 demo 发现用法并无问题，第一想到的就是当前这个项目有 iView 的全局配置 或者 某些插件功能冲突（项目是前同事写的，我不知道有哪些全局配置），最后发现是一
2020-07-21 10:16:31
724
1
原创 遮罩覆盖的DOM，如何触发点击 等一系列事件
遮罩覆盖的DOM，如果获取点击 等一系列事件引言解释 pointer-event举例说明上面解释的效果有哪些场景可以使用到总结引言今天，调试 iview 这个UI组件库 modal 组件样式的时候，在可 拖拽 的样式上看到一个样式 pointer-event 。虽然自诩（吹牛）在样式上有较多的理解，但是我却不知道这个样式的具体作用（打脸了）。审查元素后，发现这是我多年来心心念念的一个效果 ヾ(◍°∇°◍)ﾉﾞ ，曾经想过能否用 javascript 实现的效果（当时失败了，没找到如何实现）。现在用一个样
2020-06-23 18:00:42
1126
原创 vue 组件选项的推荐顺序 与 自动排序
vue 组件选项的推荐顺序 与 自动排序转载一下vue推荐顺序使用 eslint 自动排序一直以来使用vue开发，除了知道生命周期的 hook 函数顺序，其他选项的顺序不知道是否有规范。后来看了vue的风格指南，里面的选项是有推荐顺序的，也找了一下如何自动排序，今天就分享一下。转载一下vue推荐顺序先发个 Vue 风格指南 选项推荐顺序 地址组件/实例的选项应该有统一的顺序。这是我们推荐的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新 property 应该放到哪里。副作用
2020-06-10 15:03:13
6300
3
原创 elementUI el-form 组件 验证 提示不能为空，以及验证不生效的详细原因
elementUI el-form 组件 验证 提示不能为空，以及验证不生效的详细原因唠唠嗑如何进行验证的获取规则 源码处写法获取验证项 源码处写法上述使用中常见问题场景结语唠唠嗑用vue + elementUI 开发有些日子了，经常在使用el-form 组件时，时不时的出现验证没生效，或者生效了在验证函数中 value 是 undefined，也细细的读了elementUI 的文档。有些信息交代的比较模糊，最后还是看了elementUI 的源码才确认下来之前一直猜测的东西。今天就专门分享一下，看el
2020-06-08 20:11:43
18420
原创 删除列表中一个DOM，其余DOM动态过渡的方法
删除列表中一个DOM，其余DOM动态过渡的方法效果图效果DEMO全部代码方法原理解释结语效果图效果DEMO简易的DOM 过渡效果全部代码HTML<ul class="box" id="box"> <li class="rect" data-index="01">01</li> <li class="rect" data-index="02">02</li> <li class="rect" data-in
2020-06-06 13:43:07
1114
1
原创 深入理解CSS之 如何使子元素撑宽 设置了 block 的父元素
深入理解CSS之 如何使子元素撑宽 设置了display: block; 的父元素先写一个模板，晚点再吐槽吐槽实现原理 与 更多支持的属性不想使父级的 块 属性消失怎么办这种属性规则有什么作用呢先写一个模板，晚点再吐槽HTML<div class="wrap"> <div class="grandpa"> <div class="father"> <span class="child">我是一个子元素，我要写很多字把宽度撑开，我要
2020-06-05 12:12:49
5029
原创 使用canvas 如何绘制形状并支持拖拽、缩放功能
使用canvas 如何绘制形状并支持拖拽、缩放功能引言开始编写首先绘制一个形状绘制多个、多种类型形状添加缩放功能引言 之前遇到过一个面试的机试题，就是用画布绘制形状，并且支持缩放、拖拽功能。现在有点时间就分享一下我是如何一步一步完成这个功能的。看这篇信息之前先取看一下canvas 的 api，canvas API 穿梭机。开始编写先写出容器Dom，和样式html<div id="chart-wrap" class="chart-wrap"></div>cssht
2020-05-12 13:03:17
3349
8
原创 canvas 绘制特效 小球连接线动画
canvas 绘制特效 小球连接线动画引言详细代码demo演示解释结语引言 一个很经典的特效，花了一点时间自己手动写了一个，先上图：详细代码html<canvas id="canvas_bg"></canvas>csshtml, body { height: 100%; padding: 0; margin: 0;}#canvas_bg { display: block;}javascriptclass circle { const
2020-05-11 13:04:31
1049
原创 vue中 iframe 引入 本地静态html文件，vue-cli2与vue-cli3引用的差异
vue中 iframe 引入 本地静态html文件，vue-cli2与vue-cli3引用的差异。引言Vue-cli 2.0 构建的项目引用Vue-cli 3.0 构建的项目引用不考虑项目构建版本的方法1.如果你是webpack工程师，你就自己配置打包方式。2.使用require() 引入总结引言 在写个人网站的时候，需要用到 iframe 引用本地静态的 html 文件，发现引用方式的一些差异，在此分享一下。Vue-cli 2.0 构建的项目引用在vue-cli 2.0 构建的项目中，如果要使用
2020-05-08 20:14:08
8130
1
原创 JavaScript 有哪些数据类型 以及获取与判断的方法
JavaScript 有哪些数据类型 以及获取与判断的方法引言数据类型原始数据类型1.Boolean 类型2.Null 类型3.Undefined 类型4.Number 类型5.BigInt 类型6.String 类型7.Symbol 类型对象1."标准的" 对象2.数组3.函数获取与判断类型1.typeof2.instanceof总结引言 对我来说什么时候写博客呢？无非就几种情况，一种是对...
2020-04-17 08:49:21
297
原创 进入debugger调试时，this 输出 undefined的问题，箭头函数与babel造成的调试不便
调试时 `this` 输入 `undefined` 的问题，箭头函数与babel造成的调试不方便。引言引言阿打发
2020-04-03 15:35:51
5579
6
原创 只需一个DOM，纯CSS实现线性跑马灯特效
只需一个DOM，纯CSS实现跑马灯线性特效引言跑马灯效果图&Demo跑马灯代码样式分析解释引言之前看到一个效果，一条小细线，围绕着边框一直绕圈，不过它的实现方式使用了JavaScript。于是就尝试着写了一个只需要CSS就能围绕边框跑的效果，废话不多说，直接上效果图和代码。跑马灯效果图&Demo很简洁的一个效果跑马灯代码HTML<div class="box ...
2020-03-28 11:36:20
1299
5
原创 JavaScript 多线程处理计算密集型或高延迟的任务时，避免页面卡顿的方法
JavaScript 多线程处理计算密集型或高延迟的任务时，避免页面卡顿的方法引言单线程处理大数据演示单线程去重代码动图演示多线程处理大数据演示多线程去重代码动图演示总结引言 前一段时间，写了一个前端去重的博文。在处理千万级的数据时，即使不考虑兼容选用效率最高的方式，也需要几秒钟才能处理完（具体时长主要受数据重复率影响），这样会造成页面卡死的结果。因为JavsScript是单线程处理的，所以...
2020-03-26 12:40:41
2032
原创 Vue-router 不允许导航到当前位置（"/path"）错误原因以及修复方式
Vue-router 不允许导航到当前位置（/path）报错提示错误原因错误演示解决方法方法一方法二方法三报错提示Navigating to current location ("/path") is not allowed错误原因控制台出现以上这种 Navigating to current location ("/path") is not allowed 时，是因为重复进入了相同路...
2020-02-24 16:21:45
7647
2
原创 开发小技巧之调试DOM
开发小技巧之调试移开消失的元素引言伪类增删className增删DOM总结引言 大多数小伙伴都遇到过一种调试情况，想调试页面中的某个元素，查看该元素的样式或者其他信息。鼠标移上去的时候或者点击的时候存在，移开就消失了，以至于不能用选择页面元素工具查看。今天就来整理一下什么功能会出现这种情况，以及该如何调试这种情况的元素。伪类最常见的也是最普通的...
2020-02-20 19:10:05
1175
原创 CSS制作类似 Photoshop 模糊蒙版效果
CSS制作类似 Photoshop 模糊蒙版效果引言不兼容IE的纯css实现代码实现代码实现原理兼容IE10，IE11的模糊蒙版效果，使用canvas实现代码实现原理引言为了使一个在图片上悬浮的方框呈现磨砂玻璃的效果，就是透过这个方框看到下方的图片是模糊的这样一个效果，以下用css来做一个简单的效果。不兼容IE的纯css实现代码实现代码首先创建好背景与模糊方框的html代码<di...
2020-02-19 19:44:56
1064
原创 前端如何理解正则-由浅入深的学习
前端如何理解正则-由浅入深的学习引言正则简单语法正则语法练习获取字符串内`[]`(含)内的数据（使用字符串方法 `match`）判断字符串是否存在英文以外的字符（使用正则方法 `test` ）判断字符串是否为xxxx-xx-xx格式的日期（使用正则方法 `test` ）从字符串中获取日期（使用字符串方法 `match` ）常用正则分析IP 正则的验证与或获取邮箱 正则的验证与获取正则深入学习匹配A...
2020-02-03 11:08:14
360
原创 DOM property 和 attribute 的区别详解
DOM property 和 attribute 的区别详解引言明确概念讨论原因详细解释总结参考文档引言之前在阅读vue 的api的时候，在解释指令v-bind时，其中关于修饰符 .prop 的解释是- 作为一个 DOM property 绑定而不是作为 attribute 绑定。 令我挺好奇的，虽然干了这么久前端还未详细探究过两者之前的具体区别。于是就跟着链接进入了Stack Overflo...
2020-01-21 09:41:34
1939
5
原创 JavaScript 数组高性能去重 千万级数据去重效率测试 高效去重详解
JavaScript 数组高性能去重 千万级数据去重效率测试 高效去重详解引言测试前提测试准备测试效率1.双重for循环 + splice2.for 循环加 indexOf / includes3.filter 加 indexOf4.使用sort排序后去重5.sort 加 reduce6.利用对象key唯一(hasOwnProperty)7.使用Map数据结构8.使用Set总结推荐循环效率排行结语...
2020-01-14 13:44:15
2660
1
原创 CSS 预编译语言 变量全局引用方式 [email protected] stylus/sass/less 使用方法
引言网上相关博客与教程很多，但是解决方式有些不明确，在此统一总结一下sass、stylus、less预编译css全局引用方法，每个均介绍三种方案，皆为本人实测，一下方案为[email protected]使用方法，使用较低版本的前端朋友可以参考，本人精力有限，暂时就只提供3.0版本解决方案。本次提供使用方法代码参考：https://github.com/rudyLittleLove/global-var...
2019-12-24 16:08:36
4499
8
原创 vscode 自定义编辑器样式 css修改
vscode 自定义编辑器样式 CSS修改进入正题backgroundbackground-cover进入正题首先讲一下为什么会写这个，在某年某月某天，突然觉得vscode编辑器样式‘“看腻了”，就想着改改样式，比如背景啥的。先找了一下插件，vscodel里的 background、background-cover 插件都下过，先总结一下它们更改的方法。第一次强调*要更改vscode样式 需...
2019-12-23 16:22:27
8169
7
磨砂玻璃demo文件.rar
2020-03-28
纯CSS跑马灯Demo.html
2020-03-28
global-variable.rar
2020-03-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人