react
爱吃排骨
这个作者很懒,什么都没留下…
展开
-
Antd Select选择器 treeSelect 选择树 解决异步数据无法设置默认值
Antd Select选择器 treeSelect 选择树 解决异步数据无法设置默认值原创 2022-09-29 15:46:37 · 2540 阅读 · 1 评论 -
react 模态框 嵌套from 表单 关闭模态框清空表单值
react 模态框 嵌套from 表单 关闭模态框清空表单值原创 2022-08-22 11:29:49 · 870 阅读 · 0 评论 -
JS 业务常用正则
JS 业务常用正则原创 2022-07-22 14:18:47 · 150 阅读 · 0 评论 -
nvm的使用
nvm的使用原创 2022-06-10 16:35:16 · 1281 阅读 · 0 评论 -
gizp接口返回处理
有时候处理数据时候 数据量太大,这时候就需要进行数据gizp 压缩来达到快速请求的目的。一般后台会使用base64+gzip压缩来处理。我们拿到后需要进行处理1.主要使用插件 pako来解压gizp.2.当数据量特别大的时候需要进行分片处理,以免 ‘String.fromCharCode.apply(null, data.slice(i * chunk))’ 会提示内存溢出等问题import pako from 'pako'; const unzip => (b64Data).原创 2022-05-20 10:14:49 · 201 阅读 · 0 评论 -
可编辑的div黏贴图片
黏贴图片主要分为2个情况,第一个是直接截图或者打开图片后点击复制,第二个是直接使用ctrl+c复制电脑本地图片,今天主要是写一下ctrl+c复制电脑本地图片的方法通过使用ctrl+c复制电脑本地图片 在粘贴板里面是保存的file文件类型 所以直接ctrl+v 是无法复制出来,这就需要我们将file类型的img 转化成blob类型,具体方法如下。将此函数绑定到onPaste 黏贴事件 const getItem = async (event) => { let items =.原创 2021-08-26 16:10:36 · 467 阅读 · 0 评论 -
JS切换扬声器设备
最近有做到检测音视频的功能,记录一下获取扬声器设备也是使用的navigator.mediaDevices.enumerateDevices() 方法1.获取到扬声器设备列表,代码如下 其中audiooutput 就是代表的扬声器设备。 const [audioList, setAudioList] = useState([]); //获取音频列表 const getSpeakerList = () => { navigator.mediaDevices ...原创 2021-07-13 14:29:32 · 4697 阅读 · 5 评论 -
JS输出音频根据分贝波浪显示
效果图如下,这里取巧使用了antd的 Rate组件,只需要传入数值即可自动变化这里使用的API是navigator.mediaDevices.getUserMedia({audio:true}) const [audioNum, setAudiotNum] = useState(0); //获取音频分贝 const getAudio=()=>{ navigator.mediaDevices .getUserMedia({ audio: t...原创 2021-07-06 19:35:27 · 2570 阅读 · 1 评论 -
JS获取电脑摄像头,麦克风,点击切换摄像头设备
主要用到的API是navigator.mediaDevices.getUserMedia在这里可以看到 详情https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia1.获取本地视频 const getVideo = () => { navigator.mediaDevices .getUserMedia({ audio: false, .原创 2021-07-06 19:24:23 · 4081 阅读 · 0 评论 -
在react 中使用tinyMce富文本编辑器
1.加载缓慢,白屏问题。最开始使用tinyMce的时候发现第一次加载巨慢,查了一下资料后发现一句话,tinyMce在首次加载的时候会在全局查找tinyMce这个变量,如果没有找到就会请求云服务器的tinyMce资源,个人认为应该是这个原因导致的,而导致这个问题的原因是因为开始没有导入import tinyMce from 'tinymce/tinymce';,最开始只导入了import { Editor } from '@tinymce/tinymce-react';在知道这个问题后原创 2021-02-19 11:30:50 · 4971 阅读 · 10 评论 -
ant design input 框去除点击蓝色颜色边框
.ant-input-affix-wrapper { border: none ; background: #f6f6f6; outline: none; width: 95%; box-shadow: none; }原创 2021-01-25 19:21:10 · 4735 阅读 · 0 评论 -
图片90°倍数旋转方法
图片90°倍数旋转方法 rotateBase64Img(src, edg, callback) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var imgW;//图片宽度 var imgH;//图片高度 var size;//canvas初始大小 if (edg % 90.原创 2020-12-31 16:04:30 · 507 阅读 · 3 评论 -
react ant-design 使用form 与抽屉组件,解决每次点击展开抽屉,form数据不更新问题
在做一些表格编辑的功能时候,在抽屉组件里面使用form表单的时候会设置默认form数据 ,例如 //默认初始化数据 const formInitVal = { polceName: data.polceName, type: data.type, status: data.status, trialDeviceSerial: data.trialDeviceSerial, };当我们在点击展示每条数据的时候,会发现传入了当前数据,form表...原创 2020-12-03 11:41:37 · 2711 阅读 · 0 评论 -
react redux 基础使用
react redux 基础使用一。准备工作1.安装redux npm install --save redux2.安装react-reduxnpm install --save react-redux安装完毕之后在项目中创建store文件夹主要有三个JS文件,store,action,reducersstore.js主要是存放store仓库import {createStore} from 'redux'import reducers from './r...原创 2020-11-26 17:52:16 · 278 阅读 · 0 评论 -
react 项目 使用react-audio-player,避免chrome无法自动开启声音问题
在做一些数据进行推送告警的时候,chrome浏览器安全限制会屏蔽声音响应,解决办法可以使用react-audio-player 插件1.安装npm install --save react-audio-player2.使用import ReactAudioPlayer from 'react-audio-player';import sounds from '@/assets/audio/alarm.mp3'let audiosDom; //音频const audioRef =..原创 2020-09-27 15:23:10 · 4182 阅读 · 1 评论 -
ant design 时间控件清空值
有时候在使用时间组件,想要通过按钮来清空已经选择的值,可以再组件中添加一个key 来重置 <RangePicker width={230} format="YYYY-MM-DD" key={timeRest} onChange={(e, d) => {原创 2020-09-22 15:47:32 · 3193 阅读 · 0 评论 -
ant design 动态显示隐藏表头
主要是使用了 filterType属性, { title: "处理状态", dataIndex: "status", key: "status", align: "center", filterType:!tagFilter, // sorter: (a, b) => (a.status > b.status ? 1 : -1), },table 的columns设置 columns={colu原创 2020-09-22 09:41:01 · 4544 阅读 · 0 评论 -
在react中使用socket io
1.安装npm install --save socket.io-client2.连接地址const socket = io.connect(socketUrl),depart_id=props.depart_id 3.推送登录信息 socket.on('connect',function(){ socket.emit('login', depart_id) })4.使用约定好的方法 socket.on('oneLevel',(res)=>{.原创 2020-09-17 15:08:23 · 3604 阅读 · 1 评论 -
leaftlet 加载热力图 且改变热力图大小不随着地图层级改变而改变
加载leaftlet 热力图只需要下载heatmap.jsleaflet-heatmap.js下载地址,下载只需要引入相关JS就可以了https://github.com/pa7/heatmap.js/tree/develop/plugins <script src="./static/js/leaflet.js" type="text/javascript"></script> <script src="./static/js/heatma...原创 2020-06-20 12:20:26 · 2100 阅读 · 0 评论 -
leaflet 覆盖物与点位重合获取点击的元素
再使用 leaflet-canvas-marker 加载海量点位后,继续加载polygon多边形会产生一个问题,就是polygon绘出来的遮罩物的层级是比海量点位加载的层级高的(使用L.makrer 生成的点位没有此问题)。当我们要点击遮罩物覆盖的点位时候就会点击到遮罩物,如何解决了,这里提供一个思路。1.定义一个变量clickType let clickType = "";2.在海量点位点击的方法中设置clickType的值,这样当点击覆盖物下的点位的时候就会设置clickType就发..原创 2020-06-12 19:43:22 · 1763 阅读 · 0 评论 -
leaflet 实现多种类型点位聚合,多种类型图标显示隐藏功能
使用到的点位聚合插件是leaflet.markercluster-src git 地址:https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers使用方法1.把相关css/js 引入项目文件夹后 使用import导入import "./css/screen.css"import "./css/MarkerCluster.css"import "./css/MarkerC...原创 2020-06-11 13:41:32 · 5643 阅读 · 5 评论 -
react 路由跳转带参数
1.比较常用的就是修改路由配置在path:"/xxx/:type" 这种类型 { name: 'xxxx', text: 'xx', path: '/xxxx/:type', component: xx },这种类型的主要是详情页面等不在一级显示的页面中使用。2.第二种使用query 来实现,首先引入import { Link } from 'react-router-dom'然后在需要跳转的地方添加.原创 2020-06-10 11:03:22 · 2666 阅读 · 0 评论 -
react map 循环 带条件输出
在平时开发中经常会使用map 来遍历后台的数据,在return 里面如果使用呢<ul className="box-clounm"> { warningData.poepleData.map((item,index)=>( item.id!=""? <li> <Link to={`${peopleUlr}原创 2020-06-10 10:56:09 · 1686 阅读 · 0 评论 -
react 通过scss变量动态改变样式
一般在开发中 有时候会遇见动态修改 一些其他组件的时候 这时候需要使用scss var的方法来动态改变1.在 本页面的css 定义一个var 变量$mapIndex:var(--mapPop,100) ;2.在JS /jsx里面使用 就可以改变了 document.getElementsByTagName('body')[0].style.setProperty('--mapPop',99999)...原创 2020-05-29 17:22:16 · 2927 阅读 · 1 评论 -
leaflet 加载海量点位,点击marker 查看详情功能
在开发有地图需要加载大量点位的时候,就不能使用L.marker 方法来 addTo(map) ,这样会导致地图特别卡,下面我们用一个插件Leaflet.Canvas-Markers .github地址:https://github.com/eJuke/Leaflet.Canvas-Markers 里面有详情的api调用方法。接下来我们在项目里面使用1.加载方式2种方法加载cnpm ileaflet-canvas-marker -S 或者直接下载Leaf...原创 2020-05-29 16:01:46 · 9626 阅读 · 13 评论 -
react 常用组件编写 -----图片错误处理
1.目录结构是这样的2.组件代码import React from 'react'import errorImg from './error-img.png'function ImgError (props) { function imgError(e) { let evn = e || event let img = evn.srcElement ? evn.srcElement : evn.target img.src = errorImg }..原创 2020-05-25 21:30:01 · 613 阅读 · 0 评论 -
js form表单序列化后追加额外参数(分页等)
在form 表单使用serialize()方法序列化后,在想添加自定义的参数只需要这样直接在后面拼接自己想要追加的参数即可!原创 2020-04-28 18:23:58 · 1956 阅读 · 0 评论 -
react 使用store 中储存的数据
1.文件夹目录是这样的在actions.js中导出 需要获取的数据export const SKIN = 'SKIN' // 当前主题皮肤export function createActionChangeSkin(payload) { return { type: SKIN, payload }}2.在reducers.js中定义skin方法...原创 2020-04-23 20:48:43 · 3134 阅读 · 0 评论 -
echarts 饼图默认高亮 离开后再次高亮,中心区显示选中的数据
const roundFun=()=>{ let myChart = echarts.init(document.getElementById('round')); let option=({ legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '联盟广告', '视...原创 2020-04-23 19:01:34 · 1247 阅读 · 1 评论 -
react 阻止事件冒泡
当我们在一个div 父级盒子有点击事件,子级也有点击事件时,不想点击子级事件触发父级事件就需要做阻止冒泡处理。import React, { useState} from 'react'function Model(){ const clickShowModel=(event,props)=>{ event.stopPropagation(); } ...原创 2020-03-02 20:55:14 · 1153 阅读 · 0 评论 -
react 实现收藏小星星功能 收藏,取消收藏
1.通过设置iconStatus取反来实现点击收藏,取消收藏的功能import React,{useState} from 'react'function Model(){ const [icoStatus, setIcoStatus] = useState(true) //点击收藏按钮 const iconSouCangData = (event, props) =...原创 2020-03-02 20:41:58 · 2205 阅读 · 0 评论 -
react ul li 点击哪个高亮哪个
这个功能通过比对li的下标来实现功能,通过设置isShow 比对index,来实现动态的className 渲染import React, { useState} from 'react'function Model(){ const [isShow, setIshow] = useState(0) const listStatus = (item, index) ...原创 2020-03-02 20:27:16 · 1517 阅读 · 0 评论 -
react 获取元素动态高度
react hook 可以使用useRef ()来获取到动态dom 的高度1.先引入hook useRef 方法import React, {useRef } from 'react'2.在dom上绑定这个方法 function MyModel(){ const listHeight=useRef() console.lo...原创 2020-03-02 20:06:10 · 31688 阅读 · 3 评论 -
react 子组件使用 props.history.push 无法跳转或者显示"push"underfind 问题
出现这个问题的主要原因是在父组件里面没有给子组件传history在我们的父组件里面传递一个history function MyModel(props) { return( <> <ResultCard history={props.history}></R...原创 2020-03-02 15:16:44 · 2216 阅读 · 0 评论 -
react (2) 学习记录: 事件绑定与循环
在react 中事件方法 都需要使用驼峰命名 例如: onClick,onChange等下面就使用这2种方法import React, { Component } from 'react';class Xiaojiejie extends Component{ constructor(props){ super(props) this.state={ i...原创 2019-11-21 16:25:46 · 729 阅读 · 0 评论 -
react(1) 安装
1.下载node.js2.打开文件夹,开启终端项目搭建使用 create-react-appcnpm create-react-app my-first (注意项目名称中不能包含大写)cd my-first npm start至此,一个react 项目就可以运行起来了...原创 2019-11-21 16:02:33 · 94 阅读 · 0 评论