- 博客(159)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 mac管理及更新node版本
mac管理及更新node版本查看node版本node -v下载node版本管理模块 n sudo npm i -g n升级node至最新稳定版sudo n lts升级至最新版 sudo n latest下载指定的node版本 sudo n 版本号6.切换node版本查看所有已安装的node版本，根据上下和回车选择要使用的版本sudo n7.查看其他命令 n -h...
2022-04-08 09:05:13
1187
1
原创 前端工程化规范
第一步 安装commitizen可以局部安装npm install commitizen -D或者全局安装npm install -g commitizen，这里我推荐全局安装（可以用git cz代替git commit）。简单来说commitizen为我们提供一些cli命令比如：commitizen init、 git czhttps://github.com/commitizen/cz-cli第二步npm i lint-staged husky -Dnpm set-script prepare
2022-04-06 16:22:41
944
原创 新开窗口跨域问题
一、使用a标签 <a href={urlData} target="_blank" rel="noopener noreferrer"> anoopener </a>超链接 target="_blank" 要增加 rel=“nofollow noopener noreferrer” 来堵住钓鱼安全漏洞。如果你在链接上使用 target="_blank"属性，并且不加上rel="noopener"属性，那么你就让用户暴露在一
2022-03-27 21:16:16
4106
原创 npm库发布
npm config set registry https://registry.npmjs.org创建项目修改打包配置tsconfig.build.json{ "compilerOptions": { "outDir": "dist", // 生成目录 "module": "esnext", // 格式 "target": "es5", // 版本 "declaration": true, // 为每一个 ts 文件生成 .d
2022-03-23 00:15:04
1658
原创 git工作流
git init //初始化一个git的本地仓库git add README.md //将我的文件装上武器，准备发射git commit -m “first commit” //第一次发射，我的README.md 宝贝已经成功进入到本地仓库git remote add Ceres your_first_git_address //将第一个git address命名为Ceresgit push -u Ceres master //注意咯，我要向远端木星发射了，太远了，一定要用push，很费劲的赶脚/
2022-03-18 14:01:31
122
原创 react_redux_saga使用
创建项目npx create-react-app my-app创建 redux目录目录下分别创建目录reducers、actions、saga安装yarn add redux --saveyarn add react-reduxyarn add redux-thunkyarn add redux-sagaactionssrc\redux\actionsimport { USER } from "./index";// export const FETCH_USER_LIST =
2022-03-16 00:27:56
1405
原创 redux使用简单优化
一 目前项目使用方式：connect注入在对函数式组件可使用connect，也可使用hook是引入import { useSelector, useDispatch } from “react-redux”;import logo from './logo.svg';import './App.css';// import { connect } from "react-redux";import { useSelector, useDispatch } from "react-redux";f
2022-03-15 15:11:33
905
原创 antd选择日期自定义组件
组件这里写目录标题组件index.jsDateInfoChange.jsxDatePageChange.jsx使用组件index.jsimport React from 'react';import { Radio } from 'antd';import 'moment/locale/zh-cn';import moment from 'moment';import dayjs from 'dayjs';export { default as DatePageChange } fro.
2022-01-08 12:09:56
1249
原创 Picker 多列选择器实现省市区联动
import React, { useState, useEffect } from 'react';import { View, Picker } from '@tarojs/components';import BaseInfo from '../../services/BaseInfo';// const DEFAULT_ITEM = {// value: 0,// label: '全部',// };const AreaSelect = ({ province, ci
2021-12-23 14:36:29
1338
原创 antd Upload 自定义上传
需求由于使用antd 上传图片，在某些情况下，例如token 失效，导致上传图片错误，但是antd 组件始终会走onChange 事件导致上传路径为空情况解决办法使用自定义上传 // 自定义上传图片 const customRequest = params => { const { file, onSuccess, onError } = params; const formData = new FormData(); formData
2021-12-13 16:35:39
5250
原创 antd table无内容时修改默认显示
<Table columns={columns} dataSource={dataSource} pagination={false} locale={{ emptyText: '暂无数据' }} />
2021-11-26 16:30:23
4085
原创 react中实现拖拽排序react-dnd
import React, { useEffect, useRef, useState } from 'react';import { DndProvider } from 'react-dnd';import { Form, Card } from 'antd';import { useSelector } from 'umi';import { cloneDeep } from 'lodash';import HTML5Backend from 'react-dnd-html5-backend
2021-11-24 19:23:48
6014
2
原创 react PropTypes
Props验证使用PropTypes，React.PropTypes提供许多验证器来验证传入数据的有效性，当传入无效的数据时，JavaScript会抛出警告；为了性能考虑，React15.5.0以后React.PropTypes 和 React.createClass提取出“prop-types”库；安装prop-type：npm install --save prop-typesimport PropTypes from 'prop-types'; // ES6var PropTypes = r
2021-11-18 15:03:07
892
原创 react 拷贝上传文件
关键部分 const haoroomsbox = document.getElementById('ant-upload-drag-area-id'); haoroomsbox.addEventListener('paste', event => { const data = event.clipboardData || window.clipboardData; const items = data.items;
2021-10-22 17:29:47
425
原创 antd表格拖拽
antd表格拖拽组件DragSortableTable使用组件DragSortableTable支持合并单元格拖拽import React, { useState, useEffect } from 'react';import { Table } from 'antd';import { DndProvider, DragSource, DropTarget } from 'react-dnd';import HTML5Backend from 'react-dnd-html5-backend
2021-09-29 17:24:23
2731
2
原创 antd4 from拆分
期望一个新增页面，由多个表单构成，按钮提交统一校验思路 需要把各个form实例保存下来，按钮提交时统一触发校验父组件<div className={styles.container}> <Form.Provider onFormFinish={name => { if (name === 'form1') { .
2021-09-10 14:34:21
580
原创 vite +vue3.0项目
安装vitejs#npm 6.xnpm init vite@latest my-vue-app --template vue#npm 7+, 需要额外的双横线：npm init vite@latest my-vue-app – --template vueyarnyarn create vite my-vue-app --template vue使用 ant-design文档https://2x.antdv.com/components/overview-cn/yarn add
2021-09-07 19:56:09
266
原创 技术路线
reactReact架构umi+dva+and pro可视化react-echart地图：react-bmap跨端方案：taro移动端可视化antv f2 ，echart(包依赖大，需要解决打包问题）
2021-09-04 09:29:46
148
原创 组件，工具
组件，工具基于百度地图JavaScript GL版API封装的React组件库F2 移动端可视化方案Lodash 一个一致性、模块化、高性能的 JavaScript 实用工具库基于百度地图JavaScript GL版API封装的React组件库https://lbsyun.baidu.com/solutions/reactBmapDocF2 移动端可视化方案https://f2.antv.vision/zhLodash 一个一致性、模块化、高性能的 JavaScript 实用工具库https:/
2021-08-31 16:34:45
104
原创 ECharts for React
这里写目录标题文档安装使用文档https://git.hust.cc/echarts-for-react/安装使用echart-for-react包，他依赖于echarts包$ npm install echarts-for-react --save或$ yarn add echarts-for-react --saveyarn add echarts --save使用import React from 'react';import { PageContainer } from '@a
2021-08-30 16:37:12
1179
1
原创 移动端taro中可视化探索实践
这里写目录标题一级目录二级目录三级目录技术栈组件库初探组件库对比一级目录二级目录三级目录技术栈react ，微信小程序，taro -taro-ui组件库初探官网https://antv.vision/zh地址https://github.com/antvis/g2组件库对比1.antvis/G2. star: 10.8k ,fork:1.2k...
2021-08-23 18:09:01
1116
3
原创 定时任务，按需开启下载
思路1、下载列表定时请求数据，首次加载组件，例如登录，开启定时任务请求2、当任务已下载执行完成后，清除定时任务3、当触发导出表格任务时，再次开启定时任务也就是在任务下载中的时候，才去执行请求调用，其他情况下避免了不必要的请求modelimport { message } from 'antd';import DownloadTasksApi from '@/services/DownloadTasks.js';import moment from 'moment';import qs f
2021-08-20 21:27:30
366
原创 小程序树展示
import React, { useState, useEffect } from 'react';import { useRouter } from '@tarojs/taro';import { View, Text, Image } from '@tarojs/components';import Customer from '../../services/customerProfileList';import starIc from '../../assets/star.png';im.
2021-08-18 16:58:24
618
原创 【微信小程序】滑动手势处理
import React, { useState } from 'react';import { View } from '@tarojs/components';import { useDidShow } from '@tarojs/taro';const PageTouch = ({ children, handlePreviousPage, handleNextPage }) => { const [touchStart, setTouchStart] = useState([0
2021-08-16 18:00:15
2507
原创 react配置less
一 安装npm install --save less less-loader或yarn add --save less less-loader二 配置使用npm 或者yarn 去运行 它，然后后续操作点击Y, 此操作是不可逆的 npm eject或者 yarn eject之后会出现webpack 配置， 打开你的 package.json 里面有一个三 打开配置文件 webpack.config.js修改// const cssRegex = /\.css$/;//修改前c
2021-08-15 18:55:22
102
原创 对按钮进行防抖处理
import { debounce } from '@/utils/utils'; <Button style={{ marginLeft: 10 }} onClick={debounce(() => { const url = DownloadTasks?.DOWNLOADTASKS?.clientexp
2021-08-14 15:58:20
3916
原创 文件下载，post导出文件
import { saveAs } from 'file-saver'; const getBlob = (url,data) => { return new Promise(resolve => { const xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.responseType =
2021-08-10 23:18:59
241
原创 2021-08-07
import React from 'react'import "./index.css";const getTime = () => { let dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours(); //获取时 var m = dt.getMinutes(); //获取
2021-08-07 13:45:22
70
原创 react组件通信
这里写目录标题子组件获取父组件父组件获取子组件类组件中父组件获取子组件子组件获取父组件可通过props接收<ChildList parentRef={parentRef} name={name}></ChildList>父组件获取子组件useRef将ref绑定到某个子组件标签上，用以获取整个子组件的方法和参数useImperativeHandle: 可以自定义暴露给父组件的方法或者变量父组件import React, { useState, useRef } fro
2021-08-07 11:46:48
117
原创 获取一段时间
// 根据type获取一段时间export function getDateTitle(start_date, end_date, type) { const title = []; start_date = start_date.format('YYYY-MM-DD'); end_date = end_date.format('YYYY-MM-DD'); const interval = moment(end_date).diff(start_date, 'days');
2021-07-28 10:43:18
108
原创 时间格式问题
moment.js的使用方法和日期格式化介绍import moment from 'moment'; start_date: moment().date(1), end_date: moment(), // subtract() 时间减 // start_dt_week: moment().subtract(4, 'weeks'),//当前时间的前4个星期时间 start_dt_week: moment().startOf('month'),//当前月份开始第一天
2021-07-27 16:54:53
156
原创 2021-07-26js计算数组中某个元素重复出现的个数
const list = [ { creator_id: '156', operation_group: '经营一组', work_logs: [ { time: '2021-07-01', num.
2021-07-26 12:37:09
240
原创 antd 表格合计栏
import React, { useEffect, useState } from 'react';import { PageContainer } from '@ant-design/pro-layout';import { Form, Input, Button, Card, Table } from 'antd';/** * 单元格合并处理 * @param text 当前单元格的值 * @param data 当前分页所有数据 * @param key 当前列的dataIn.
2021-07-24 11:09:49
5209
2
原创 json去重
/** * json去重 * @param {*} arr 是要进行去重的json串 * @param {*} attribute 是针对json串中哪个属性进行去重 * @returns */ function unique(arr, attribute) { var new_arr = []; var json_arr = []; ...
2021-07-11 21:15:03
322
原创 联系人电话校验
const actualPhones = contactAdd?.contact_phone?.filter(item => !!item); const uniquePhones = Array.from(new Set(actualPhones)); if (actualPhones?.length !== uniquePhones?.length) { message.error('您填写了重复的联系电话');..
2021-07-05 09:53:56
324
原创 antd下来组件支持多条件检索
直接上代码import React, { useEffect, useState } from 'react';import { Select } from 'antd';import Resource from '@/services/Resource';const Option = Select.Option;export default props => { const [creatorList, setCreatorList] = useState([]); us
2021-07-01 17:41:03
527
原创 react 常用hooks
这里写目录标题react hooksEffect Hookahooks自定义hooks使用自定义 Hookreact hooksHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。import React, { useMemo ,useState,useEffect} from 'react'; const [name, setName] = useState('');Effect Hook可以让你在函
2021-07-01 10:47:40
662
原创 antd table表格可展开单元格按需展开
<Table {...tableProps} scroll={{ x: 1600, y: 420 }} columns={columns} dataSource={tableData} pagination={pagination} ...
2021-06-16 12:20:12
1811
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人