- 博客(36)
- 收藏
- 关注
RSS订阅原创 React+hook+Typescript实现简易验证码倒计时
仿唯品会验证码登录倒计时：tsx代码：import React, { useEffect, useRef, useState, useCallback } from 'react'import './style/VerificationCodeLogin.less'export default function VerificationCodeLogin() { const intervalRef = useRef<any>(null); const [count,
2022-05-26 16:31:48
466
原创 在JS浏览器中的兼容问题
1.滚动条到顶端的距离（滚动高度）var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;2.滚动条到左端的距离var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;3.IE9以下byClassNamefunction byClassName(obj,className){
2022-05-05 21:09:14
351
原创 react手机号码344格式分割
思路：监听事件，每次号码发生改变时触发大体的逻辑是：先比较号码变化前后的长度，判断是输入还是删除，如果是输入的话，利用正则表达式改变号码格式。html:<input type="tel" maxLength={13} placeholder='请输入手机号' onChange{this.change.bind(this)} >监听：change(ev: any) { ev.target.value = ev.target.value.replace(/\
2022-04-26 08:44:21
1867
原创 ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object
vue脚手架4.5.15配置px2rem报错：ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object是因为vue脚手架的版本太高的降一下版本，重新下载项目配置就OK了npm install -g @vue/[email protected]配置网址：https://blog.csdn.net/YanG_2859390447/article/d
2022-04-19 15:32:12
5297
1
原创 移动端页面隐藏滚动条
在PC端隐藏html右侧默认滚动条html {/*隐藏滚动条，当IE下溢出，仍然可以滚动*/-ms-overflow-style:none;/*火狐下隐藏滚动条*/scrollbar-width: none;}/*Chrome下隐藏滚动条，溢出可以透明滚动*/html::-webkit-scrollbar{width:0px}移动端隐藏滚动条ie/Edge的样式会使页面内所有滚动条隐藏。Chrom...
2022-04-11 10:43:45
2666
1
原创 React ios移动端处理安全区
1.替换项目里public目录下index.html的meta标签 <meta name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover"/>2.在项目src目录下的App.css中加入：body { /*适配苹果底部白条*/ padding-top: en
2022-03-30 19:26:55
3490
原创 React+Typescript滑块滑动对应盒子高亮
Drag.tsx部分：import React, { Component, createRef } from "react";import './drag.less';interface Props {}interface State { Num: number, MaxNum: number, SonArray: SonArrays[]}interface SonArrays { id: string, text: number}class Drag ext
2022-03-21 19:06:55
170
原创 React+Typescript实现选项卡自动轮播
About.tsx部分：import React, { Component } from "react";import "./about.less";// reduximport { connect } from "react-redux";// import { setName, setAge } from "../store/action";interface Props {}interface State { SelectIndex: number, BtnL
2022-03-17 16:15:20
117
原创 React下载项目报错：You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).
使用React脚手架创建项目，报错：解决方法：按照官网说的 如果您之前已create-react-app通过 全局安装npm install -g create-react-app我们建议您使用：npm uninstall -g create-react-app或卸载软件包yarn global remove create-react-app以确保npx始终使用最新版本。然后再使用：npx create-react-app my-app发现依然不行.
2022-03-16 18:43:40
1680
原创 CSS3 小球抛物线动画
CSS部分： <style> * { padding: 0; margin: 0; } html,body { width: 100%; height: 100%; } #ball { display: none; width:10px; hei
2022-03-11 14:30:55
1482
原创 vue阻止鼠标滚轮事件
阻止鼠标滚轮事件：mousewheel.prevent示例：<div class=“popUp” @mousewheel.prevent>
2022-03-11 09:34:12
1524
原创 javascript数组中出现次数最多的数字
// 定义一个arr的数组 var arr = [1, 2, 3, 4, 2, 2,3,4,2,4]; // 声明一个空对象 var obj = {}; //遍历数组 for (var i = 0; i < arr.length; i++) { //声明一个key接收数组中的每一个值 var key = arr[i]; //判断 如果对象中有这个属性 个数...
2021-12-16 19:33:59
1096
原创 typescript+react实现拖拽（移动端+PC端）
1.移动端 .tsx代码：import React, { Component, createRef } from "react";import './Drag.less'interface Props {}interface State {}class Drag extends Component<Props, State>{ startX: number = 0 startY: number = 0 X: number = 0...
2021-12-10 11:31:21
612
原创 React+typescript选项卡
.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: user
2021-12-10 11:26:16
461
原创 typescript+react项目中配置axios（api）
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: { "con...
2021-12-07 19:16:34
478
原创 React+TypeScript如何配置Redux+使用redux
1.安装相关依赖npm add redux react-redux @types/react-redux redux-devtools-extension2.在src目录下新建项目结构：3.store代码如下store入口文件 /store/index.tsimport { applyMiddleware, createStore } from "redux";import { composeWithDevTools } from "redux-devtools-exte.
2021-12-07 18:43:56
603
原创 React+typescript配置路由
1.创建一个react-typescript的项目，有项目的话可以直接进行配置create-react-app ts3 --template typescript2.安装配置路由需要的依赖npm install [email protected] -Snpm install react-router-config -S 3.在src的index.js中引入import {HashRouter as Router} from 'react-router-dom'4
2021-12-07 17:26:57
1607
原创 配置 路由 报错 ‘Switch‘ is not exported from ‘react-router‘.
下载指定版本依赖：npm install [email protected]
2021-12-07 17:01:59
554
原创 创建React+typtscript项目
npm create react-app my-test-app --template typescript
2021-12-07 16:59:41
298
原创 React 运行报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
这里报错postcss-pxtorem 需要 8. 我以为要使用postcss-pxtorem 8.以上的版本就去看了一下postcss-pxtorem版本最高才6.0这里降低[email protected] i [email protected]
2021-12-02 19:01:33
368
原创 Vue 中query和params的区别
前言我们在阅读这篇文章，先来了解下router和route。router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等。一、传参和接收参数1、query传参: this.$rou
2021-11-26 11:36:21
563
原创 Vue query与params传参的区别
query语法：this.$router.push({path:“地址”,query:{id:“123”}}); 这是传递参数this.$route.query.id； 这是接受参数params语法：this.$router.push({name:“地址”,params:{id:“123”}}); 这是传递参数this.$route.params.id; 这是接受参数区别：1.首先就是写法得不同，query 得写法是 用 path 来编写传参地址，而 params 得写法是用 n
2021-11-26 11:34:40
427
原创 git操作指令
git提交步骤克隆：git clone 地址进入克隆文件：cd 项目名创建分支：git branch dev-wxh创建dev：git branch dev查看分支：git branch查看修改文件：git status选中所有文件提交到缓存区：git add .提交本地仓库并添加feat描述：git commit -m "feat:修改"push到分支上：git push 地址 当前分支名切换到dev：git checkout dev把...
2021-11-23 08:57:29
157
原创 Vue 配置反向代理以及axios二次封装
1.在当前根目录下打开终端下载axios： npm install axios -S然后再mian.js里面引入import axios from 'axios'Vue.prototype.axios = axios2.在项目文件根目录新建一个vue.config.js文件 配置反向代理 解决跨域的问题module.exports = { devServer: { proxy: { "/api": { target:...
2021-11-19 18:58:19
159
原创 移动端禁止缩放页面 meta属性
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />width // 设置 viewport 的宽度，正整数/字符串 device-widthheight // 设置 viewport 的高度，正整数/字符串 device-heightinitial-scale // 设置设备宽度与.
2021-11-19 16:20:20
541
原创 vue-cli 3.0 配置px2rem 或 postcss-plugin-px2rem
px2rem 构建项目(vue-cli3.0) vue create hello-world (Manuall select features) 安装px2rem-loader(devDependencies) npm install px2rem-loader --save-dev 移动端适配解决npm包 "lib-flexible" (dependencies) npm install lib-flexible --save main.js中引入 "
2021-11-19 16:17:16
2379
原创 react+typescript 实现简易拖拽
ts代码部分:import React, { Component, createRef } from 'react'import '../css/TestDrag.less'interface Props {}interface State {}class TestDrag extends Component<Props, State>{ disX: number = 0; disY: number = 0; x: number = 0; y
2021-09-17 11:50:28
303
2
原创 React 配置 px 转 rem
1.安装：npm install lib-flexible postcss-pxtorem -S2. 引入:在项目入口文件index.js引入lib-flexibleimport 'lib-flexible';3. 修改webpack.config.js3.1 初始化配置npm run ejectv报错的话，到这个网址按照步骤操作：https://blog.csdn.net/YanG_2859390447/article/details/120044977?.
2021-09-01 19:50:51
185
原创 React 配置less
1..先下载 less less-loader：npm install less-loader less --save-dev2.查找node_modules 下面的react-scripts/config/webpack.config.js在 webpack.config.js 新增以下内容const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/;{ ...
2021-09-01 19:30:15
62
原创 解决 npm run eject 报错问题
creat-react-app npm run eject报错问题使用creat-react-app 初始化项目后，运行npm run eject会暴露出隐藏的配置文件，直接使用npm run eject命令的话会报错像这样：解决方法： create-react-app my-app 后 依次执行以下命令 git init git add . git commit -m "Saving before ejecting" ...
2021-09-01 18:48:16
484
原创 React选项卡
代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
2021-08-31 19:09:47
85
原创 React移动端拖拽
React移动端拖拽代码部分：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0...
2021-08-31 18:51:36
117
原创 Vue生命周期的十一个钩子函数
beforeCreate 属性 方法加载之前created 属性和方法加载完成 数据接口加载的时候就在 created beforeMount 组件渲染之前mounted 组件加载完成以后 获取元素就在mounted beforeUpdate 数据更新之前updated 数据更新完成beforeDestory 组件即将销毁destoryed 组件销毁完成deactivated：在被包裹组件停止使用时调用activate：是在被包裹组件被激活的状态下使用的生命周期钩子er...
2021-06-17 08:27:25
219
原创 JavaScript统计出现最多的字符和次数
第一种：varstr="aabbbcc"varobj={}for(vari=0;i<str.length;i++){varchar=str[i]if(obj[char]){obj[char]++}else{obj[char]=1} }variMax=0variMax=""for(va...
2021-06-08 17:06:19
98
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人