waillyer-CSDN博客

原创 taro跳转页面传参数

【代码】taro跳转页面传参数。

2023-05-10 13:52:11 785 2

原创 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 1126 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 913

原创新开窗口跨域问题

一、使用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 3647

原创 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 1538

原创 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 97

原创 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 1368

原创 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 875

原创 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 1174

原创 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 1226

原创 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 5092

原创 antd table无内容时修改默认显示

2021-11-26 16:30:23 3783

原创 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 5845 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 860

原创 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 388

原创 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 2674 2

原创 antd4 from拆分

期望一个新增页面，由多个表单构成，按钮提交统一校验思路需要把各个form实例保存下来，按钮提交时统一触发校验父组件<div className={styles.container}> <Form.Provider onFormFinish={name => { if (name === 'form1') { .

2021-09-10 14:34:21 496

原创 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 220

原创技术路线

reactReact架构umi+dva+and pro可视化react-echart地图：react-bmap跨端方案：taro移动端可视化antv f2 ，echart(包依赖大，需要解决打包问题）

2021-09-04 09:29:46 120

原创组件，工具

组件，工具基于百度地图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 82

原创 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 1106 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 1019 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 315

原创小程序树展示

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 547

原创【微信小程序】滑动手势处理

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 2350

原创 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 85

原创对按钮进行防抖处理

import { debounce } from '@/utils/utils'; <Button style={{ marginLeft: 10 }} onClick={debounce(() => { const url = DownloadTasks?.DOWNLOADTASKS?.clientexp

2021-08-14 15:58:20 3809

原创文件下载，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 191

原创 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 50

原创 react组件通信

这里写目录标题子组件获取父组件父组件获取子组件类组件中父组件获取子组件子组件获取父组件可通过props接收<ChildList parentRef={parentRef} name={name}></ChildList>父组件获取子组件useRef将ref绑定到某个子组件标签上，用以获取整个子组件的方法和参数useImperativeHandle: 可以自定义暴露给父组件的方法或者变量父组件import React, { useState, useRef } fro

2021-08-07 11:46:48 98

原创获取一段时间

// 根据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 82

原创时间格式问题

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 121

原创 2021-07-26js计算数组中某个元素重复出现的个数

const list = [ { creator_id: '156', operation_group: '经营一组', work_logs: [ { time: '2021-07-01', num.

2021-07-26 12:37:09 205

原创 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 4846 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 295

原创联系人电话校验

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 283

原创 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 456

原创 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 612