qq_42359718的博客

原创 searchForm自适应布局 + 按钮插槽

{?"""4px"${?"auto"${px。

原创 antd RangePicker 格式化 季度 YYYY- QQ 受控组件 / 非受控组件

Antd 切换 RangePicker formate 季度： YYYY - QQ 月： YYYY - MM 处理方式

原创 windy开发笔记

图层温度 没加上去 有会的大佬指导一下 多谢。基于windyApi 开发自己的气象项目。

原创 正则表达式

● 电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）: ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))\d+)(.\d+)?● 负浮点数：^-([1-9]\d*.\d*|0.\d*[1-9]\d*)$ 或 ^(-(([0-9]+.[0-9]

原创 websocket封装 案例

websocket 封装与调用

原创 antd Table下拉加载组件： 1、普通下拉加载， 2、 结合virtuallist-antd实现虚拟列表下拉加载

antd Table 内容下拉加载 virtuallist-antd 虚拟列表加载

原创 echarts 词云样式配置、 堆叠图 层级不清晰 、饼状图每块的边框间隙

【代码】echarts 词云样式配置、 堆叠图 层级不清晰 、饼状图每块的边框间隙。

原创 懒加载高阶组件

这里的ExampleComponent是需要懒加载的组件，fallback是在组件加载过程中显示的占位符。这样，ExampleComponent就会在需要时才被加载，而不是在页面加载时就被加载。

原创 audio video播放 组件控制

【代码】audio video播放 组件控制。

原创 函数式编程 调用组件 eg: modal

函数调用 modal

原创 实现 classNames

【代码】实现 classNames。

原创 swiper slide 内部滑动 处理方案

场景： 滑动到第三屏幕时 内容超出屏幕 swiper内部 展示不完全需要滑动。问题： 添加 “swiper-no-swiping” 后无法滚动到上一屏。判断是否上滑 设置是否添加 “swiper-no-swiping”处理： 添加滑动事件监听。

原创 axios 取消上一个相同的请求

【代码】axios 取消上一个相同的请求。

原创 数据排序 antd拖拽排序 记录

开发记录

原创 前端下载文件流 进行保存 excel文件

前端获取文件流进行文件保存

原创 antd 4.x, 实现Table 可编辑 , Table 结合Form.List,实现单独校验Form.List、Form.Item校验

Table 嵌套Form.List 编辑、修改、校验、保存

原创 全国 省市 string 数据

json 数据

原创 antd Table 组件，传入数组生成合并行表单

传入 ：得出：import React, { useState, useEffect } from 'react'import { Table } from 'antd'// 组件作用 // 传入一个数组 自动合并列let str = '[{"票据":"大人","楼层":"一楼","场次":"下午"},{"票据":"大人","楼层":"一楼","场次":"上午"},{"票据":"大人","楼层":"二楼","场次":"下午"},{"票据":"大人","楼层":"二楼","场次":"上午"},

原创 前端水印文档记录

基本操作 function __canvasWM({ container = document.body, width = '300px', height = '200px', textAlign = 'center', textBaseline = 'middle', font = "20px Microsoft

原创 h5获取手机定位信息

getlocationpoint:function () { if (navigator.geolocation){ navigator.geolocation.getCurrentPosition( function (position) { latitude = position.coords.latitude;//获取纬度 longitude = position.coord

原创 ts封装axios 阅读记录

原文 : https://juejin.cn/post/7071518211392405541axios已经满足如下功能：无处不在的代码提示；灵活的拦截器；可以创建多个实例，灵活根据项目进行调整；每个实例，或者说每个接口都可以灵活配置请求头、超时时间等取消请求（可以根据url取消单个请求也可以取消全部请求）。index.tsjavascript// import Request from './requrst'import Request from './Request'con

原创 前端鉴权 cookie、 session、token、jwt、单点登录阅读记录

基于 HTTP 的前端鉴权背景cookie 为什么是最方便的存储方案，有哪些操作 cookie 的方式session 方案是如何实现的，存在哪些问题token 方案是如何实现的，如何进行编码和防篡改？jwt 是做什么的？refresh token 的实现和意义session 和 token 有什么异同和优缺点单点登录是什么？实现思路和在浏览器下的处理状态cookie配置： 【domain/path】cookie 是要限制::「空间范围」::的，通过 Domain（域）/ Path（路径）两

原创 AXIOS 摘抄

Axios 的适配器原理是什么Axios 是如何是实现请求和响应拦截的Axios 取消请求的实现原理CSRF的原理是什么？ Axios 是如何防范客户端的CSRF的攻击请求和响应数据转换是怎么实现的？Features(特征）从浏览器创建XMLHttpRequest从node.js 创建HTTP请求支持Promise APi拦截请求与响应取消请求自动转换JSON 数据支持客户端XSRF攻击判断使用环境 的兼容逻辑被称做适配器function getDefaultAdpter(){

原创 +=、 =+、 ++i、 i++、--i、i--、JS 运算符 (看完肯定记得住啊 阿SIR)

+=// 数字var a = 1 a += 1 a = 2// 字符串var b = '1' b += 1 b ='11' // 数组var c = [ [1,2,3,4],[5,6,7]]c+=''c= '1,2,3,4,5,6,7'// 对象var d= { key: 'value'} d+= '121' d = '[object Object]121' // undefined var e = undefined e+='1212''undefined1

原创 记录 html2canvas 生成海报 ### 处理生成图片背景不清晰问题 ###

背景 ： next.js 根据不同数据生成不同海报 支持 长按保存图片方案一： 使用canvas 画 难点： 内容较多 确定元素位置 太麻烦 性能消耗大方案二： html2canvas.js 难点：引入方式 （ssr 项目中 import 引入 得到 undefined ） 渐变色 截图失真 清晰度不够 生成图片展示带有白底 （给展示盒子 加 overflow: hidden）解决 引入方式发现： 在本地启动项目没有问题 import html

原创 Webpack 3.+ 升级 4.+ 操作 webpack4.44.2匹配的依赖版本号 (success)

npm uninstall webpack webpack-cli html-webpack-pluginnpm i webpack@4.16.5 webpack-cli@3.1.0 html-webpack-plugin@3.2.0 -Dnpm run start问题1、旧的配置代码 new webpack.optimize.UglifyJsPlugin({ // 最紧凑的输出 beautify: false, // [删除]所有的注释 c

原创 react 父组件调用子组件方法 ，子组件暴露方法给父组件

正常情况下 父组件调用子组件 直接在子组件上传递 ref 属性就可以直接获取问题阅读：问题1 ：高阶组件 如何获取传入组建的 的属性方法？问题2： 如果不用ref 如何获取子组件中的方法 并在父组件中调用？背景：在 Ant Design 下，针对使用 Form.create 创建的组件，ref 取到的是 Form 相关的属性和方法，要获取到自定义的属性和方法，得使用 wrappedComponentRef 才行。（官方处理方式）1、思路 wrappedComponentRef （高阶组件中使

原创 js点击下载图片文件

记录 const downloadImg = (val) => { // val 为传入的图片地址 let _type_index = val.lastIndexOf('.'); let _type = val.substr(_type_index + 1); //原始图片类型 let image = new Image(); image.setAttribute('crossOrigin', 'anonymous'); //消除跨域 image.s

原创 antd upload 文件上传状态控制 与from 表单数据绑定 问题记录

问题一： 组件上传后的数据如何跟表单的getFieldDecorator数据获取问题二： 文件上传后的数据返回 接口全部在’done’状态下 如何实现 展示上传失败问题三：自定义上传使用antd组件开发是比较快速的开发方式,有时一些需求问题会遇到组件用起来不太方便，但是组件的样式又不想写，所以还是使用ANTD了在upload 组件中遇到 上面的一些问题，所以做个记录 免得下次又查查查。。。。默认上传 upload上传默认是FormFata 格式，如果使用组件的请求上传 <Upload

原创 antd form input 数据框自定义校验

校验输入值为正整数 且 限定最大值在此规矩下 可自定义判断 输入值 并返回错误信息 { validator: function (rule, value, callback) { try { if (Number(value) > 999) { throw new Error('最大可输入值为999'); } if (!(/^[1-9]+[0-9]*$/.test(value))) {

原创 stylelint在项目细节配置 记录

根据前两篇文章基本适用 .css .less 文件这篇主要适用检测.jsx 文件中css 样式代码安装npm install stylelint-config-standard stylelint-order --save-dev配置文件 stylelint.config.jsmodule.exports = { extends: 'stylelint-config-standard', ignoreFiles: ['**/*.js', '**/*.md'], plugins: [

原创 antd表单 中 input框非必填 、如果填写就校验格式 手机格式校验

<Form.Item className={styles.formItem} label="联系方式" labelCol={{ span: 7 }} name={[field.name, 'participant_phone']} fieldKey={[field.fieldKey, 'participant_phone']} rules={[ { validator: (_, value) =>

原创 js 两个大数相加

function sum(a: string, b: string) { // 1、转为数组 // 2、获取长度 、最长值 // 3、创建 结果组 、是否进制 判断 // 4、循环 // - 创建一个 个位相加结构 // - 取数 判断是否为 0 // - 相加 判断是否有进制 // - 得到结果后 处理数据 推进数组 // 5、 判断是否 到最后一位 且 flag 有进制 // 6、数组倒装 let arr1 = a.split('').

原创 异步操作 记录

原创 ES6 系列之 defineProperty 与 proxy

definePropetyES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。 Object.defineProperty(obj, prop, descriptor) 参数obj: 要在其上定义属性的对象。prop: 要定义或修改的属性的名称。descriptor: 将被定义或修改的属性的描述符虽然我们可以直接添加属性和值，但是使用这种方式，我们能进行更多的配置。函数的第三个参数 d

原创 setTimeout倒计时 setInterval相关 问题

setInterval 问题有错误不会停止多个定时器代码执行之间的间隔可能会比预期小间隔会被跳过要求用闭包实现每隔5s输出0-9之间的十个数字。这里先给出我写的最终实现方案 (function timer (){ var i = 0 setTimeout(function() { console.log(i) i++ if(i< 10 ){ setTimeout(arguments.callee, 1000)

原创 react监听页面滑动 并判断滑动方向

思路1、开启滑动监听2、定义获取滑动当前距离 函数 getScollTop （）3、定义两个值 一个当前值 一个滑动后的值 初始值为0（也是 上一次滑动距离值）4、 滑动时 获取当前滑动值比较上次值 跟当前滑动值最后设置 旧值为此次滑动距离值 let scrollTop = 0 let topValue = 0const getScollTop = () => { let scrollTop = 0; if( document?.documentElem

原创 浏览器硬件检测原生js检测是否支持 视屏 音频能力

abilitytest在webrtc 项目中 需要判断浏览器是否支持 调用 视屏音频 功能import { message} from 'antd';// 这种方式在各个浏览器都可以（不过在Safari和Firefox浏览器获取的设备信息和在Chrome获取的信息还是不一样的）export const abilitytest = async () => { let isSupport = true if (!navigator.mediaDevices || !navigato

原创 carete-react-app创建 typescript项目框架

create-react-app官方文档官方文档准备 Node、npm；最基本的东西了，没有就自行安装一下。 官方推荐npx安装create-react-app。如果你的npx出现 系统找不到目录 之类的，建议卸载node重新升级 npx -v 查看npx版本，5.2以下请自行卸载node升级npm、npx 全局安装create-react-app// npm 方式npm install -g create-react-app// 如果很久之前安装过，建议卸载重新安装 npm unins

原创 记录一次react + typescript + antd 中table配置项 columns居中问题

在项目中直接写const columns = [ { title: '供应商ID', dataIndex: 'name', key: 'name', align: 'center' },typscript会检测报错处理方式：一：const columns = [ { title: '供应商ID', dataIndex: 'name', key: 'name', align:'center' as 'center',