- 博客(155)
- 资源 (10)
- 收藏
- 关注
RSS订阅原创 react 使用表单提示Warning: You cannot set a form field before rendering a field associated with the value
Warning: You cannot set a form field before rendering a field associated with the value. 报错问题解决方案
2024-03-07 17:29:39
333
原创 JS实现定位图片二维码的坐标位置
jsQR在线地址：思路主要是：上传图片后监听 上传事件，再使用canvas绘制图片到页面上，然后使用jsQR来实现。一张图片中有一个二维码，我们想要知道二维码的位置可以通过下面的方法来实现。使用 ctx.drawImage来叠加定位 覆盖原始二维码从而实现功能。如果想要将默认的二维码换成我们动态生成的二维码则可以这样继续修改一下。ps:生成二维码图片可以使用 qrcode插件来实现。
2024-02-23 16:31:48
224
原创 业务型 编辑器组件的封装（复制即可使用）
使用需要安装 wangeditor npm i --save wangeditor。可以触发form的表单验证，无需额外在提交的时候验证是否有值进行message提示。使用便捷，无需关注内部实现和定义一堆函数，只需要传入value值 即可回显数据。
2024-02-19 16:46:12
1116
原创 Antd可编辑表格初始数据为空，单元格不能编辑的解决办法
这样即使是空值的时候我们也可以点击到，从而修改值了。给table表格增加行className。然后设置可编辑表格的行样式。
2023-11-30 11:42:51
283
1
原创 Antd Select选择器 treeSelect 选择树 解决异步数据无法设置默认值
Antd Select选择器 treeSelect 选择树 解决异步数据无法设置默认值
2022-09-29 15:46:37
2353
1
原创 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
164
原创 antd button 点击清除四周的光晕效果
button[ant-click-animating-without-extra-node]:after { border: 0 none; opacity: 0; animation:none 0 ease 0 1 normal; outline:none; &:{ outline: 0; }}
2021-09-01 18:49:47
2955
1
原创 可编辑的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
420
原创 JS切换扬声器设备
最近有做到检测音视频的功能，记录一下获取扬声器设备也是使用的navigator.mediaDevices.enumerateDevices() 方法1.获取到扬声器设备列表，代码如下 其中audiooutput 就是代表的扬声器设备。 const [audioList, setAudioList] = useState([]); //获取音频列表 const getSpeakerList = () => { navigator.mediaDevices ...
2021-07-13 14:29:32
4229
4
原创 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
2220
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
3718
原创 在react 中使用tinyMce富文本编辑器
1.加载缓慢，白屏问题。最开始使用tinyMce的时候发现第一次加载巨慢，查了一下资料后发现一句话，tinyMce在首次加载的时候会在全局查找tinyMce这个变量，如果没有找到就会请求云服务器的tinyMce资源，个人认为应该是这个原因导致的，而导致这个问题的原因是因为开始没有导入import tinyMce from 'tinymce/tinymce';，最开始只导入了import { Editor } from '@tinymce/tinymce-react';在知道这个问题后
2021-02-19 11:30:50
4643
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
4492
原创 图片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
454
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
2570
原创 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
235
原创 vue 配置通用全局变量文件
1.在项目根目录新建.eslintrc.js，在/static 下创建config.js 文件2..eslintrc.js 文件内容module.exports={ 'rules': { 'no-implicit-globals':0 //关闭不允许属于使用全局变量 }, globals:{ 'config':true //设置全局变量 /static/config.js }}3. config.js文件内容const CY={ name:'测.
2020-09-30 09:44:08
967
原创 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
3949
1
原创 ant design 时间控件清空值
有时候在使用时间组件，想要通过按钮来清空已经选择的值，可以再组件中添加一个key 来重置 <RangePicker width={230} format="YYYY-MM-DD" key={timeRest} onChange={(e, d) => {
2020-09-22 15:47:32
3122
原创 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
4438
原创 在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
3541
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
1963
原创 leaflet 覆盖物与点位重合获取点击的元素
再使用 leaflet-canvas-marker 加载海量点位后，继续加载polygon多边形会产生一个问题，就是polygon绘出来的遮罩物的层级是比海量点位加载的层级高的（使用L.makrer 生成的点位没有此问题）。当我们要点击遮罩物覆盖的点位时候就会点击到遮罩物，如何解决了，这里提供一个思路。1.定义一个变量clickType let clickType = "";2.在海量点位点击的方法中设置clickType的值，这样当点击覆盖物下的点位的时候就会设置clickType就发..
2020-06-12 19:43:22
1692
原创 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
5105
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
2575
原创 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
1645
原创 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
2767
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
9031
11
原创 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
571
JS实现 定位二维码在图片的位置
2024-02-23
tinymce.zip
2021-02-19
帆布指纹实现移动端设备唯一标志
2017-10-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人