- 博客(30)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 React 组件通信
React组件通信方式总结：1）父传子通过props单向传递数据，子组件不能直接修改；2）子传父通过回调函数实现数据传递；3）兄弟组件通过状态提升到共同父组件实现通信；4）跨层组件可使用Context机制，通过Provider提供数据，useContext获取；5）复杂应用推荐Redux集中状态管理，通过createSlice创建reducer，Provider注入store，useSelector和useDispatch操作状态。Redux Toolkit简化了Redux使用流程，支持同步/异步操作。
2025-12-17 15:29:41
208
原创 React Router v7数据模式使用指南
通过createBrowserRouter创建路由配置，支持普通/嵌套路由。使用RouterProvider绑定路由，组件内通过Outlet展示子路由，Link/NavLink实现导航。提供多种导航方式（Link/NavLink/Form/重定向/编程式导航）和传参方法（searchParams/params）。关键Hooks包括useNavigate实现编程导航，useSearchParams/useParams获取路由参数，useLocation获取当前路由信息
2025-12-17 14:47:29
314
原创 Vite项目配置别名路径@
本文介绍了如何配置Vite项目和JS配置文件，实现路径别名功能。在vite.config.js中，通过resolve.alias将"@"映射到src目录路径；在jsconfig.js中，通过compilerOptions.paths设置相同的路径映射，使开发工具能自动联想src目录下的文件。这两个配置共同实现了用"@"代替"src/"的路径简写功能，提升开发效率和代码可读性。
2025-12-15 16:15:01
103
原创 记录：Vue3中使用vue-cropperjs实现图片裁剪
Vue-Cropperjs是一个基于Cropperjs的Vue图片裁剪组件，提供简单易用的图片裁剪功能。通过npm或yarn安装后，在Vue组件中引入CSS文件和组件即可使用。支持设置宽高比(16:9等)、拖动模式、居中裁剪等参数。使用时需要将组件包裹在具有明确尺寸的容器中，并通过src属性指定要裁剪的图片源。该组件保留了Cropperjs的核心功能，同时提供了更便捷的Vue集成方式，适用于需要前端图片裁剪的各种Web应用场景。
2025-11-11 16:01:02
189
原创 记录：常用网站
本文汇总了前端开发常用的API、工具、插件及动画库资源，包括Node.js、Vue全家桶、UI组件库、微信JS-SDK等API文档；图片处理、SVG生成等实用工具；3D展示、数据可视化、PDF预览等特色插件；以及GSAP、mo.js等专业动画库和文字特效库。这些资源涵盖前端开发的各个环节，为开发者提供一站式技术解决方案，有效提升开发效率。（149字）
2025-11-05 16:52:17
141
原创 vue3 实现页面静态资源预加载
该代码实现了一个Vue3加载页面组件Loading.vue，主要功能包括：1）使用import.meta.glob预加载assets目录下的所有图片；2）通过图片加载进度显示百分比进度条；3）当所有图片加载完成后自动跳转到首页。组件包含一个线性渐变的进度条，实时显示当前加载进度百分比，加载完成后通过vue-router跳转至/index路由。代码采用<script setup>语法和TypeScript编写，使用watch监听加载进度变化，当达到100%时触发路由跳转。
2025-10-21 15:07:26
228
原创 H5标签之datalist
datalist标签：是一种用来为文本输入框提供选项列表的标签。不表示任何内容，仅作展示。可用其轻松实现模糊查询的效果，减少js的编写。可以在既定的数据源中实现模糊搜索，省去filter等js代码的编写。不用编写datalist框的样式及定位，不占用页面空间。来表示控件可选值的。标签一样 可以通过包裹。"香蕉balabala"标签的id属性进行绑定。标签的list属性和。
2023-07-10 14:49:45
784
转载 --save-dev 和--save的区别
使用 npm install 安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，分别是：npm install xxx –-save / npm i xxx -S //写入到 dependencies 对象npm install xxx –-save-dev / npm i xxx -D //写入到 devDependencies 对象devDependencies 里面的插件只用于开发环境，上线后非必需，比如：webpack，gulp等压缩打包工具、各种l
2022-01-11 17:23:41
184
原创 【vue-preview 图片预览插件】
1.安装npm i vue-preview -S2.在main.js文件中导入该组件，并挂载到Vue身上import VuePreview from 'vue-preview';Vue.use(VuePreview);3.在组件中使用它<template> <div class="thumbs"> <vue-preview :slides="thumbsList" class="imgPrev"></vue-preview&g
2021-12-22 14:52:21
1224
原创 vue-cli中配置scss
1.安装依赖cnpm i node-sass -Dcnpm i sass-loader -D2.在webpack.base.config.js中添加 //配置scss { test: /\.sass$/, loader: ['style', 'scss', 'sass'] }3.页面应用<style lang="scss" scoped></style>当前版本：“node-sass”: “^7.
2021-12-22 14:33:40
715
原创 vue使用swiper插件做垂直轮播图
1.下载安装 cnpm install swiper vue-awesome-swiper --save2.main.js：import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'import "swiper/swiper-bundle.min.css";Vue.use(VueAwesomeSwiper)//配置分页器import {Swiper as SwiperClass,Pagination} from
2021-12-22 13:55:45
2729
原创 插件 html2canvas.js和canvas2image.js实现 截图 长按保存至相册 功能
插件下载:html2canvas.jscanvas2image.jshtml:js:
2020-12-02 17:58:00
871
原创 键盘Keycode表
字母和数字键的键码值（Keycode） 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 ...
2019-09-17 15:28:42
348
原创 正反面图片翻转css3
主要用到的知识点是css3中transform 3D转换的rotateY(angle)转换方法，transition控制转换过程的动画。具体知识点可在菜鸟上查看学习。html： <div class="flip"> <div class="flip-box"> <a href="###" class="flip-item flip-ite...
2019-08-15 14:43:17
2386
原创 规定时间内无操作返回指定页面
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>规定时间内无操作返回首页</title> <style> html, body { width: 100%; height: 100%; } ...
2019-08-15 10:59:10
534
原创 css3自定义滚动条样式
首先申明：只在谷歌Google和360浏览器有效，其他浏览器不兼容。滚动条的属性有：**::-webkit-scrollbar{}** //滚动条整体部分，可以设置滚动条的整体宽，高，边框，背景颜色 等**::-webkit-scrollbar-button{}** //滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片和背景颜色颜色改变显示效果。**::-...
2019-07-18 14:56:22
262
原创 js实现省，市，区，门店，电话，地址多级联动
js实现省，市，区，门店，电话，地址多级联动比较常见的是省市区三级联动，多级联动的写法第一次写，是在三级联动的基础上改的，如有错误欢迎指出。思路很简单，父级下拉框改变的时候加载出子级元素，一层一层往下。如果上级改变，清空所有子级的选项，只留提示选项。效果有点像后台通过查询数据库实现联动的效果。如果需要提交数据，也可以通过后台来实现。初始状态图：选择之后效果图：居中的图片: Html部分...
2019-07-12 15:34:55
386
1
原创 使用Electron将Web页面转成exe可执行文件
1.下载并安装Node.js，下载连接https://nodejs.org/en/，选择合适自己电脑的版本，下载安装即可。检查是否安装成功：按下键盘win+R键，打开运行窗口，输入“cmd”，点击确定。输入 “node -v” ，回车，显示Node版本；再输入 “npm -v” ，回车，显示npm版本，即为安装成功。2.安装Electron环境。新建一个文件夹，打开文件夹，左上角...
2019-04-28 15:11:40
3738
原创 swiper控制页面切换
一般在希望用户执行某个操作之后，才允许页面切换的时候，会有这种需求。比如说要用户点击提交按钮之后，才能滑动到下一个slide。swiper有一个noSwiping选项，设为true时，可以在slide上（或其他元素）增加类名’swiper-no-swiping’，使该slide无法滑动。具体用法： <div class="swiper-container"> ...
2019-04-12 12:45:27
5130
原创 在swiper中添加css动画
最近碰到一个swiper项目，需求中最后一页有一个动画是手指从按钮的位置移动到右上角，动画只出现一次。第一反应就是css3写一个动画，使用swiper的回调函数OnSlideChangeEnd判断对应的页面addClass，但是发现add不进去，具体原因，暂时不知，代码如下：css:.share { width: 30px; height: 40px; position: abso...
2018-06-20 17:58:57
3050
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人