- 博客(19)
- 资源 (1)
- 收藏
- 关注
原创 react项目搭建
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
vite-react-demo.zip
2021-12-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人