自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

winne雪

前端开发,知识分享你我他

  • 博客(106)
  • 收藏
  • 关注

原创 js对树的递归操作

一、获取树中的所有祖先节点名称const treeData = [{ "key": "全部", "title": "全部", "unit": null, "period": null, "isLeaf": false, "children": [{ "key": "数据库", "title": "数据库", "unit": null, "period": null, "isLeaf": false, "children": [{ "key": "mysql",

2020-09-07 18:07:11 54

转载 ES6、ES7、ES8、ES9、ES10新特性及其兼容性

强烈推荐阅读一篇文章,也是自己为了做保存把地址贴到自己博客,大家一起学习:https://juejin.im/post/5dda2b5e6fb9a07a83691766

2020-05-14 18:10:13 524 1

原创 js自定义localStorage的过期时间----完整代码解析

前言:我们知道localStorage如果设置了,那么默认是永久有效的,除非手动进行删除。手动删除:可以在谷歌浏览器控制台的Application => Local Storage 中找到自己要删除的文件/域名中的某一项数据双击进行清空删除即可。自定义过期时间:默认localStorage的api中时不支持设置过期时间的,所以我们只能对localStorage进行二次封装。自定义过期时间实现的思路:1、在设置localStorage数据的时候传入过期时间参数,然后自定义个键名来保存过期时间

2020-05-14 16:33:51 129

转载 设计模式之工厂模式——js实现

工厂模式又可以分为:简单工厂、工厂方法、抽象工厂。一、简单工厂简单工厂模式:又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类对象。实例1:比如我们玩游戏的时候,通常会有多种角色,每个角色又有自己的技能。var Warrior = function () { this.name = '战士' this.skill = ['刺杀', '十字斩']}Warrior.prototype = { work: function () { console.l

2020-05-08 22:47:16 70

原创 js常用的正则表达式收集

正则表达式在线校验地址:https://tool.oschina.net/regex/1、邮箱正则const emailReg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/2、手机号正则const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/3、IPv4地址正则...

2020-05-08 15:49:09 86

原创 js判断pc端各类浏览器类型

前言:pc端的浏览器众多,有时候兼容性不太一样,那么我们就需要判断下浏览器的类型来做兼容性处理。我特地下载了常用的浏览器来进行测试,注意这里我并没有测试各浏览器的各个版本,只是就当前下载的版本来测试的。可能会存在低版本校验不正确的情况,所以如果需要测试自行按照下面的方式进行测试判断。主要是判断navigator.userAgent中每个浏览器信息独特存在的信息。下面进行测试的浏览器有:火...

2020-04-30 15:06:23 135

原创 封装websocket请求-----vue项目实战(完整版)

前言:如果项目中多个组件都使用到WebSocket请求,那么我们需要对WebSocket进行封装,方便我们使用。下面我根据我的项目结构来创建文件和引入文件,大家注意一下自己项目结构。一、在utils目录下创建websocket.js文件import { Message } from 'element-ui'import { getToken } from '@/utils/authTok...

2020-04-27 17:48:59 1833 11

转载 vue3.0新特性以及进阶路线

总结得比较好的文章推荐:https://www.cnblogs.com/it-Ren/p/10976095.html

2020-04-15 16:46:09 1977

转载 移动端开发常用布局—flex弹性布局总结

刷资料的时候看到一篇比较好的flex弹性布局总结介绍,这里推荐给大家一起学习一下:https://baijiahao.baidu.com/s?id=1662580228975733473&wfr=spider&for=pc

2020-04-08 15:25:01 65

原创 vue中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求

一、 抛出问题1、当一个页面的请求过长时,点击了跳转路由到新的页面,但是上一个路由的请求结果在当前路由页面提示,非常难看且容易让客户混淆。(所以需要路由跳转取消上个路由页面的所有请求)2、在当前页面某个请求长时间没拿到返回结果,然后用户又点击发起了相同请求,这时有可能后发送的请求返回的数据被先发送的请求覆盖,这样就得不到最新请求数据了。(所以需要防止当前路由页面的重复请求,以保证后发送的请求返...

2020-03-30 18:35:38 768

原创 echarts扇形图(饼图)常用的配置

1、效果图:2、完整代码:(可以直接贴到echarts官网进行测试查看效果)option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}%' }, legend: { orient: 'vertical', ...

2020-03-30 16:02:53 936

原创 vue中使用markdown编辑器代码详解

编辑器效果图1、安装插件cnpm install mavon-editor -S2、在main.js中引入插件import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'Vue.use(mavonEditor)3、在组件中使用< mavon-editor />组件来显示编...

2020-03-11 22:30:21 111

原创 @vue/cli4.x版本的vue.config.js常用配置

设置访问端口号、访问IP地址、路径别名const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { lintOnSave: 'error', // 设置eslint报错时停止代码编译 productionSourceMap: f...

2020-03-11 17:59:42 6592

原创 elementUI的DatePicker+DateTimePicker组件的自定义日期禁用

一、DatePicker日期选择器的起止时间禁用时间禁用需求:1、开始时间不能大于结束时间2、禁用当前时间的前30天3、开始时间和结束时间只能选择间隔7天时间4、禁用当前时间之后的时间效果图:详细代码:ps:disabledDate函数中的代码你们可以封装到method中,然后在disabledDate函数中这样就不会让data中的数据那么凌乱又长。<el-date-p...

2020-01-03 18:28:18 743

原创 vue中处理echarts因v-if切换后图形显示异常+实现echarts监听窗口变化而改变大小

一、处理echarts因v-if切换后图形显示异常有时候我们需要在一个页面中使用v-if来显示不同的两个图表。视觉效果上好像是从一个页面点击链接跳转到另一个页面,但其实原理是通过销毁和重建两个不同dom容器来实现这个效果。可能会出现的问题:在切换到另一个图表显示的时候,改变了窗口宽度高度,那么点击返回按钮时看到原先的echarts图形就会有一部分消失显示不完整了。解决办法:我们需要在返...

2019-11-12 14:44:44 1387 2

原创 Echarts实现中国地图线路图特效(一对多发射点)

1、效果图2、完整配置代码可以把代码直接贴到官网测试效果:https://www.echartsjs.com/examples/zh/editor.html?c=map-polygon// 中国地图线路特效配置 startlet geoCoordMap = { // 地图地点的经度纬度 '上海': [121.4648, 31.2891], '东莞': [113.89...

2019-10-29 14:43:55 3856 3

原创 Echarts实现中国地图涟漪点分布

1、效果图2、完整配置项代码可以直接把代码贴到官网看效果:https://www.echartsjs.com/examples/zh/editor.html?c=map-polygonoption ={ backgroundColor: '#0c1c30', // 图形容器背景色 tooltip: { // 鼠标移到涟漪点上的浮动提示框 borderWi...

2019-10-28 18:18:22 676

原创 echarts双正x轴条形图

一、效果图:二、配置代码let option = { title: { text: 'TOP10' }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'...

2019-10-23 18:09:53 4029

原创 记录自己发布的第一个npm包

前言:根据业务需求要纯前端做一个中国的省市联动下拉,还要额外加上几个外国的大洲,那么自己找了个npm包是只有中国的省市,额外加上外国几大洲的话自己要修改别人的npm包再发布。一、拥有中国省市联动的插件包npm包名:element-china-area-datahttps://www.npmjs.com/package/element-china-area-dataGitHub地址:htt...

2019-10-19 13:04:39 91

原创 vue中使用websocket通信接收后台数据

前言:项目中因为有的数据使用分页后数据加载还是很慢,所以考虑使用websocket来解决。后端获取到数据库数据后就依次返回给前端,这样就不需要等分页数据全部获取后才返回。1、需求概述点击按钮后才开启websocket连接,然后发送数据给后端(相当于post请求中也是需要传递数据给后端使用),在websocket实例对象的onmessage 函数中能获取到后端返回的数据进行处理渲染。2、代码...

2019-08-20 16:52:45 4886 17

原创 vue-cli2.x统一配置接口请求地址和开发环境的跨域代理

1、修改config/dev.env.js(开发环境的baseURL地址统一配置)2、修改config/prod.env.js(线上环境的baseURL地址统一配置)3、修改config/index.js,配置开发环境的跨域代理url4、自己封装axios请求js文件(request.js)5、自己封装url地址js文件(apiUrl.js)本来完整的后台接口地址api: https:...

2019-07-22 14:21:43 1084

原创 elementui中NavMenu 导航菜单高亮问题——解决多种情况

前言:如果使用elementui这个框架来开发系统,那么我们几乎都会使用到NavMenu 组件。我们可能需要菜单根据我们点击的那一项高亮显示,刷新页面了之后还是会相应的高亮显示。我在项目中遇到的情况有三种:(vue-cli + elementui)1、横向菜单如果仅有一个菜单,那么点击当前菜单高亮;如果菜单下有二级下拉,那么点击下拉二级菜单高亮,并且一级菜单也高亮(刷新页面后依旧保持高亮)...

2019-07-08 14:39:57 7841 18

原创 js实现时间戳转化为自定义格式的年月日时分秒(yyyy-MM-dd HH:mm:ss)

getYMDHMS (timestamp) { let time = new Date(timestamp) let year = time.getFullYear() let month = time.getMonth() + 1 let date = time.getDate() let hours = time.getHours(...

2019-06-27 15:07:13 7591

原创 ECharts多折线图——自定义悬浮提示框内容、自定义折线图线条颜色、自定义y轴单位、气泡单位,轴线颜色、图表网格容器大小

1、自定义tooltip悬浮提示框内容(数据处理后加单位),需要在tooltip配置项的formatter使用回调函数的形式参数详解:https://echarts.baidu.com/option.html#legend.formatter2、自定义折线图线条颜色,直接在color配置项数组中写自己喜欢的颜色,在线条绘制的时候就会在数组中自动选择。具体如下配置:option = { ...

2019-06-16 18:24:15 2051

原创 vue中使用ECharts实现中国地图配置详解(配官方配置地址)

前言:1、实现自定义左下角的视觉映射组件(包括自定义颜色、文字、图元大小)2、实现自定义悬浮提示框如下图所示:实现步骤:一、在vue中安装echarts1、npm install echarts二、在vue组件中使用echarts1、在组件中先引入echartsimport echarts from 'echarts' // 引入echarts中国地图数据2、在组件中引入中国...

2019-06-16 17:15:30 5791 2

原创 微信小程序——保存图片到手机相册(代码详解)

前言:首先我们要知道,如果小程序首次发起授权被拒绝之后,再次点击同一个按钮执行的wx.authorize(...)不会再弹出授权窗口。所以我们需要到引导用户到设置页面进行手动授权。引导用户到设置页面授权的方式有两种:第一种:使用小程序api :wx.openSetting(...)打开设置页面第二种:使用button按钮,并写上如下代码,点击此按钮打开设置页面<button bin...

2019-05-06 15:40:46 5394 5

原创 移动端适配:动态设置html元素的font-size(页面使用rem做单位)

一、前言:首先我们要了解的知识点:1.物理像素(physical pixel)我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒(物理像素)组成的。2.逻辑像素是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。3.设备的像素比(device pixel ratio)简称DPR它的数值体现了物理像素和逻辑像素之间的关系,用公式可以计算出该设备...

2019-04-30 14:20:02 1569

原创 封装wx.request()微信请求接口api

1、封装为一个HTTP类http.js/*** 封装wx.request*/// 对象的解构赋值传参class HTTP { request({ url, data = {}, header = {}, method = 'GET', isShowLoading = true, ti...

2019-04-23 15:58:02 561

原创 js实现(一层 / 多层)对象/数组的深拷贝

// 深拷贝函数function deepCopy(obj) { var result = Array.isArray(obj) ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] === 'object') { ...

2019-04-12 10:14:04 1457

原创 微信小程序的授权——代码详解

首先我们要知道为什么要授权?因为部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ,用户选择对 scope 来进行授权,当授权给一个 scope 之后,其对应的所有接口都可以直接使用。如果拒绝同意授权,那么该接口就不能使用。所以我们开发者要注意对用户拒绝授权的情况进行处理。详细的授权信息请看官网:https://developers.weixin.qq.c...

2019-04-02 10:39:47 274

原创 微信小程序的登录流程——代码详解

小程序登录流程图(具体详情可看官网链接):https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。前端开发者需要做的任务是从小程序到开发者服务器这一条线路的工作。开发者服务器到微信接口服...

2019-04-01 15:39:09 8857 1

原创 微信小程序封装轮播组件(swiper)

场景:我们需要根据设计图来做一个轮播组件,然后自定义轮播指示点。官网的轮播组件swiper属性详解:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html前言:要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件)。...

2019-03-26 17:12:22 1550 2

原创 微信小程序的传值问题(5种)——总结

一、小程序通过id属性传值当我们在标签上添加id属性进行传值,可以在当前标签添加点击事件来获取id中的值。1、添加 id 属性进行传值(index.wxml)<!--index.wxml--><view class="container"> <view class="usermotto"> <!-- 传入普通字符串数值 --> ...

2019-03-25 13:49:43 5858

原创 vue实例生命周期钩子函数——总结

前言:为什么有生命周期钩子函数?每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。一、生命周期图示二、解析生命周期钩子函数的执行时的相关数据和dom挂载情况<!DOCTYPE html>...

2019-03-22 11:01:44 312

转载 ES7新特性——Array.prototype.includes()、幂运算 **

1、Array.prototype.includes()方法Array.prototype.includes()的作用,是查找一个值在不在数组里,若在,则返回true,反之返回false。Array.prototype.includes()方法接收两个参数:要搜索的值和搜索的开始索引。当第二个参数被传入时,该方法会从索引处开始往后搜索(默认索引值为0)。若搜索值在数组中存在则返回true,否则...

2019-03-21 10:43:35 183

原创 原生小程序中自定义组件步骤详解

前言:开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。一、创建自定义组件类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。我们在components目录下创建一个header自定义组件,里面有index.json, index.wxml, index.wxss, index.j...

2019-03-13 10:17:33 528

原创 vue中使用jsonp进行跨域请求接口

前言:这里我们使用的是第三方插件jsonp。github网址:https://github.com/webmodules/jsonp1、安装npm install jsonp -S2、引入一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的拼接,封装好这个jsonp文件后export出去,之后在哪里用到就再在那里import。1.新建jsonp.js...

2019-02-26 10:45:35 3465 4

转载 删除GitHub远程仓库中的文件夹或文件

在上传项目到github时,忘记忽略了某个文件夹vue-music,就直接push上去了, 最后意识到了此问题,决定删除掉远程仓库中的vue-music文件夹删除前:删除后:在github上只能删除仓库,却无法删除文件夹或文件, 所以只能通过命令来解决。解决步骤如下:1、首先把github远程仓库项目clone到本地:$git clone http://xxxx项目地址2、进入到...

2019-02-19 16:17:29 156

原创 gulp3打包项目的基本配置与分析

打包配置文件路径问题需根据自己命名的文件路径进行修改。gulpfile.js文件:var gulp = require('gulp');// 其他的gulp插件统一用$来调用,不需要再一个一个require进去了var $ = require('gulp-load-plugins')();var open = require('open');//定义全局目录var app = {...

2019-02-19 13:54:36 728

原创 @media媒体查询——详解

媒体查询的核心思路,就是根据不同的设备宽度设置断点,然后书写css样式覆盖之前的样式。1、媒体类型media属性用于为不同的媒介类型规定不同的样式:screen 计算机屏幕(默认值)tty 电传打字机以及使用等宽字符网格的类似媒介tv 电视类型设备(低分辨率、有限的屏幕翻滚能力)projection 放映机handhel...

2019-02-19 10:31:06 2818

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除