爱健身_程序猿-CSDN博客

1 创建React-APP通过官方的create-react-app，找个喜欢的目录，执行：npx create-react-app app-name稍等片刻即可完成安装。安装完成后，可以使用npm或者yarn启动项目。或者直接在vscode中打开项目，执行start命令启动项目。项目文件结构如下图：2 精简项目2.1删除不用的文件删除后目录如下：2.2简化代码逐个修改以下文件：src/App.js代码简化如下：import React from '...

2022-03-12 11:31:23 3358

原创 react国际化

此篇文章是用i18next库来react的国际化。一、安装依赖总共需要安装三个：i18next，i18next-browser-languagedetector，react-i18next二、初始化和语言文件在src下新建目录：locale初始化：index.js。import i18n from 'i18next';import { initReactI18next } from 'react-i18next';imp...

2021-12-20 15:42:49 590

原创 antd Tabs组件自定义头部

antd的Tabs组件，用renderTabBar自定义TabBar。直接上代码：import React, { Fragment, useEffect, useState, useRef } from 'react'import styles from './style.module.scss'import classNames from 'classnames/bind'import { Tabs, Collapse } from 'antd';const { TabPane } =

2021-11-04 12:10:12 6448

原创文字跑马灯

上下滚动，当前内容文字超过屏幕宽度时，会把当前文字向左移动，看完后，再向下滚动到下一条文字。直接上代码：import React, { useImperativeHandle, useRef, useState, useEffect } from "react";import { useMount } from "ahooks";import styles from './style.module.scss'import classNames from 'classnames/bind'

2021-11-03 10:54:19 203

原创文字显示样式总结

一、一行显示，多出文字省略：overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

2021-11-01 12:31:25 101

原创 react-vite-一键换肤

使用CSS变量兼容性做换肤。仅需安装插件：css-vars-ponyfill一、新建js文件，用于存放css变量目录结构直接上图：// 深色const darkTheme = { "--main-bgc": "#1A1B1D", "--main-font-c": "#B1B1B1"};export default darkTheme注：1.变量名前要的“--”不能去掉2.light.js内容和dark.js一样，颜色按自己需要的写即可3.需要几套皮.

2021-10-30 11:46:02 874

原创背景图自适应屏幕宽度，

直接上代码： <div class="img-block"> <div class="right"> test </div> </div> .img-block{ position: relative; width: 100%; background: url("your img url") center center no-repeat; background-size: 100

2021-09-18 10:30:50 82

原创图片剪切工具Jcrop在JavaScript中使用

最近接手了一个JavaScript，html，css开发的项目，需要做头像上传的功能，需要用户在页面截取图片。找了相关资料后决定用Jcrop。在使用过程中，发先网上的例子没法直接拿过来用，然后官方文档又不详细，这里记录一下使用方法。 GitHub：https://github.com/tapmodo/Jcrop一、使用1.HTMl引用以上两个文件即可，文件可从GitHub下载 <link rel="stylesheet" href="css/jcrop.css...

2021-02-05 11:22:55 379

原创 react antd table组件使用笔记

前端工作中选择了antd 的table组件，做一下笔记。一、安装antd使用 npm 或 yarn 安装$ npm install antd --save$ yarn add antd二、引用import { Table } from 'antd';const { Column } = Table;此次使用的是JSX 风格的 API，这个只是一个描述columns的语法糖，不能用其他组件去包裹Column和ColumnGroup。三、个人使用笔...

2020-11-04 12:08:40 2513

原创日期选择方法总结原生js

日期选择方法总结做项目的时候，经常碰到需要根据不同时间段来查询结果的需求，总结了一下当前用到的各个时间段，起始时间和结束时间方法，话不多说，直接上代码：一.获取对应时区的时间getTimeZoneE8(i, timeInt) { if (typeof i !== 'number') return; let d = new Date(timeInt); let len = d.getTime(); let offset = d.getTimezoneOffset

2020-10-23 10:21:55 456

原创 typeof 和 instanceof 区别

JavaScript中 typeof 和 instanceof 区别这属于js基础知识，正因为太基础，所以很容易被忽略，导致项目中随处可以见的滥用。一、typeoftypeof 其实就是判断参数是什么类型的实例，就一个参数，用例：typeof a。返回值："number"、"string"、"boolean"、"object"、"function" 、"undefined"。typeof 12; // numbertypeof 'gym'; // stringtypeof !!’0.

2020-09-17 12:11:24 165

原创 ajax跨域后台解决方式，以及前后台分离后session不共用的解决办法

现在做的项目是前后台分离，并且前台后台之间还有个中间层，前台是混合APP，ajax请求到中间层，中间层再http请求后台。对后台没有任何修改。ajax跨域和跨域后session不一致一起解决。亲测有效！一、ajax跨域请求Java后台解决方式，请求端无需任何修改。1.添加jar包：cors-filter-1.7.jar, java-property-utils-1.9.jar...

2018-07-07 11:23:45 1522

原创 win10下SVN图标不显示解决办法

---------------------------------方案一-------------------------------出现原因：SVN的图标的排位顺序排在下面去了，导致其它图标占用了它的位置，也就是需要把Tortoise的位置提到上面来。解决办法：①win+R，输入regedit进入注册表②ctrl+f搜索ShellIconOverlayIdentifiers（

2018-01-08 09:52:12 298

原创浏览器拦截新窗口打开的问题

移动端打开新窗口:Chrome浏览器可以正常打开，iPhone自带Safari浏览器被拦截。在网上找了资料，还是没有得到解决。最终经过自己尝试，新窗口不再被拦截了，解决方式如下：1.ajax中的async:true,改为：async:false。2.然后直接用window.open(URL,"_blank")打开即可。虽然达到了效果，可是道不出个所以然。如果有大佬看到，麻烦告知，感

2017-12-02 14:47:06 2237

转载鼠标悬停旋转的图标按钮特效（纯CSS）

效果图如下：CSS如下：@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdE

2017-12-01 11:44:45 2435

转载动态给option设置selected后，select下拉框显示不正确，selected=“selected”的option

如上图，设置了selected的option对应值为ef，但是下拉框值是cccccc。//错误代码，$("#selectId option").removeAttr("select");$("#selectId option[value='01']").attr("selected",true);//正确代码$("#selectId option").porp('selected',

2017-11-30 15:22:55 7114 1

转载用纯CSS实现的箭头

用CSS即可绘制出各种箭头，无需裁剪图片，甚至没有用到CSS3的东西。对浏览器支持良好。基本原理原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解：一个梯形当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形；#demo11 { border: 10px solid #000; border-left-

2017-10-12 12:42:09 286

转载 jQuery获取Select选择的Text和 Value(转)

jQuery获取Select选择的Text和Value:语法解释：1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text

2017-10-12 12:16:13 232

qq_40595166的博客

原创 reat图片引用统一管理

原创 react项目搭建