- 博客(36)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 React+typescript实现返回顶部效果
下面是组件部分：里面分装了三个不同速度的方法使用哪个直接调用即可import React, { Component } from "react";import "./backToTop.less";export default class BackToTop extends Component { n: number = 0 start: number = 0 time: number = 1000 count: number = 0 dis: number = 0
2021-12-10 18:46:39
621
原创 react配置路由报react-router的错误处理方案
这里的错误其实就是因为react-router-dom版本过高，然后只需要把react-router-dom的版本降低一下就可以了第一步删除以前的版本然后重新下载一下npm uninstall react-router-dom第二步下载react-router-dom的5.2.0版本即可npm install react-router-dom@5.2.0 -D第三步重新启动即可npm start...
2021-12-03 14:44:50
1722
原创 uni-app中pages.json详解
pages.jsonpages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等。pages.json 配置项列表globalStyle Object 否 设置默认页面的窗口表现pages Object Array 是 设置页面路径及窗口表现tabBar Object 否 设置底部 tab 的表现condition Object 否 启动模式配置以下是一个包含了所有配置选项的 pages.json ：{ "pages":...
2021-11-29 16:21:58
4935
原创 vueX传值的操作流程
下载脚手架：1.npm i -g @vue/cli 下载脚手架验证是否安装成功 2.vue --version创建项目1.vue create 项目名称 2.出现三个选择(下键是选择，空格是选中) 选最后一个自定义选项 Manually select features(自己配置需要的) 3.就会出现选择的 1.Choose Vue version 2.B...
2021-11-29 16:14:02
715
原创 git在公司的操作流程
这里先解释一下我用的是码云前面就不用说了每个公司做项目都有自己的仓库操作如下：第一步 克隆项目到本地，这个地址其实有名字的，但是我们一开始是用不了的，这里他给了个默认的名字origin，克隆完地址以后，后面拉取提交都可以用origin，就不用去复制网址了。git clone 地址第二步 你可以先查看一下有没有分支,如果是老项目也就不用创建了git branch 查看分支第三步 创建分支 这里是给没有新项目准备的git branch dev 创建dev分支 也可以叫主分支 里.
2021-11-29 08:37:24
558
原创 css3渐变倒三角
这是HTML <div class="sanjiao"> <div class="sanjiao-s"></div> </div>这是css代码 .sanjiao { position: relative; width: 100px; height: 100px.
2021-11-24 19:33:38
309
原创 Promise实现原理（附源码）
本篇文章主要在于探究Promise的实现原理，带领大家一步一步实现一个Promise, 不对其用法做说明，如果读者还对Promise的用法不了解，可以查看阮一峰老师的ES6 Promise教程。接下来，带你一步一步实现一个Promise1.Promise基本结构new Promise((resolve, reject) => { setTimeout(() => { resolve('FULFILLED') }, 1000)})构造函数P...
2021-09-26 16:39:28
132
原创 如何对typescript+react项目中请求接口数据的处理
1.在src下创建一个axios.d.ts的文件，并定义接口的类型// axios接口的处理import * as axios from 'axios'declare module 'axios' { interface AxiosInstance { (config: AxiosRequestConfig): Promise<any> }}2.重启项目后就可以用了...
2021-09-23 16:45:49
277
原创 typescript+react项目中如何配置api（axios）
1.首先先下载依赖npm i @types/axios -S2.在src文件夹下创建一个api的文件3.在api文件夹中创建两个.ts结尾的文件4.request.ts中的配置import axios from "axios";export const Service = axios.create({ timeout: 8000, //延迟时间 method: 'POST', headers: { "content-T..
2021-09-23 16:43:50
358
原创 React+ts完成二级联动
.tsx文件import { Component, createRef} from 'react'import './index.less'interface State { top: any ButtonList: Button[] ContentList: Content[] ButtonIndex: number}interface Button { id: string text: string}interface Content { id: str
2021-09-22 19:13:25
196
原创 JS数据转换 —— 树形结构和平铺结构的转换
树形结构和平铺结构的转换1. 前言不论是在实际的业务还是在面试中，博主都遇到了这样的一个需求。将一个树形结构的数据转换成平铺的数组，或者将平铺的数组装换成树形结构，因此在这里记录一下如何实现这种转换的思想。假设存在以下数据，其中 tree 是一个树形结构的数据，从外到内层级结构；arr 是树形结构的数组平铺，其中 pid 指在树形结构中上一层级的 id 值。const tree = [{ id: 1, name: '北京', children: [{ id: 11,.
2021-09-21 09:20:49
1053
原创 react 实现简单的拖拽
src文件夹下新建文件夹demo 然后在创建两个文件js和cssdemo.js文件代码// react实现拖拽import React from 'react'// 引入css样式import './demo.css'class Drag extends React.Component { constructor(props) { super(props); this.state = { translateX: 0,..
2021-09-16 19:14:37
234
原创 vue解决ios橡皮筋回弹
通过监听 touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 // 禁止页面滚动 var forbidScroll = function (e) { e.preventDefault(); }; // 通过 $once 来监听生命周期 beforeDestroy 钩子 this.$once("hook:beforeDestroy", () => { bod
2021-09-16 19:06:06
215
原创 ({behavior: ‘smooth‘ }) 在移动端不生效的问题解决 ios不平滑
第一步：安装这个插件npm i smoothscroll-polyfill第二步：在你需要解决问题的页面引入import smoothscroll from 'smoothscroll-polyfill';第三步：执行这个方法(就是在你用behavior:'smooth'的事件里面写入)smoothscroll.polyfill();这样就可以解决behavior: 'smooth' 在手机上不平滑的问题了...
2021-09-16 19:04:20
952
原创 JS数据转换 —— 树形结构和平铺结构的转换
1. 前言不论是在实际的业务还是在面试中，博主都遇到了这样的一个需求。将一个树形结构的数据转换成平铺的数组，或者将平铺的数组装换成树形结构，因此在这里记录一下如何实现这种转换的思想。假设存在以下数据，其中 tree 是一个树形结构的数据，从外到内层级结构；arr 是树形结构的数组平铺，其中 pid 指在树形结构中上一层级的 id 值。2. 正向-树形结构转平铺const tree = [{ id: 1, name: '北京', children: [{ ..
2021-09-16 19:00:47
1130
原创 typescript+react实现选项卡功能
1.tsx代码import { Component } from "react";import './Tab.less'interface Props {}interface user { id: string, text: string}interface content { id: string, text: string}interface State { ButtonIndex: number, ButtonArray: use
2021-09-16 18:55:56
126
原创 typescript+react实现简单的拖拽（移动端+PC端）
一、移动端1.tsx代码import { Component } from "react";import './Tab.less'interface Props {}interface user { id: string, text: string}interface content { id: string, text: string}interface State { ButtonIndex: number, ButtonArra
2021-09-16 18:53:52
137
原创 使用react-app-rewired启动react项目报错
使用react-app-rewired启动react项目报错报错内容如下：关键报错内容：The “injectBabelPlugin” helper has been deprecated as of v2.0翻译过来就是：自2.0版起，“injectbabelplugin”助手已被弃用react-app-rewired的新版本删除了injectBabelPlugin，这些方法被移动到一个名为’customize-cra’的新包中解决方法：把react-app-rewired降到
2021-09-16 09:20:51
217
原创 React中配置@
const { override, fixBabelImports, addWebpackAlias, addLessLoader, addPostcssPlugins,} = require("customize-cra");const path = require("path");module.exports = override( // 配置按需加载 fixBabelImports("import", { li.
2021-09-15 19:42:59
259
原创 React中配置反向代理
下载依赖npm i http-proxy-middleware --save -dev在src目录下新建setupProxy.js文件const { createProxyMiddleware } = require('http-proxy-middleware')module.exports = function (app) { app.use(createProxyMiddleware('/api', { target: 'http://www.ibugthree.co...
2021-09-05 20:48:12
247
原创 React中配置antd-mobile后less和px转rem失效的问题
在config-overrides.js中修改需要添加的部分const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra');module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile', style: 'css'...
2021-09-05 20:46:24
474
原创 React中配置antd-mobile
安装项目中依赖npm install antd-mobile --savenpm install react-app-rewired customize-cra --save-devpackage.json中需要修改的地方"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=js...
2021-09-05 20:43:24
137
原创 React中配置px转rem
React中配置px转rem安装依赖npm i lib-flexible --savenpm i postcss-px2rem --save主要用来暴露项目配置npm run eject！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下git add .git commit -m '自定义名'npm run eject然后打开项目中 config->webpack.config.js 进行配置在配置文件中添加如下代码
2021-09-05 20:36:26
405
原创 React中配置less
React中配置less安装lessnpm install less-loader less --save-dev查找 node_modules 下面的react-scripts/config/webpack.config.js上面两行代码放在接着ctrl+f查找这个sassModuleRegex 放在这段注释的上面const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/;...
2021-09-05 20:21:35
72
原创 React中配置redux
初始化npm install安装依赖npm i redux react-redux -S项目目录import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import {...
2021-09-05 20:06:43
99
原创 React配置路由
如果创建好文件可以直接跳过注:图片下面有代码新建文件npm install -g create-react-appcreate-react-app '项目名称'创建好文件的直接从这一步开始npm install react-router-dom react-router-config -S在scr的index.js中引入下面的import {HashRouter as Router} from 'react-router-dom'替换成然后..
2021-09-05 19:53:11
139
原创 安装react脚手架以及错误如何解决
.打开cmd命令行窗口，输入npm -version,查看当前的npm版本 这里-v是缩写的npm -v2.如果npm版本是5.2以上版本，在cmd中输入 npx create-react-app my-app，当前目录下创建一个名为my-app的工程，命令行窗口中将会显示依赖库的一些日志，看步骤4。npx create-react-app my-app 最后面是项目名称3.如果npm版本低于5.2，则全局安装create-react-app，cmd输入npm install...
2021-08-31 19:54:45
720
原创 vue脚手架插件库-swiper
1、swiper轮播库官网：https://www.swiper.com.cn/demo/index.htmlSwiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。使用swiper的时候，一定要注意new swiper的时机，最好在update生命周期里进行初始化，否则会出现数据还没请求回来就初始化了，导致轮播不生效。也可以将初始化代码写在nextTick()函数中。nextTick函数的作用：在dom更新循环结束后执行延迟回调。...
2021-08-13 15:29:37
245
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人