- 博客(256)
- 资源 (20)
- 收藏
- 关注
RSS订阅原创 react移动端项目使用px2rem适配和antd-mobile按需加载的webpack
config-overrides通过react脚手架[create-react-app]创建的项目，如果需要在项目中配置一些webpack配置，需要在根目录下新建一个名称为config-overrides.js的文件。1、引入react-app-rewired插件 react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置2、安装插件npm install react-app-rewired customize-cra react-app-r
2022-03-01 17:47:33
1741
6
原创 三级面包屑的页面跳转到二级面包屑页面时，报错：Rendered fewer hooks than expected.
页面A，属于面包屑的第三级。页面A内点击链接跳转到页面B，页面B属于面包屑的第二级。此时出现报错提示：Rendered fewer hooks than expected. This may be caused by an accidental early return statement.原因是由于我在app.jsx中自定义了面包屑的跳转方法，内部有hooks代码最后解决办法是，判断了当前路由，只有特定路由内才有hooks...
2022-01-21 11:27:07
2476
原创 antd protable
1、想要实现外部传递进来的参数，每次参数变化，重新请求接口 useEffect(async () => { if (props?.values?.orgCode) { if (actionRef.current) { actionRef.current.reload(); } } }, [props?.values?.orgCode, props?.values?.busiPolicyCode]); <P
2022-01-17 17:43:25
7608
原创 react antd protable内的Input输入框每次输入失去焦点
最后发现是我将rowKey={RndNum}；RndNum是一个函数// 获取一组十位数的随机数function RndNum() { var rnd = ''; for (var i = 0; i < 10; i++) rnd += Math.floor(Math.random() * 10); return rnd;}正是因为这个原因，导致我的输入框每次输入一个字符，就会失去焦点。解决办法：rowKey="key"，rowKey内直接使用值，而不是传入一个函数.
2021-12-27 10:39:34
2677
原创 antd-design-pro实现多页签，切换页签保留缓存，keep-alive
感谢该大佬提供的组件：GitHub - CJY0208/react-activation: Hack <KeepAlive /> for Reactreact 里 keep-alive 的实现目前是黑科技，会有些问题使用过程中遇到问题的话，可以优先看这儿https://github.com/CJY0208/react-activation/blob/master/README_CN.md#breaking-change-%E7%94%B1%E5%AE%9E%E7%8E%B0%E5%.
2021-12-21 14:59:26
9557
3
原创 Ant Design Pro从0-1创建一个项目
创建$ yarn create umi my-appSelect the boilerplate type: 选择 Ant Design Pro❯ ant-design-proWhich language do you want to use? 选择你使用的语言❯ TypeScript JavaScript$ cd my-app$ yarn$ yarn start # 打开浏览器访问 http://localhost:8000移除语言国际化 yarn run i18n-re
2021-11-16 11:31:52
4168
1
原创 uni-app导航定位
1、点击图标，跳转到选择地址页面<view style="display: flex;align-items: center;" @tap='chooseLocation'></view>chooseLocation(){ uni.chooseLocation({ latitude:this.detail.lat, longitude:this.detail.lng, success:(res)=> { console.log(res);
2021-11-06 16:30:50
2390
原创 uni-app拖拽排序
<template> <view class='zhuti'> <movable-area class="movable-area" :style='"display:"+movableViewInfo.showClass+"; height:"+pageInfo.scrollHeight+"%"'> <movable-view class='row list-row movable-row' out-of-bounds='true' dam...
2021-10-17 21:04:11
4120
4
原创 vue实现下载图片
<template> <div class="dialog_content_dowload" @click="handleDowload(dialogTableData.aliAppQrPic)">下载</div></template><script> export default { methods: { handleDowload(link) { le...
2021-10-08 15:01:29
471
原创 uni-app点击按钮防抖，防重复操作
在根目录下新建common文件并创建common.js文件，代码如下// 防止处理多次点击function noMultipleClicks(methods, info) { // methods是需要点击后需要执行的函数， info是点击需要传的参数 let that = this; if (that.noClick) { // 第一次点击 that.noClick= false; if(info && inf
2021-09-28 19:41:49
2730
12
原创 uniapp下拉刷新
scroll-view下拉刷新<template> <scroll-view scroll-y="true" style="height: 100%;" lower-threshold = 100 @scrolltolower='onScrollToLower' :refresher-enabled='true' refresher-background='#F6F6FC' :refresher-triggered='isRefreshing' @refresherpulling='
2021-09-27 10:41:31
1286
原创 vue插入iframe
方法一：通过document.querySelector嵌入<template> <div id="iframeContainer"> <iframe class="iframe" :src="src" width="100%" frameborder="0" scrolling="auto" :style="{height:'calc(100vh - 130px)'}"></iframe> </div>&
2021-09-24 16:09:45
2861
原创 浏览器审查hover元素
1、在浏览器中f12打开开发者工具，鼠标移入到元素上 显示出来tooltip框后，使用ctrl+shift+c快捷键打开小箭头就可以看到tooltip框样式2、开发者工具中有一个Sources，里面有一个暂停功能，打开开发者工具后，先把tooltip框展示出来，再用快捷键F8暂停，tooltip框就不会消失了，可以一直查看样式转载自：https://www.cnblogs.com/my466879168/p/12769014.html...
2021-09-09 19:36:36
2999
原创 uniapp+uview upload实现上传，action为#时，自己处理
upload文件<template> <view> <view class="multiImgContainer"> <view v-for="(item, index) in lists" :key="index"> <view class="showImageContainer" v-if="item.filePath || item.url"> <u-image width="85px" height
2021-09-09 13:50:15
6011
原创 uniapp兼容微信小程序和支付宝小程序遇见的坑
报错：easycom组件冲突：[@/components/uni-icons/uni-icons.vue,@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue]只能小写，我目前遇到这个问题，直接跳过，然后在支付宝端打开项目就行filesC:\Users\Administrator\Desktop\scanorderfood change constantly, compiling service has not started ...
2021-09-02 10:22:13
16760
原创 unicloud.dcloud
"bsonType":"string"输入框"bsonType": "timestamp",日期选择器"bsonType": "int", "title": "证件类型", "description": "类型：0 请选择证件类型 1 工商营业执照 2 食品流通许可证 3 食品生产许可证 4 餐饮服务许可证 5 食品经营许可证", "enum": [{ "value": 0, ...
2021-08-24 18:10:43
1261
原创 uni-app遇到的一些问题
进入页面，数据打印出来了，但是页面没有渲染出来方法一：页面代码添加v-if='updateNewData'<view class="item" v-for="(item1, index1) in rightScroll[index]" :key="index1" v-if='updateNewData'></view>定义updateNewData: true,不然页面进来不会显示data() { return { updateNewData: t
2021-08-23 15:26:17
3804
3
原创 vue-electron相关BUG处理
项目参考了：https://github.com/percy507/hola文章参考了：https://blog.csdn.net/aeoliancrazy/article/details/117419918问题一：GET http://localhost:9080/__webpack_hmr 404 (Not Found)修改.electron-vue文件夹中的dev-runner.js文件：注释掉hot将原来的 app.use(hotMiddleware)注释打开const se
2021-08-17 14:47:32
1978
原创 antd vue的使用
menu<template> <div style="width: 256px"> <a-button type="primary" style="margin-bottom: 16px;margin-top: 16px;" @click="toggleCollapsed"> <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" /> </a-button>
2021-08-16 13:28:14
1010
原创 react+node+websocket实现简单的双向沟通
一、node创建服务器新建一个文件夹nodeServermkdir nodeServercd nodeServernpm init然后一路回车 安装 express 框架npm install express --save启动项目进入项目的根目录，建立一个 index.js 文件，并加入如下代码var express = require('express');var app = express();app.get('/', function(res, rep) {
2021-08-10 17:14:03
631
原创 React useEffect中异步更新数据，但是获取的值不是最新的（自定义更改umi中的面包屑）
代码// 方法一：添加了一个无用的状态量。每次更改了值，走一次这里const [_f, setF] = useState(0);// 方法二：需要在开头引入import { useUpdate } from 'ahooks';// const update = useUpdate();useEffect(() => { if (themeName) { const { breadcrumb: { routes }, } = value; for
2021-07-06 13:10:11
1865
原创 dva学习记录
定义这个参数const LinkParams = { namespace: 'linkParams', state: { passLinkParams: {}, }, reducers: { changeParams(state, { payload:params }) { return { ...state, passLinkParams: params }; }, },};export defa
2021-07-06 11:47:23
147
原创 js递归获取树节点的层级结构
因为有个地方使用的antd的Cascader，Cascader的数据结构为树结构，默认值为数组形式，所以我需要对自己的数据进行整理。将我的数组整理成类似如下的结构，family是我自己添加的，为了方便后面遍历的时候，能够更好的获取父节点const options = [ { value: 'zhejiang2', label: 'Zhejiang2', family:'top', children: [ { value: 'han..
2021-07-02 13:20:17
3814
原创 react-beautiful-dnd实现拖拽排序+合并+拆分的功能(完整代码）
import './App.css';import React, { useState, useCallback, memo, useMemo, useRef, Component } from 'react';import { DndProvider, useDrag, useDrop } from 'react-dnd';import { HTML5Backend } from 'react-dnd-html5-backend'import update from 'immutabili
2021-06-06 23:05:26
1873
原创 react-dnd拖拽排序
App.jsimport './App.css';import React, { useState, useCallback, memo, useMemo, useRef, Component } from 'react';import { DndProvider, useDrag, useDrop } from 'react-dnd';import { HTML5Backend } from 'react-dnd-html5-backend'import update from 'immut
2021-06-05 15:58:45
836
原创 react-color一个不错的颜色选择组件
一个不错的选择颜色组件import { SketchPicker } from 'react-color';颜色转化的完整代码function hextoGamma(hex){ var gamma = 0.45; var gammaCorrection = 1 / gamma; var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex); r = parseI
2021-05-18 12:38:44
2971
原创 一些命令
使用Mac终端或者iTerm2不小心进入quote>路径如何退出？在zsh工具中输入'+回车就会进入quote>，使用Ctrl+c即可退出。
2021-04-14 17:22:42
99
原创 antd form表单验证，表单初始值
form.setFieldsValue(initialValues);实现设置初始默认值form.validateFields()实现对输入的值进行验证完整代码如下：import React, { useState, useEffect } from 'react';import { Button, Form, Modal, Input, } from 'antd';import _ from 'lodash';import { connect, useIntl } from 'umi';
2021-04-07 11:47:09
6295
原创 umijs多语言方式
1.使用<FormattedMessage id='……'/>，umijs不推荐使用，不详细介绍2.函数的场合，使用useIntlimport { FormattedMessage, useIntl } from 'umi';function value() { const intl = useIntl(); return ( <div title={intl.formatMessage({ id: title })} />}在使用到的地方主要用如下两
2021-03-26 16:27:11
2227
原创 webpack从0-1打包运行项目
通过npx create-react-app my-app生成项目my-app，并通过cd定位到该项目下cd到项目目录下,执行如下代码,这个是安装到系统下得，供往后可以以webpack命令打包cd my-appnpm i webpack webpack-cli -g报错：-bash: cnpm: command not found安装cnpmnpm install cnpm -g --registry=https://registry.npm.taobao.org报错.
2021-03-15 23:20:05
1966
3
原创 全国省市json文件，省市区json文件
省市json文件[ { "label":"北京", "level":"1", "code":"1100", "children":[ { "label":"北京", "level":"1", "code":"1100" } ] }, { "label":"天津", "level":"1", "
2021-03-04 11:05:58
12025
8
原创 react-native-document-picker一个适合react native打开本地文件，上传文件的组件；也可直接用react-native-fetch-blob
一些配置介绍import DocumentPicker from 'react-native-document-picker';const FileTypes = { All: DocumentPicker.types.allFiles,// All document types, on Android this is */*, on iOS is public.content (note that some binary and archive types do not inherit
2021-02-26 15:51:11
3471
原创 antd modal拖拽，自定义modal拖拽react-draggable
"antd":"^4.9.4"时，可以直接使用如下代码：import React, { Component } from "react";import { Modal, Button } from 'antd';import Draggable from 'react-draggable';class Drag extends Component { constructor(props) { super(props); this.state = { visibl.
2021-02-20 10:00:02
2967
原创 react和react native中获取两个日期之间相隔多少天的不同写法
react中直接通过import moment from "moment"然后按照如下代码即可实现let startDate = moment("2020-5-20"); let endDate = moment(new Date()) let workDayCount = endDate.diff(startDate,'days')react native中var msDiff = new Date().getTime() - new Date("May 2
2021-02-19 14:01:21
1585
react-antd实现一个后台管理系统
2018-12-20
react结合three.js实现3D模型
2019-01-07
react-native-video视频播放功能
2019-04-29
几百个unity常用脚本word文档详细讲解介绍
2018-12-28
react表单密码验证
2019-04-29
前端有什么合适的副业推荐
2023-02-08
今年上海前端招聘需求多不多？
2022-08-26
TA创建的收藏夹 TA关注的收藏夹
TA关注的人