- 博客(18)
- 收藏
- 关注
RSS订阅原创 el-select二次封装，解决数据量太大导致卡顿问题，实现远程搜索，滚动加载数据，搜索数据回显
问题描述：最近项目中，表单中有需要选择公司联系人的下拉框，由于人员过多，选择的时候会因为数据量过大导致页面卡顿，于是对于el-select进行二次封装解决方案： remote-method：远程搜索方法 visible-change：下拉框出现/隐藏时触发 1、对返回数据进行切割，使用visible-change，在下拉框出现时默认显示100条数据；2、使用remote-method远程方法进行搜索；3、搜索时，将已经选择的数据合并到搜索列表中，防...
2021-05-26 17:48:29
4030
4
原创 vue封装日期格式化
/** * 日期格式化 * @param date 传入的时间 * @param fmt 格式化样式 * @returns {string} 返回格式化之后的时间 */export function formatDate(date, fmt = "yyyy-MM-dd") { if (/(y+)/.test(fmt)) { fmt = fmt.replace( RegExp.$1, (date.getFullYear() + "").substr(4.
2021-04-07 10:23:05
339
原创 vue axios 封装请求拦截多次弹窗的问题
问题原因：vue项目使用axios 封装，当token过期或者失效后，弹窗提示用户登陆失效，重新登陆。在一些页面中初始化时调了多个API，会出现多次弹出重新登陆的弹框解决方案：使用axios中的CancelToken，在判断登陆失败时，跳转路由，中断后面的API请求实现方式：1、reques.js关键代码//请求拦截器const http = axios.create()http.interceptors.request.use((config) => {..
2020-12-01 18:00:54
3191
3
原创 Uni-app 封装uni.request请求
1、request.js文件const API_URL = 'API地址';const REQ_HEADERS = { contentType: "Content-Type"};const CONTENT_TYPE = { json: "application/json;", form: "application/x-www-form-urlencoded;",};//请求loadinglet ajaxTimes=0;export class HttpClient { st.
2020-12-01 17:27:02
1884
原创 js 的节流与防抖
1、防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间思路 每次触发事件时都取消之前的延时调用方法function debounce(fn, wait) { var timer = null; //创建一个标记用来存放定时器的返回值 return function() { // 如果此时存在定时器的话，则取消之前的定时器重新记时 clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout cl.
2020-10-13 16:58:21
172
原创 封装函数实现Array.prototype.map()方法
map() 方法创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数。 map() 方法会给原数组中的每个元素都按顺序调用一次 callback函数。callback每次执行后的返回值（包括undefined）组合起来形成一个新数组。callback函数只会在有值的索引上被调用；那些从来没被赋过值或者使用delete删除的索引则不会被调用。 map() 不修改调用它的原数组本身（可以在callback执行时改变原数组）//map方法使用 const array1 = ...
2020-10-13 10:54:02
630
原创 vue+heatmap.js实现进店客流热力图显示
heatmapjs插件地址：heatmapjs使用vue实现热力图，切换不同日期之后，会出现多个canvas覆盖情况；我的解决方案是：遍历dom元素，删除之前的canvas元素。//获取dom元素 const heatmapBox = document.getElementById("heatmap1"); const oldCanvas = heatmapBox.children[2];//删除之前的节点，在重新渲染之前需要判断是否存在 if (oldC...
2020-06-29 16:33:01
1851
原创 vue-router 路由配置，history模式在服务器页面刷新404，nginx配置
vue路由配置import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ mode: 'history', base: process.env.NODE_ENV === 'production' ? '/project/' : '/', routes: []})vue.config.js配置不同环境打包地址const env =...
2020-05-27 18:55:57
521
原创 webstorm合并分支，Git合并分支
webstorm可视化操作 git 操作 合并之后，push时遇到的问题webstorm可视化操作，命令操作场景：把dev分支的代码合并到V4分支1、查看是否有更改的代码，如果有可以先暂存到shelf中，可以直接拖动，或者右键-Shelve Changes-Shelve Changes。1/1git pull 拉一下最新的代码，1/2 把暂存区代码拉出来，或者复制出...
2020-04-30 12:21:11
7337
原创 vue项目实战：如果请求服务器图片加载失败，添加默认图片
Home: 在首页中，需要显示自定义上传的LOGO图片。但是有可能会出现加载图片失败的情况。这时候我们就要给它设置一个默认的LOGO图片。<template> <div> <img width="48px" height="48px" :src="imgUrl" @error="handleImgUrlError" /> ...
2020-04-26 15:16:56
460
1
原创 vue+element UI＋原生JS实现日期倒计时
直接来代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="...
2020-03-31 21:07:47
1580
转载 CSS--BEM风格介绍
转载自简书：https://www.jianshu.com/p/1c0b77f30ec0， 感谢！BEM基于组件方式的web开发方法，基本思想是将用户界面分成独立的模块。Block（块）（通常指模块，组件）Block 是一个逻辑上和功能上独立的页面组件，等同于网页组件中的部件（等同于网页中的组件）。Block 封装了行为（Javascript）、模板、样式（CSS）和其他实现...
2020-03-31 11:29:19
3528
转载 关于ES6中Generator函数使用
在看到Async/Await实现原理时，说的它其实是generate的语法糖。有点懵逼并不知道generate是个什么玩意。然后看了好多个文档下面记录一下。
2020-03-30 19:34:26
266
原创 Es6之判断b数组对象有没有跟a数组对象相同的id，有的话就过滤掉。
如下两个数组对象a和blet a=[{id:1,value:'this'},{id:2,value:'is'}]let b=[{id:1,value:'hello'},{id:3,value:'world'}]filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。incl...
2020-03-30 19:21:03
4627
原创 es6之数组去重之对象去重
简单的数组去重：let a = [1,2,3,4];let b = [3,4,5];let newList = [...new Set([...a, ...b])]//[1, 2, 3, 4, 5]数组中对象去重：let a=[{id:'1',value:'this'},{id:'2',value:'is'}]let b=[{id:'1',value:'hello'},{i...
2020-03-30 13:49:28
498
原创 React和vue项目在列表组件中写key，作用是什么？
最近在看面试题，记录一下。key是给每一个vnode的唯一标识,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。1. 更准确因为带key就不是就地复用了，在sameNode函数a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。2. 更快利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。...
2020-03-28 23:24:02
262
原创 vue-cli配置如何加快热更新速度，转换import()为deferred require()节点
1、下载babel-plugin-dynamic-import-node插件npm i babel-plugin-dynamic-import-node2、在 .babelrc文件中配置"development":{"plugins": ["dynamic-import-node"]}
2020-03-28 23:20:00
508
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人