HarryHY的博客

原创 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: #

原创 React——插件集合

animate.css——动画效果animate.cssday.js——时间格式day.jsreact-fast-marquee滚动广播效果react-fast-marqueelodash——JS工具库lodash

原创 总结实用小技巧

将两个对象相同的值进行赋值 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:'

原创 GIT常用指令

克隆远程仓库到本地git clone git@ip://**.git “ip”为远程仓库ip，“//**.git”为远程仓库在远程机器的路径克隆仓库到本地之后cd命令到本地仓库目录，可以对分支进行操作，“git branch”---------查看本地分支“git branch -r”---------查看远程仓库所有名称“git branch -a”-...

原创 tailwind安装和使用

在你的项目中创建一个静态css文件做引入 我的是tailwindMain.css。我这里使用的是vite工程 所以用的是/vite版本。在main.ts中引入tailwindMain。还有其他的方法 例如 postcss。vite.config文件。

原创 pnpm安装和使用

项目 A 依赖包 B，而包 B 依赖包 C。若项目 A 直接使用包 C，就会隐式依赖 C，但未在 package.json 中声明。软链接：确保 node_modules 中的依赖严格指向声明的版本，避免间接依赖被意外使用。间接依赖的版本可能与预期不符，导致运行时错误或安全漏洞。使用rm rf 删除node包 后用pnpm安装依赖。安装完成后启动项目则可以改成pnpm来启动了。项目未显式声明但通过间接依赖引入的包。1.软链接——解决幻影依赖问题。安装成功后 查看pnpm版本。

原创 VUE3 ref 和 useTemplateRef

当父组件想要通过 ref 获取自组件里面的内容 需要自组件主动暴露出去 ——defineExpose。如果你的vue不是3.5则需要更新vue的版本 可以去看另外一个文章。使用ref方法const后面的命名需要跟页面的ref值一样。

原创 检查项目中的依赖是否有更新——npm outdated

*如果在安装的时候相互依赖的包 需要降级 则修改package里面对应的版本 重新在npm i **然后将Latest的版本复制到pakceage文件的包版本那。rmrf掉node包 npm i 再安装即可。

原创 Vue 自动导入函数和变量插件 unplugin-auto-import

【代码】Vue 自动导入函数和变量插件 unplugin-auto-import。

原创 Vue3中的computer和watch

2.reactive数据 —— ref数据能监听的话 reactive一般都可以 ref的对象类型实际是用reactive实现的。watchEffect 不需要手动传入监听的值，它会自动监听回调函数中使用到的值 数据变化时重新执行该函数。watchEffect 监听多个值，当监听的值发生变化时，自动执行回调函数。watchEffect 会立即执行一次 并在依赖的数据变化时再次执行。watch 需要手动传入监听的值，数据变化时执行回调函数。3.函数的返回值 （getter函数）通过写法2来帮助理解。

原创 git提交库常用词

原创 vue3.0的name属性插件——vite-plugin-vue-setup-extend

在pasckjson中无法注释每个插件的用处 可以在vscode中下载一个JsonComments这样可以在json中添加注释方便日后维护和查阅API。这个由于是在开发环境下的一个插件 帮助我们支持name属性 所以需要是-D。

原创 打包体积分析插件 vue3 (vite) ——rollup-plugin-visualizer，webpack——webpack-bundle-analyzer

使用打包工具在帮我门分析打包结果进而来做优化在用vite打包是通过rollup来完成的。

原创 按钮样式统一

【代码】按钮样式统一。

原创 VUE3点击展开下拉框

【代码】VUE3点击展开下拉框。

原创 vue星空背景组件

【代码】vue星空背景组件。

原创 VUE3初始化报错找不到.VUE文件模块

在env.d.ts中添加下面。

原创 通过获取favicon来测速

通过获取favicon来测速。

原创 TS——小计

TS小计

原创 JS——防止自动恢复页面位置

查看当前页面滚动恢复行为文档链接

原创 CSS模糊

backdrop-filter: blur(12px); 设置模糊下面记录了两个模糊的方法 .child{ background-color: rgba(0,0,0,0.6); backdrop-filter: blur(12px); } .child-box{ filter:blur(12px) }踩坑出现的原因当祖籍元素or父级元素 都含有模糊的属性但是子元素也要设置模糊的情况下 祖籍元素的模糊生效而子元素模糊

原创 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

原创 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

原创 ReactHook——组件之间的传值

父组件传递子组件父组件传递子组件——数据引入子组件import Marqueecom from "./components/marquee";使用子组件 <Header></Header> <Marqueecom></Marqueecom> <Footer></Footer>定义一个数据 进行传递const marqueedata = [ { text: 11111,

原创 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地址

原创 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>

原创 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

原创 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

原创 ReactHooks——useLayoutEffect

useEffect和useLayoutEffect区别useEffect和useLayoutEffect作为组件的副作用，本质上是一样的。共用一套结构来存储effect链表。整体流程上都是先在render阶段，生成effect，并将它们拼接成链表，存到fiber.updateQueue上，最终带到commit阶段被处理。他们彼此的区别只是最终的执行时机不同，一个异步一个同步，这使得useEffect不会阻塞渲染，而useLayoutEffect会阻塞渲染。useLayoutEffect可以解决更新dom

原创 ReactHooks——监听窗口大小、滚动距离、滚动方向

重要代码 //获取当前窗口大小 const getWindowSize = () => ({ innerHeight: window.innerHeight, innerWidth: window.innerWidth, }); const [windowSize, setWindowSize] = useState(getWindowSize()); const handleResize = () => { setWindowSize(getWind

原创 ReactHooks——制作一个简单的瀑布流(css)

瀑布流数据export const TRAVEL_DATA = [ { classname:"animate__bounceInLeft", imgsrc: img1, }, { classname:"animate__bounceInRight", imgsrc: img2, }, { classname:"animate__bounceInUp", imgsrc: img3, }, { classname:"anim

原创 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;

原创 js文件中需要换行

js：name:`今天 \n 很开心`css：white-space:pre-line;

翻译 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. [测试](#

原创 ReactHooks——制作一个简单的loading

js const [loding, setloding] = useState(false); //loding const changeloding = () => { setloding(true); setTimeout(() => { setloding(false); }, 1000); }; //正常情况下请求接口 const geturl = async()=>{ try { setloding(

原创 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

原创 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&

原创 ReactHooks——day.js

day.js

原创 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.

原创 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