- 博客(213)
- 收藏
- 关注
RSS订阅
原创 CSS——常用修改样式
去除input type为number时候的按钮input::-webkit-inner-spin-button { -webkit-appearance: none;}input::-webkit-outer-spin-button { -webkit-appearance: none;}修改input的placeholder ::-webkit-input-placeholder { color: #eee;}:-moz-placeholder { color: #
2022-03-30 22:03:10
823
原创 React——插件集合
animate.css——动画效果animate.cssday.js——时间格式day.jsreact-fast-marquee滚动广播效果react-fast-marqueelodash——JS工具库lodash
2022-02-27 13:21:00
1770
原创 总结实用小技巧
将两个对象相同的值进行赋值 Object.keys(this.releForm).forEach(key=>{ this.releForm[key] = res.data[key] })拷贝出一个新的let obj2 = Object.assign({}, obj);let obj3 = JSON.parse(JSON.stringify(obj))将两个数组对象融合到一起 let arr = [ {name:'
2021-11-09 00:05:21
153
原创 GIT常用指令
克隆远程仓库到本地git clone git@ip://**.git “ip”为远程仓库ip，“//**.git”为远程仓库在远程机器的路径克隆仓库到本地之后cd命令到本地仓库目录，可以对分支进行操作，“git branch”---------查看本地分支“git branch -r”---------查看远程仓库所有名称“git branch -a”-...
2019-07-24 10:46:22
236
原创 CSS模糊
backdrop-filter: blur(12px); 设置模糊下面记录了两个模糊的方法 .child{ background-color: rgba(0,0,0,0.6); backdrop-filter: blur(12px); } .child-box{ filter:blur(12px) }踩坑出现的原因当祖籍元素or父级元素 都含有模糊的属性但是子元素也要设置模糊的情况下 祖籍元素的模糊生效而子元素模糊
2022-05-26 15:10:57
3083
原创 react——使用mobx
unread.tsimport {makeObservable,observable,action} from "mobx"class unread{ @observable unreadNum:number = 0 constructor(){ makeObservable(this) } @action setUnreadNum(param:number){ this.unreadNum=param }}export
2022-05-04 15:40:27
620
原创 JS——display：none 后获取元素的高度
const calcHeight =()=>{ let divevent :any = document.getElementsByClassName("rulediv"); let arr =[] for (let i=0;i<divevent.length;i++){ divevent[i].style.cssText= `display:block;position:absolute;z-index:-1000;`; arr.push
2022-04-04 16:06:08
1070
1
原创 ReactHook——组件之间的传值
父组件传递子组件父组件传递子组件——数据引入子组件import Marqueecom from "./components/marquee";使用子组件 <Header></Header> <Marqueecom></Marqueecom> <Footer></Footer>定义一个数据 进行传递const marqueedata = [ { text: 11111,
2022-03-27 23:12:50
1342
原创 ReactHooks——react-image-webp(使用webp格式图片)
下载npm install react-image-webp --save-dev引入import Image from "react-image-webp";使用 <Image src={itemchild.imgsrc} webp={itemchild.img2src} />官方API地址
2022-03-14 20:22:37
1835
原创 ReactHooks——ant.design
安装npm install antd --save引入import { Affix, Button } from 'antd';使用 <Affix style={{ position: 'fixed', bottom: 100, right: 25 }}> <div className="backtop" onClick={()=>goBackTop()}> </div>
2022-03-11 22:27:44
172
原创 React——返回顶部
使用 const goBackTop=()=>{ document.body.scrollTop = document.documentElement.scrollTop = 0; } <div className="backtop" onClick={()=>goBackTop()}> </div>全部代码import React,{useState} from "react";import copy from "co
2022-03-11 22:22:26
2857
原创 ReactHooks——copy-to-clipboard复制功能
安装npm i copy-to-clipboard引入import copy from "copy-to-clipboard";使用const linkloca = "https://blog.csdn.net/HarryHY";const copyfn = (linkloca: string) => { copy(linkloca, { debug: true, message: "Press #{key} to copy" }); };全部代码import Rea
2022-03-11 21:37:04
872
原创 ReactHooks——useLayoutEffect
useEffect和useLayoutEffect区别useEffect和useLayoutEffect作为组件的副作用，本质上是一样的。共用一套结构来存储effect链表。整体流程上都是先在render阶段，生成effect，并将它们拼接成链表，存到fiber.updateQueue上，最终带到commit阶段被处理。他们彼此的区别只是最终的执行时机不同，一个异步一个同步，这使得useEffect不会阻塞渲染，而useLayoutEffect会阻塞渲染。useLayoutEffect可以解决更新dom
2022-03-10 23:31:49
643
原创 ReactHooks——监听窗口大小、滚动距离、滚动方向
重要代码 //获取当前窗口大小 const getWindowSize = () => ({ innerHeight: window.innerHeight, innerWidth: window.innerWidth, }); const [windowSize, setWindowSize] = useState(getWindowSize()); const handleResize = () => { setWindowSize(getWind
2022-03-10 23:21:04
2567
原创 ReactHooks——制作一个简单的瀑布流(css)
瀑布流数据export const TRAVEL_DATA = [ { classname:"animate__bounceInLeft", imgsrc: img1, }, { classname:"animate__bounceInRight", imgsrc: img2, }, { classname:"animate__bounceInUp", imgsrc: img3, }, { classname:"anim
2022-03-10 22:07:01
664
原创 ReactHooks——class添加判断
mergeClass.tsfunction mergeClass(...source:any[]){ const classes:string[]=[]; source.filter(Boolean).forEach((s)=>{ if(!s){ return; } if(typeof s==='string'){ classes.push(s); return;
2022-03-10 13:26:18
393
翻译 JS代码整洁之道
Original Repository: [ryanmcdermott/clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript)# JavaScript 风格指南 ## 目录 1. [介绍](#介绍) 2. [变量](#变量) 3. [函数](#函数) 4. [对象和数据结构](#objects-and-data-structures) 5. [类](#类) 6. [测试](#
2022-03-08 00:28:02
421
原创 ReactHooks——制作一个简单的loading
js const [loding, setloding] = useState(false); //loding const changeloding = () => { setloding(true); setTimeout(() => { setloding(false); }, 1000); }; //正常情况下请求接口 const geturl = async()=>{ try { setloding(
2022-02-28 23:22:27
373
原创 ReactHooks——react-countdown倒计时——dayjs结合react-countdown
安装npm install react-countdown --save引用import Countdown from "react-countdown";使用 <Countdown date={Cdtime} />全部代码import React, { useEffect, useState, useContext, createContext } from "react";import Countdown from "react-countdown";import d
2022-02-27 13:52:46
1119
原创 ReactHooks——animate.css
安装npm install animate.css --save引入——index.tsimport 'animate.css';//完整的import Home from "./home";import './home.less';import 'animate.css';export default Home使用<h1 className="animate__animated animate__bounce">An animated element</h1&
2022-02-27 13:14:35
377
原创 React——react-fast-marquee滚动广播效果
React Fast Marquee安装npm install react-fast-marquee --save引入import Marquee from "react-fast-marquee";使用 <Marquee pauseOnHover={true} speed={60} loop={0}> {marqueedata.map((item) => ( <span className="red">{item.
2022-02-23 20:22:58
3017
原创 ReactHooks——安装less及其配置
安装npm install --save less less-loader暴露出配置文件npm run ejectconfig文件中的webpack.config.js代码const lessRegex = /\.less$/const lessModuleRegex=/\.module\.(scss|sass)$/位置代码 { test: lessRegex, exclude: cssModuleRe
2022-02-01 12:17:27
1232
原创 ReactHooks——路由
安装react-router-domnpm install react-router-dom --save-dev 引入import { BrowserRouter as Router,Routes, Route, BrowserRouter } from "react-router-dom";使用 <Route path="/" element={<Home />} />全部代码import React from "react";import ReactDO
2022-01-21 16:05:20
669
原创 ReactHooks——使用lodash中的throttle
安装npm i --save lodash主要代码submit()为方法名字 执行了该方法improt {throttle } from 'lodash'const throttlefn = useCallback( throttle (()=>submit(),1000))点击时也从submit()改变成了throttlefn()onClick={()=>throttlefn()}下面防抖的方法也是一样...
2022-01-17 20:20:35
1555
原创 ReactHooks——useRef
使用方法 const inputValue: any = useRef(null);//声明 <input type="text" ref={inputValue} onChange={(e)=>{setqiqi(e.target.value)}} />//绑定input const gettext = () => {//获取 setqiqi(inputValue.current.value) }; const cleartext = () => {//赋
2022-01-16 01:23:42
383
原创 ReactHooks——useMemo
使用useMemo使用useMemo相当于是shouldComponentUpdate在useEffect中是组件当中的一个副作用而useMemo是判定该组件的 props 和 state 是否有变化，从而避免每次父组件render时都去重新渲染子组件。useMemo返回的的是一个值，用于避免在每次渲染时都进行高开销的计算import React, { useState, useMemo, useEffect,} from "react";const Footer = () =&
2022-01-15 18:00:22
302
原创 ReactHooks——useReducer
申明一个reducerimport React, { createContext, useReducer } from 'react';export const ColorContext = createContext({})export const ChangeText = "CHANGETEXT"const chengefn=(state:any,action:any)=>{ switch(action.type){ case 'CHANGETEXT':
2022-01-15 16:48:55
87
原创 Hooks——传递参数useContext
在同一个文件下申明和使用createContext下面的Numberdata.Provider中需要包裹着子组件value={需要传递的值}const Numberdata = createContext(0);//下面的Numberdata.Provider中需要包裹着子组件//value={需要传递的值}return( <Numberdata.Provider value={num}> <Footer /> </Numberd
2022-01-15 16:07:02
784
原创 ReactHooks——useEffect使用方法
当第二个参数为空数组相当于是执行了一个componentDidMount生命周期 在这里可以执行一些页面刚加载的事件或者请求 useEffect(()=>{ console.log(dataList); },[])当第二个参数为一个时在num进行改变时触发 相当于执行componentDidUpdate const [num, changeNum] = useState(0); //定义一个num 初始值为0 修改方法为changeNum useEffect(() =>
2022-01-11 15:29:46
654
原创 ReactHooks——useState使用方法
定义 const [num,changeNum]=useState<any>(0);//定义一个num 初始值为0 修改方法为changeNum const [dataList, getDataList] = useState({ data: [ //定义一个数组进行循环 { id: 1, name: "lili", likecolor: "yellow", }, {
2022-01-11 10:47:41
889
原创 reactHooks——创建reactHooks+ts项目
命令npx create-react-app my-app --template typescriptcreate-react-app执行这个命令需要node14以上版本 所以低版本需要去升级
2022-01-10 15:08:16
879
原创 VUE3.0——启动项目后直接打开页面
--open在package.json中这是你的启动命令 npm run start 后面添加一个–open "start": "vue-cli-service serve --open",
2022-01-06 23:09:05
1627
原创 vue3.0引入lodash
下载lodashnpm i --save lodash引入lodashimport _ from 'lodash'; const _debounce = _.debounce(confirmMsg, 5000);//引入lodash功能 const confirmMsgfn = () => {//使用lodash _debounce() }踩坑https://blog.csdn.net/HarryHY/article/details/122007234全
2021-12-18 00:32:31
5376
原创 vue3 引入lodash报错
在 shims-vue.d.ts 文件夹下添加declare module 'lodash'全部代码/* eslint-disable */declare module '*.vue' { import type { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component} declare module 'lodash'
2021-12-18 00:20:36
2861
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人