zywpurple-优快云博客

原创 git ssh配置

gitlab 配置ssh， window10 配置好ssh之后报错权限禁止，以及TortoiseGit 配置ssh

2023-02-20 16:51:42 3977

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 =

2021-05-25 11:31:22 171

原创 webpack配置相关

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

2021-05-25 11:29:39 205

原创读数，可设置时间，间隔位数，分隔符

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

2021-05-25 10:48:45 228

原创 react 使用 postcss-px-to-viewport

自动将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

2020-10-16 11:06:10 3481 1

原创删除node_modules

npm install rimraf -grimraf node_modules

2020-10-16 10:50:07 133

原创 image、file、url、blob、canvas之间的转换关系

转化关系图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

2020-08-05 16:13:17 914

原创前端性能优化

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

2019-04-16 15:23:10 491

原创 css集锦

文章目录rem:root伪类css优先级BFCrem相对于html根元素的单位。1rem等于一个根元素的字体大小。html {font-size: 16px;} p {width: 2rem}这样宽就是32px。rem用法:document.documentElement.style.fontSize = document.documentElement.clientWidth*...

2019-04-02 15:15:24 158

原创 react axios和ajax网络请求拦截（session过期跳转登录页）

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

2018-07-26 17:25:08 9617 1

原创 react-router4.0 访问其他页面未登录时跳到登录页

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

2018-07-26 16:34:45 10683 1

原创图片裁剪上传 react

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

2018-06-25 14:58:25 2138

原创自定义滚动条样式

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

2017-08-24 16:03:27 527

原创用canvas画能走的钟

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

2017-08-11 16:04:58 473

原创 sessionStorage 、localStorage 和 cookie区别及使用

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

2017-06-30 16:26:09 745

原创 echart饼图上显示数据

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

2017-05-12 13:47:22 21189 3

原创 js判断object是否是数组

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

2017-03-25 14:20:22 855

原创 vue检测对象和数组的变化

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

2017-02-17 17:01:17 3093

原创 vue 中，v-for和v-if同时使用

有时候用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>{

2017-02-07 09:47:43 43742 2

原创 highcharts y轴数据接近最大值时（部分）数据不显示问题

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

2017-01-10 14:30:18 6002

原创 html5媒体元素，音频播放器

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

2016-11-14 11:04:33 580

原创 js原生拖放

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

2016-11-08 17:37:12 385

原创跨文本消息传递

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

2016-11-08 10:41:17 637

原创判断用户是否长时间未操作（点击）

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

2016-10-17 17:22:39 8051

原创添加事件,兼容浏览器

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

2016-10-17 16:42:26 316

原创 css水平垂直居中

<div class = "content"> <div class = "aaa">hahhahaha</div></div>1、absolute,上下左右都是0;margin：auto; 父元素不固定宽高；居中元素固定宽高；兼容ie8+.content { position: relative; background-color: #fff4b4; height

2016-10-17 16:36:06 263

原创 js继承

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

2016-10-13 17:26:42 251

原创 js函数--闭包和this对象

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

2016-10-12 17:19:21 332