zywpurple的博客

import React, { memo, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from 'react';import classNames from 'classnames';import styles from './index.scss';export default memo(forwardRef(({ totalPage =

配置less hash安装less，less-loader"；在lessRegex里面配置modules,里面配置localIdentName{ test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, so

import React, { memo, useCallback, useEffect, useState, useRef, useMemo } from 'react';const minTime = 20; // 定时器最小执行时间// 使用方法{/* <CountUp end={423423} separator=',' splitNum={3}/> */}// start:执行开始数字// end: 执行结束数字// separator： 分隔

自动将px转化为vw1、安装依赖npm install postcss-loader --savenpm install postcss-px-to-viewport --save2、修改webpack.config.js配置文件假如这段代码require('postcss-px-to-viewport')({ viewportWidth: 1920, // (Number) The width of the viewport. viewportHeight: 1080, // (Nu

转化关系图apifile2DataUrl(file, callback)通过input将file转为base64 的图片urlfunction file2DataUrl(file, callback) { var reader = new FileReader(); reader.onload = function () { callback(reader.result); }; reader.readAsDataURL(file);}file2Image(file

用法：在series里添加label标签option = { series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], label: {

共同点都是保存在浏览器端，且同源的。不同点cookie1、会在请求时发送到服务器，作为会话标识，服务器可修改cookie；2、cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下，子路径可以访问父路径cookie，父路径不能访问子路径cookie；3、存储大小，浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k；4、生命

下面是一个用canvas画的钟<canvas id="canvas" width="500" height="500"></canvas>var clock = { hour : 0, minus : 0, second : 0, init: function() { this.canvas = document.getElementById("can

以下是自己写的一个自定义滚动条，暂时只支持改变y轴滚动条<div class="scroll-content" id = "scroll1"> <div class="scroll-block"> <p>hahahahha</p> <!--这里面是内容 --> <p>lkallalalla</p> <p>ho

图片裁剪上传 react这个裁剪功能是我从网上下载的裁剪插件，但是功能不完全，我自己补充成比较好用的一款。 代码下载地址：https://github.com/yawenzou/crop-image用法安装crop插件 npm install –save react-cropper将这整个文件夹引入项目 使用方法&amp;lt;CropBlock num...

没有登录直接访问页面跳转到登录页，官网的例子很详细了，参照官网做以下调整： 先把Route封装一下，判断一下用户是否登录，如果登录则正常router跳转，如果未登录则跳转登录页。代码： privateRoute.jsximport React, {Component} from 'react';import {Route, withRouter} from 'react-router-d...

网络请求拦截经常也可用到，比如在所有接口消息请求头部加上验证信息token之类的，或者接口报某类错误时统一处理。这里主要用在请求接口时，判断session是否过期，统一返回状态码区分，如果过期了跳转登录页重新登录拦截axios部分 重新封装axios请求//axios拦截器import axios from 'axios';axios.defaults.timeout = 10...

提高页面展示速度避免进入页面时重定向缩短服务器响应用时使用浏览器缓存缩小HTML，CSS，Javascript资源的大小优化图片优先加载可见内容（缩小首屏内容大小）延迟加载JavaScript...

var a = [1,2];var b = {m: 1};1、Array.isArrayArray.isArray(a); //trueArray.isArray(b); //false2、instanceofa instanceof Array; //trueb instanceof Array; //false3、Object.prototype.toString.call( obj )O

原型链继承function SuperType() { this.colors = ["red", "blue", "green"];};function SubType() {}//继承了SuperTypeSubType.prototype = new SuperType();var instance1 = new SubType();instance1.colors.push(

在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。可以直接在子组件修改对象或数组，但是并不会数据改变就会引起变化。检测对象变化1、不能检测到对象属性的添加或删除var vm = new Vue({ data:{ data111:{ a = 1 } }})d

ie8下event事件获取当前元素var eve = event||window.event;var objEle = eve.target || eve.srcElement;ie8下event事件是通过window.event来获取，当前元素是用srcElement

event.stopPropagation阻止事件冒泡兼容ie8

对象的属性：数据属性和访问器属性 创建对象的几种方法

js数据类型介绍和判断

闭包闭包是指有权访问另一个函数作用域中的变量的函数。 闭包只取到包含函数中任何变量的最后一个值，如下所示：function createFunctions() { var result = new Array(); for(var i = 0; i< 10; i++){ result[i] = function() { return i;

function addHander(element, type, handler) { if(element.addEventLister) { addHanderE = function(element, type, handler) { element.addEventLister(type, handler, false); }

function hasOperate(callback, second) { //second是检测未操作的时间，秒为单位，callback是该时间段未点击需要执行的函数 var status = true; var timer; document.body.onmousedown = function () { status

跨文本消息传递（XDM）指来自不同域的页面间传递消息。只要是postMessage()方法。该方法接收两个参数，一个是需要传入的数据，另一个是传入数据的域。如果第二个参数是‘*’，那么可以消息发送给任何域的文档。传递消息页面：<iframe id="myframe" src="mesg-next.html"></iframe>var iframeWindow = document.getElemen

拖放事件拖动元素时将依次触发下列事件：dragstart：按下鼠标键开始移动时在被拖放的元素上触发drag：在元素拖放期间会持续触发dragend拖放停止时（无论是否在有效目标上）触发上述之间是针对被拖放元素。当某个元素被拖放到一个有效防止目标上时，会依次触发下列事件：dragenter：元素被拖动到放置目标上时触发dragover：元素在放置目标内移动时持续触发dragleave或d

主要是< video >以及< audio >标签。支持这两个标签的媒体元素有ie9+、Firefox3.5+、Safari4+、opera10.5+、chrome、iOS版的Safari和Android版webkit。 用法：<!-- 嵌入视频 --><video src = "xxx.mpg">video player not available.</video> <!-- 嵌入音频 --

用highcharts 时部分柱状图上的数据不显示，一般出现在字体调大后显示空间不足，就隐藏了， 解决办法： 在调用完highcharts渲染完图表之后获取各个数据，判断一下，不为‘0’就使他显示出来，如下代码：var dataLabelNode = $(".highcharts-data-labels").find("g");//获取数据节点for(var i = 0; i<dataLabe

有时候用select的时候option通过value的值来设置默认值，用法如下：<select class="ht-table-showRows" v-if = "showrows"> <template v-for = "value in showrows.nums"> <option v-if = "value == 1" value="value" selected>{

图片预览的实现，兼容ie