![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
weixin_44953227
这个作者很懒,什么都没留下…
展开
-
react中键盘事件无法在div上触发的问题解决
通常情况下在div上是无法聚焦触发键盘事件<div id="HelloWorld01" onKeyUp={event => { console.log(event, event.keyCode, "event"); }}> <Card bodyStyle={{ paddingTop: 14 }}> <ContractView {...detail} /> </Card><原创 2021-03-16 16:07:38 · 14381 阅读 · 0 评论 -
React 基于ant design Pro 4 实现的一个分页, 自定义页码颜色
标题目录代码样式前言这是在 Ant Design Pro 4 中基于 ant design 的 Pagination 分页组件的基础上开发的。有这么一个需求, 页码的颜色基于该页是否有差异, 没有差异就正常颜色, 有差异就显示红色, 我就在 ant design 这个分页的基础上写了一个分页框架链接Ant Design ProAnt - Design效果图分页数据结构// diffQuantity 代表该页差异数量// page 代表页码[{diffQuan原创 2020-12-18 14:59:56 · 45588 阅读 · 0 评论 -
React 在react中实现鼠标拖拽移动盒子和图片(基于Ant-Design-Pro 4实现)
主要用到函数名称归类useStatereact状态useRefreact获取refuseEffectreact初始化函数onmousedownjs鼠标按下onmousemovejs鼠标移动onmouseupjs鼠标抬起原创 2020-12-18 11:54:19 · 6071 阅读 · 2 评论 -
React | JavaScript根据索引让个别字体高亮显示
在React中使用效果图/** * 补全字体坐标 * @param {*} valArray array [{ start: 2, end: 3 }] * @param {*} originStr string "xxxxx" */const completionArray = (valArray, originStr) => { try { if (!valArray.length) throw Error(`数据类型错误, valArray不是一个数组, va原创 2020-09-27 14:45:28 · 5453 阅读 · 0 评论 -
react 响应式图片放大镜 (伸缩盒子)
放大镜效果图非响应式代码 (定宽式点这里)放大镜代码 (响应式)import React, { useEffect, useState, useMemo } from "react";/** * 配置项 * @param {*} scale integer 图片放大倍数 * @param {*} width integer 组件宽度 * @param {*} height integer 组件高度 */// 根据父级宽度生成 配置项 参数function fetMainParams原创 2020-07-24 17:42:52 · 6846 阅读 · 0 评论 -
react放大镜组件
放大镜代码import React, { useEffect, useState } from "react";/** * 配置项 * @param {*} scale integer 图片放大倍数 * @param {*} width integer 组件宽度 * @param {*} height integer 组件高度 */const PARAMS = { // 放大倍数 scale: 4, // 组件宽 width: 400, // 组件高原创 2020-07-21 16:55:15 · 7416 阅读 · 0 评论 -
React | 在react中使用Video标签进行拍照生成Base64图片
功能效果图代码点击一个按弹出一个框可以点击拍照生成Base64图片效果图上代码回到顶部import React, { PureComponent, Fragment } from 'react';import { Button, Row, Col } from 'antd'// import avatar from './avatar.png' // 背景图//视频流let trackStrem/** * 批量新增格子 * @param {onChange} fu原创 2020-06-06 11:53:41 · 7114 阅读 · 5 评论 -
在react中使用Bizcharts 仪表盘(多色)
上代码import React, { useEffect, useState } from 'react';import { Chart, Axis, Coord, Geom, Guide, Shape } from 'bizcharts';const { Html, Arc } = Guide;// 自定义Shape 部分 - 指针Shape.registerShape('point', 'pointer', { drawShape(cfg, group) { let poin原创 2020-05-20 17:56:31 · 6958 阅读 · 3 评论 -
React Hook监听页面大小
import React, { useState, useEffect } from 'react'// 函数要以use开头function useWindowSize() { const getWindowSize = () => ({ innerHeight: window.innerHeight, innerWidth: window.in...原创 2020-04-24 17:38:18 · 8118 阅读 · 2 评论