- 博客(91)
- 收藏
- 关注
RSS订阅原创 zrender应用
/*@name: FactoryMap@author: diaojw@time: 2022-10-17 08:41:24@description:*/import React, {useEffect, useRef, useState} from 'react';import * as zrender from 'zrender'import CanvasPainter from "zrender/lib/canvas/Painter";import {message} from "an
2023-04-19 17:11:11
376
原创 rules校验问题
Form.Item:```handlebarsrules={[{requried:true,message:'必填', type:'类型'，transform(val){ // 指定类型： type默认string number array if(val){ // 可以正则表达式 return val // 与类型对应 }}}]}
2022-05-13 19:39:55
121
原创 canvas图片下载toDataURL 跨域报错
1.视频播放截图关键：crossOrigin='anonymous'<video id={videoIDEnum} muted autoPlay crossOrigin='anonymous'/>2.图片截图var img = new Image;img.onload = myLoader;img.crossOrigin = 'anonymous'; //可选值：anonymous，*
2022-03-11 09:46:40
218
原创 一个服务器移植另一个服务器，docker 启动nnginx 文件
ssh [email protected] // 在本服务器建立连接，提示输入密码unzip -o xxx.zip -d /data/html // 路径cp -r /data/html/aa-bb/build/. data/html/aa-bb // 复制======================scp *.zip [email protected]:/data/htmlssh [email protected] -o xxx.zip -d /data/www
2022-02-11 17:48:05
118
原创 封装axios
import myAxios from './myAxios.js'import http from './http.js'export const reqCvrTableList = async (data) => { const response = await http.post(`http://xxxxxxxxxxxxxxx`, data); return myAxios.postDataForProTable(myAxios.cleanResponse(response).dat
2021-06-30 16:28:26
89
原创 实现遍历异步函数for await of (图片加载canvas绘图)
示例：以下为核心代码：1.异步加载图片的组件<Image style={{width: '100%', height: '120px'}} src={item.image} preview={{ src: imageUrl, visible: !!imageUrl, onVisibleChange: (visible, prevVisible) => { console.log(vi
2021-05-19 20:15:11
335
原创 react websocket useState
const data = [{happenTime:'时间', location:'位置',deviceIp:'IP',eventName:'事件类型',status:'处理信息',isMake:0,image:undefined}] const [currentData,setCurrentData] = useState(data) useEffect(()=>{ if(sessionStorage.currentData){ let arr = JSO
2021-04-28 20:10:27
232
原创 一键git地址迁移
原gitlab地址：http://gitlab.baidu.com/java/springbootdemo.git新gitlab地址：http://gitlab.aliyun.com/java/springbootdemo.git# 拉取远程所有分支git clone --mirror http://gitlab.baidu.com/java/springbootdemo.gitcd springbootdemo.git/git config --bool core.bare false# 切
2021-04-27 15:56:10
97
原创 2021-03-23
react eslint 配置文件文件名：.eslintrc.jsmodule.exports = { 'env': { 'node': true, 'browser': true, 'amd': true, 'es6': true }, 'parser': 'babel-eslint', 'extends': [ 'eslint:recommended', 'plugin:react/recommended' // 新增 ],
2021-03-23 15:40:40
83
原创 useMemo和useCallback
useCallback之前如果我们在render中定义了一个方法：render() { const {data} = this.state; const filter = data.filter(e => e.id !== 5); ...}那么我们知道每次render都会执行filter这个方法，其实你是不是觉得当data没变这个方法只要执行一次就好了，看看react hook怎么做的function demo() { ... const filte
2021-03-23 15:37:18
74
原创 arr to tree
数组数据var list = [ {id:1,pid:0,name:'一级'}, {id:2,pid:1,name:'一级1'}, {id:3,pid:1,name:'一级2'}, {id:4,pid:2,name:'一级1-1'}] // 数组转treefunction composeTree(list = []) { const data = JSON.parse(JSON.stringify(list)) // 浅拷贝不改变源数据 const resul
2021-03-18 21:20:22
155
原创 ant design ProComponents
一、概述建议crud用ProComponents来开发，这样的效率更高一些，不管是umi hooks还是ahooks中的表格，表单等功能，不如它强大，它主要包含以下组件：ProLayout 解决布局的问题，提供开箱即用的菜单和面包屑功能ProTable 表格模板组件，抽象网络请求和表格格式化ProForm 表单模板组件，预设常见布局和行为ProCard 提供卡片切分以及栅格布局能力ProDescriptions 定义列表模板组件，ProTable 的配套组件ProSkeleton 页面级别的骨
2021-03-02 16:07:27
591
原创 useMemo 与 useCallback
回顾在介绍一下这两个hooks的作用之前，我们先来回顾一下react中的性能优化。在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式来创建组件。当时我们也知道，react中，性能的优化点在于：调用setState，就会触发组件的重新渲染，无论前后的state是否不同父组件更新，子组件也会自动的更新基于上面的两点，我们通常的解决方案是：使用immutable进行比较，在不相等的时候调用setState；在shouldComponentUpdate中判断前后的props和st
2021-02-26 10:46:50
126
原创 TypeScript中解构函数参数
async function update({id, ...todoInfo }: ITodo) { // this line here const db = await makeDb() const foundTodo = await db.collection('todos').updateOne({ _id: transformId(id) }, { $set: { ...todoInfo } }) return foundTodo.modifiedCount > 0 ?
2021-02-24 09:58:35
4075
原创 useState修改对象的字段
首先定义一个空对象 const [dataSelect, setDataSelect] = React.useState({})给这个对象附上不同值，但不会把原来的覆盖的掉 const select = (e, item, type) => { const data = { ...dataSelect } if (type == 'price') { setSelectNO(e) data.min_price = item.min_price
2021-02-24 09:55:53
2545
原创 ant+transfer+ts
代码可直接运行import React, { useState } from 'react';import { Transfer, Tree } from 'antd';// Customize Table Transferconst isChecked = (selectedKeys:any, eventKey:any) => selectedKeys.indexOf(eventKey) !== -1; interface TreenodeInter { key:any; tit
2021-02-23 21:06:09
306
原创 require.context()的用法详解
require.context(directory,useSubdirectories,regExp)directory:表示检索的目录useSubdirectories：表示是否检索子文件夹regExp:匹配文件的正则表达式,一般是文件名例如 require.context("@/views/components",false,/.vue$/)1、常常用来在组件内引入多个组件。const path = require('path')const files = require.contex
2020-12-07 20:17:54
42936
1
原创 解决vue cli3.x打包更新版本,浏览器缓存问题
<meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">在 vue.config.js 的文件中加入下面这段话// vue.config.jsconst Timestamp = new Date().getTime();module.exports = { con...
2020-08-13 09:08:36
1275
3
原创 el-tree增删改功能记录
el-tree增删改功能记录需实现功能：添加同级节点添加子级节点重命名节点删除节点HTML <el-tree ref="tree" :data="data" node-key="id" default-expand-all draggable> <div class="tree-node" slot-scope="{ node, data }"> <div class="tree-node"> &l
2020-06-22 09:14:32
466
原创 v-slot用法
vue 2.6 插槽更新 v-slot 用法总结在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。插槽我的理解就是父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置(匿名插槽,具名插槽)插槽分类插槽一共就三大类1.匿名插槽(也...
2020-01-20 11:28:44
1365
原创 各种表格导出
1.依赖xlsx，fileSaver两个库示例：<template> <div class="common-table" style="width:100%"> <el-table v-loading="loading" element-loading-text="...
2019-12-25 15:23:09
256
原创 webSocket知识
// websocket通信 getWebsocketData(){ let wsurl = `ws://10.88.xxx/ws/dgw` this.websocket = new WebSocket(wsurl) this.websocket.onopen = this.websocketonopen // t...
2019-12-19 11:46:21
101
原创 数字滑动效果
1.翻牌模式：两个文件：flipclock.vue flipper.vue1.1 flipClock.vue<template> <div class="FlipClock"> <Flipper ref="flipperHour1" /> <Flipper ref="flipperHour2" /> <!...
2019-12-19 11:21:31
321
原创 图片动画播放
video stopplayvar play = function (val) {// loading进度var percent = Math.round(100 * store.length / maxLength);eleLoading.setAttribute(‘data-percent’, percent);eleLoading.style....
2019-12-19 10:56:14
112
原创 埋点知识
1.创建一个跟踪网址；2.生成对应的userId；3.html中使用；3.1 普通html页面中使用var _paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPag...
2019-12-19 10:50:49
1195
1
原创 后端返回数据导出excel表格
1.vue组件js// 导出 download() { this.downloadLoading = true this.initExcelCanteenDetail() },2.封装函数 async initExcelCanteenDetail() { // if (!await this.beforeInitExcel()) { ...
2019-10-21 19:47:23
1774
原创 切角
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>斜切角</title> <style type="text/css"> .b { margin-top: 50p...
2019-10-10 20:15:47
132
原创 图片滑块验证
<template> <div id="login"> <el-form class="loginFrom" :model="logindata" :rules="rules" ref="ruleForm"> <el-form-item class="login-item"> <h1 class="log...
2019-10-10 17:35:20
364
原创 mixins混入简化常见操作
删除线格式 我们在开发中经常会遇到金钱保留两位小数，时间戳转换等操作。每次我们会写成一个公共函数，然后在页面里面的filters进行过滤。这种方法每次，但是感觉每次需要用到，都要写一遍在filters，也是比较烦呢！！！但是，我们猿类的极致追究就是懒呀，那这怎么能行~~~兄弟们，抄家伙！上mixins！！！import { u_fixed } from './tool'const mixin...
2019-09-29 11:51:44
285
原创 vue获取数据的两种方式的实践+简单骨架屏
在vue中获取数据有两种方式，引入尤大大的话就是：导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。那么我们来实践一下这两种获取数据的方式，以及用户体验优化的一点思考。一、首先是第一种：导...
2019-09-29 11:47:08
813
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人