- 博客(198)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 深拷贝方法
深拷贝方法 =>引用数据类型（数组，对象）function deepClone(soure){ const targetObj=source.constructor===Array?[]:{}; for (let key in source ){ if(source.hasOwnProperty(keys)){ // 引用数据类型 if( source[keys] && typeof source[keys]=.
2022-04-12 14:46:21
432
原创 react中useReducer的基本使用
import React, { useContext, useReducer } from 'react';const reducer = (preState: any, action: any) => { const newState = { ...preState }; switch (action.type) { case 'change-a': newState.a = newState.a + action.value; return newSt.
2022-03-07 16:40:41
350
原创 react antd 自定义倒计时按钮组件
父组件：import React, { useState, useEffect, useRef } from 'react';import {Button} from 'antd';// 控制按钮执行倒计时事件const [toStart, settoStart] = useState(false);//组件使用<Timebutton name={'命中详情'} num={4} onClick={() => { console.log('3333');
2022-03-04 14:37:59
837
原创 nrm (npm的镜像源管理工具)
基于vue项目---解决方案：node_modules 这个文件右键，选择TortoiseSVN，再选择Unversion and add to ignore list 就可以了
2022-02-24 16:40:45
179
原创 react-ant-design 日期时间选择器
功能：默认选中当天，选中范围三个月内，选中最长天数7天具体方法：（自定义ahooks）const useTime = () => { const format = "YYYY-MM-DD HH:mm:ss"; const [dates, setDates] = useState([]); const [hackValue, setHackValue] = useState(); // 默认当天 const [timevalue, settimeValue] = use
2022-02-11 13:54:35
2354
原创 react中代码块输出，代码高亮显示，带行号，能复制
以modal组件为例：import React, { useState, useEffect } from 'react';import { Modal, Button, message } from 'antd';import Highlight from 'react-highlight';import "highlight.js/styles/mono-blue.css";import { CopyToClipboard } from 'react-copy-to-clipboard'
2022-01-26 17:04:07
2693
原创 配置node版本，选择自己所需的node
一.首先把原来的node给卸载，从新开始去github下载一个nvmhttps://github.com/coreybutler/nvm-windows/releasesnvm-setup.zip二.然后安装，建议所有的安装命令都安装在除c盘以外的盘，然后自己命名三.命令行运行nvm install <version> 安装指定版本，如：安装4.4.0，nvm install 4.4.0nvm use <version> 切换使用指定的版本nodenvm
2022-01-06 14:29:45
1413
原创 react组件---组件通信方式总结
<div>react组件---组件通信方式总结</div><div>组件间的关系：</div><ul> <li>父子组件</li> <li>兄弟组件（非嵌套组件）</li> <li>祖孙组件（跨级组件）</li></ul><div>几种通信方式：</div><ul> <li>1.props-.
2021-11-04 20:41:07
92
原创 react路由跳转，实现传参的3种方式：params、search和state
一.父页面import React, { Component } from 'react';import { Route, Switch, Redirect } from 'react-router-dom'import MynavLink from '../../components/mynavLink'import Message from './message'import News from './news'import Infos from './infos'class Home
2021-10-28 15:45:52
5190
原创 react配置多个代理，解决axios请求跨域问题
方法：在src文件夹下创建setupProxy.js文件const proxy = require('http-proxy-middleware');module.exports = function (app) { app.use( //遇见api前缀，走代理 proxy('/api', { target: 'http://localhost:7001', //目标地址 pathRewrite: { '^/api': '', },
2021-10-26 16:17:31
312
原创 获取字符串中最大的字符长度
//获取字符串中最大的字符长度---写法1 function getMax(str) { let strjson={}; for(let item of str ){ if(item in strjson){ strjson[item]++; }else{ strjson[item]=1; } } let nam...
2021-10-19 16:03:30
604
原创 递归函数举例
//n项求和数列 例如：100以内求和 1+2+3+...+98+99+100=5050 function sum(n) { if(n===1) return 1; return sum(n-1)+n; } var hh=sum(100); //5050 console.log(hh); //n以内奇数求和数列 例如：10以内奇数求和 1+3+5+7+9=25 func...
2021-10-19 15:40:38
154
原创 常用的正则表达式
// 校验export function regCheck (val: any, type: string) { // 10位数字校验（月结卡号） if (type === 'cardnum') { const reg = /^\d{10}$/; return reg.test(val); } // 11位手机号校验 if (type === 'phone') { const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; .
2021-10-14 15:52:38
58
原创 改变this指向方法
改变this指向的三种方法：call() 、bind()、 apply()这三个函数的第一个参数都是 this 的指向对象举例执行区别： var a='小花',b='小菜'; function fun(b,d){ var str=this.a+'和'+this.b+',打算从'+b+'出发，去往'+d; console.log(str); } var obj={ a:'小明', b
2021-10-13 15:28:37
51
原创 vue+elementUi发送邮件组件编写
父组件：<email-dialog v-if="showemailDialog" v-on:closeemailDialog="closeemailDialog" :multipleSelection="multipleSelection"></email-dialog>子组件：<template> <div> <el-dialog title="发送邮件" :visible.sync="visibl
2021-08-27 17:08:04
8937
3
原创 uniapp小程序环境路劲配置
/* 配置不同环境的根路径 */const devUrl='http://159.36.221.22/'; //开发环境根路径const proUrl='http://59.30.221.25/'; //生产环境根路径const curUrl=process.env.NODE_ENV='production'?proUrl:devUrl; //当前环境判断...
2021-05-18 11:07:23
1116
原创 vue传值：兄弟间传值
1.新建bus.jsimport Vue from 'vue'export default new Vue;2.在a组件产生需要传递的值//先引入bus.jsimport Bus from '@/components/bus/bus.js'//兄弟间传值---设置值Bus.$emit('navItemtable',this.navItemtable);3.在b...
2020-04-09 15:17:51
361
原创 vue深度监听对象的变化，并使用localStorage进行对象存储
<script> export default { data() { return { editableTabs: [{ title: '查询', name: '1', content:{ //右侧内容输入区 searchtext...
2020-04-09 15:08:58
1078
原创 vue窗口大小实时监听
<div class="leftBox" :style="{width:wrapBox.leftWidth+'px'}">左侧部分</div><div class="rightBox" :style="{width:wrapBox.rightWidth+'px'}">右侧部分</div> data() { return...
2020-04-09 14:47:55
1821
原创 正则实战：通过正则判断字符串是不是只包含数字和小数点
let reg = /^[\.\d]*$/; //校验字符串是否只包含数字或小数点if(reg.test(this.editTemplate.templateName)){ this.$message({ message: '模板名称不得为全数字，请重新输入！', type: 'warning' }); return fa...
2020-03-27 16:03:35
4134
原创 css3光影闪过效果
<div class="lightbox"> <div class="guangshu"></div></div>.lightbox{ width:7rem;height:7rem;overflow:hidden; }/* 光影划过效果 */.guangshu { display: block; position: re...
2020-03-19 17:42:35
1259
原创 js获取1-100之间的随机整数
/* 获取随机整数 */randomNum(m,n){ var num = Math.floor(Math.random()*(m - n) + n); return num;}/* 获取1-100之间的随机整数 */var num=this.randomNum(1,101)；console.log( num );...
2020-03-18 15:30:52
7492
1
原创 jq小图标抖动效果
<!doctype html><html> <head> <title>Rotate</title> <script src="./jquery.js"></script> <script> $(function() { function state1() { ...
2020-03-16 17:51:06
576
原创 正则实战：通过正则获取特殊字符段
let templateContent="回复成功系统${name}系统已获取回复内容${value}内容${哈哈}内容${你还}";let arr=[];let parmsList=[];/* 正则匹配获取${}内容 */if(templateContent){ let reg=/\$\{(.*?)\}/g; arr=templateContent.match(reg);...
2019-12-05 14:16:57
344
转载 使用bilibili开源的flvjs实现摄像头rtsp视频直播
实现摄像头的直播功能其实有许多方案，像是安装vlc插件、rtsp转rtmp然后使用videojs通过flash播放rtmp，以及hls .m3u8等方式然而现今的浏览器对于vlc插件几乎都不再支持了，flash在2020年也将被chrome停止支持，而.m3u8的方案用来做直播的话似乎延迟很高经过一番查找，最终决定使用B站（bilibili）开源的flvjs作为解决方案，其原理是后端用f...
2019-11-27 15:22:34
8186
9
原创 css3小球环形转圈效果
效果图：代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> body { margin: 0px; padding: 0px; } .warpbo...
2019-10-30 14:08:46
1647
原创 css3动画，动态打字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @keyframes typing { from...
2019-10-24 15:05:01
471
转载 大前端性能优化总结
rickchen客户端优化静态资源优化使用构建工具对HTML,CSS,JS压缩，删除生产环境下的无用代码(比如注释，打印信息等)。提取公共资源，减少代码体积。外链CSS和JS文件，外链的文件可以放到CDN,服务器和浏览器会进行缓存。使用雪碧图，减少http请求数。自动生成雪碧图:www.toptal.com/developers/…使用字体图标iconfont...
2019-10-10 12:54:24
331
转载 nodejs 前端项目编译时内存溢出问题的原因及解决方案
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本...
2019-09-26 17:17:21
2059
原创 时分秒（00:00:00） 转为 （秒） 和 （00时00分00秒）
时分秒（00:00:00） 转为 秒time_to_sec(s) { let ss = s.split(":"); let t = Math.floor(ss[0]) * 60 * 60 + Math.floor(ss[1]) * 60 + Math.floor(ss[2]); return t;},时分秒（00:00:00） 转为 00时00分00秒...
2019-09-25 09:51:38
4186
原创 vue中style样式动态绑定
方法一：(1) html中: <div class="videoMa" ref="videoMa" style="width:100%;height:100%;"> <div id="playWnd" class="playWnd" :style="{width:videoBox.width+ 'px',height:videoBox.height+ 'px'}"&...
2019-08-16 10:58:41
78894
原创 vue中使用localStorage进行对象存储
let saveUserInfo={ 'username':'admin', 'roleId'::'1', 'userId':'b341181c-aced-11e9-89bf-00163e0e8daf', }; /* 存储*/localStorage.setItem('saveUserInfo', JSON.stringify(saveUserInfo));/* 获...
2019-07-25 15:26:28
4673
1
转载 vue项目打包部署到服务器，静态资源文件404
转发来自https://www.cnblogs.com/lemoncool/p/10876407.htmljs文件404问题 原因：打包的项目静态资源的路径需要设置为绝对路径。如果是相对路径会出错 解决办法：修改config/index.js文件，将 assetsPublicPath修改为'./'  ...
2019-06-24 15:45:23
5391
1
原创 简易计时器效果
简易计时器<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>简易计时器</title> </head> <body> <input type="text" id="timetext" value="...
2019-06-20 14:42:16
1580
原创 vue中公共方法调用
首先，在assets文件夹下，新建js文件夹，创建common.jsexport default { text(){ console.log("测试，测试！！！") } }（1）如果是全局（多页面）使用：1.在main.js中引入/* 引入公共js*/import common from '@/assets/js/common.js'Vue....
2019-06-03 14:25:26
9296
转载 解决IE浏览器无法显示VUE项目的方法
一、ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browserPromise为ES6语法，有的浏览器不支持ES6,所以需要安装babel-polyfill来将ES6转换为浏览器可识别的ES5语法①npm install --save-dev babel-polyfill②在main.js中引入 impo...
2019-05-24 10:42:47
5109
原创 vue接口统一管理
1.在src文件夹下面新建api文件夹，新建api.js// let apiUrl = 'http://192.168.8.134:8081';let apiUrl = '/apiapi';let API={ api:{ //应用表 applist:apiUrl+'/app/list', //查询应用列表 appadd:apiUrl+'/app/a...
2019-05-14 16:51:25
5234
转载 大屏数据可视化示例
转载来自：https://blog.csdn.net/hwhsong/article/details/80805511数据可视化是数据空间到图形空间的映射，是抽象数据的具象表达。数据可视化交互的基本原则：总览为先，缩放过滤按需查看细节。大屏数据可视化是当前可视化领域的一项热门应用，通常可以分为信息展示类、数据分析类及监控预警类。大屏数据可视化应用的难点并不在于图表类型的多样化，而在于如...
2019-05-09 16:59:40
4906
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人