- 博客(24)
- 收藏
- 关注
RSS订阅原创 vue中实现放大镜 (直接c就能用)
img :style="r_img" class="rightImg" src="../../../../../2023正班半课件/image/10.jpg" alt=""><img class="leftImg" src="../../../../../2023正班半课件/image/10.jpg" alt="">/* 放大的图片，通过定位将左上角定位到(0,0) *//* 层罩，通过定位将左上角定位到(0,0) *//* 右边的区域图片放大空间 *//* 原图的显示 *//* 原图的容器 */
2023-07-05 20:58:59
238
原创 关于文档流
文档流:在html中,文档流就是指代买的执行顺序,从左到右从上到下,包括在页面上显示的顺序也是一样的(块标签:从上到下) 行标签和行内块标签(从左到右)脱离文档流:当某些特定的情况下,标签可能脱离默认的排列规则,丢失它在流式布局中位置,与其他的标签发生重叠,这种现象就叫做脱离文档流。流式布局:(默认的) 一个html文件包含的所有的html标签的排列规则(块标签:从上到下) 行标签和行内块标签(从左到右)3.位置和布局不再受父元素的限制。脱离文档流的特点: 1.丢失它在流式布局中的位置。
2023-07-03 10:04:01
127
原创 react 路由切换动画
Switch 组件要设置location属性为路由信息的props.location, 保证路由跳转组件的key和CSSTransition的key一致。4, 路由组件中没有路由信息location.pathname, 需要使用withRouter导入。2, 在路由配置文件/src/router/index.js中导入动画组件。3, 在路由组件模板中,用动画组件包裹路由组件。5, 在组件的css文件中写路由切换动画过程。/* 入场动画过程 *//* 出场动画过程 */
2023-07-03 09:47:36
194
原创 react 路由监听
2, 在组件的componentWillUnmount中取消路由监听, 调用 cancle函数, 以防止重复监听,浪费性能。1, 在路由跳转的组件中使用props.history.listen() 监听路由, 得到返回值cancle。注: 全局路由监听,根组件App中没有路由信息, 需要使用高阶组件withRouter添加路由信息,然后监听。注: 局部监听只能监听此组件离开时的路由, 类似于vue中beforeRouteLeave() 路由守卫。1, 在app.js中从路由模块导入withRouter。
2023-07-02 16:07:37
1269
1
原创 react 路由6.3+hooks配置
3, 创建路由文件src/router/index.js, 导入需要路由跳转的组件, 并导出路由配置数组。2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。4, 在app.js中导入路由配置函数useRoutes和路由配置数组routes。// 路由重定向, 借助Navigate组件跳转。7, 在需要跳转的页面, 从路由模块导入工具组件 Link。6, 在函数式组件app模板中渲染路由出口。5, 在函数式组件app中创建路由出口。
2023-07-02 16:07:33
59
1
原创 React 路由6.4配置
4, 在入口文件 src/main.jsx中,从路由模块导入工具组件RouterProvider 和路由对象, 并渲染到根标签root。2, 创建路由文件src/router/index.jsx, 导入根组件和需要路由跳转的组件。// 路由重定向, 借助Navigate组件跳转。7, 在需要跳转的页面, 从路由模块导入工具组件 NavLink。5, 在app.jsx根组件中导入路由出口组件 Outlet。6, 在app.jsx根组件中渲染路由出口。8, 使用NavLink组件执行路由跳转。
2023-07-02 16:06:30
164
1
原创 在react 组件中获取DOM元素的三种方式
2, 在构造器中创建ref全局变量, 在标签中ref属性动态绑定这个全局变量, 通过全局变量的current字段调用。1, 在父组件中用ref获取子组件对象, 必须保证子组件是类组件, 函数式组件获取结果是undefined。1, 给标签设置ref属性, 通过this.refs调用 (老版本语法,将要废除)2, 父组件使用ref获取子组件对象后, 可以对子组件状态数据和函数执行调用和修改。3, 在标签ref属性绑定函数, 在函数中定义全局变量赋值, 通过全局变量调用。4, 使用hook语法查找DOM。
2023-07-02 16:03:29
678
1
原创 react 图片懒加载-----vite
官方地址: https://www.npmjs.com/package/react-lazy-load-image-component。2, 在src/assets/目录下放入懒加载占位图 placeholder.gif。3, 在需要使用懒加载的组件中导入懒加载模块和占位图(blur.css虚化样式)5, 在组件模板中给需要懒加载的图片替换成LazyLoadImage。4, 在组件rander函数中创建占位图片标签img。// 适用于vite构建的react项目。1, 下载安装懒加载模块。
2023-07-02 15:59:29
68
1
原创 webpack 构建 react项目配置代理
也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆)设置项目端口号: node_modules/react-scripts/scripts/start.js。1, 下载安装代理模块。
2023-07-02 15:58:23
152
1
原创 webpack 构建react项目配置代理
也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆)设置项目端口号: node_modules/react-scripts/scripts/start.js。1, 下载安装代理模块。
2023-07-02 15:58:06
88
1
原创 2. vite 构建 react项目配置代理
在vite.config.js中加入以下代码 (针对react,可全选替换)使用vite构建vue项目和react项目,配置代理等信息的方式是一样的。
2023-07-02 15:54:50
234
1
原创 使用 vite工具构建react项目
2, 使用vite构建项目, 选择react。3, 切换到项目根目录, 安装依赖包。4, 运行,启动vite项目。1, 安装vite构建工具。
2023-07-02 15:52:29
522
1
原创 react 图片懒加载 -webpack
img src={item.room_src} alt="这是一个图片" />2, 在src/assets/目录下放入懒加载占位图 placeholder.gif。5, 在组件模板中给需要懒加载的图片添加LazyLoad父标签。3, 在需要使用懒加载的组件中导入懒加载模块和占位图。4, 在组件rander函数中创建占位图片标签img。1, 下载安装懒加载模块。
2023-07-02 15:42:50
39
1
原创 react 元素过渡动画
2, 需要在index.js中关闭严格模式, 删除 <React.StrictMode>3, enter-active和exit-active中要写过渡结束状态才有效。注意: 1, 入场和出场的class样式要按顺序写,动画开始和结束顺序不能颠倒。3, 在需要过渡的标签外层添加CSSTranstion组件。4, 在组建的css中通过class设置入场和出场动画。1, 在react工程中下载安装过渡动画模块。2, 在需要执行过渡的组件中导入动画模块。
2023-06-29 15:08:41
81
1
原创 react 路由5.0 路由传值的三种方式
传行内式拼接传值data: { name: "吴亦凡" }}}>登录</Link>编程式路由传值})接收拼接传值三种路由传值方式对比:1.url路由传值 优点: 传值简单 缺点:取值是url编码之后的字符串, 解析麻烦2.动态路由传值 优点:取值简单 缺点:配置麻烦3.自定义对象传值 优点:取值简单 缺点:网页刷新页面数据会丢失 需要结合本地存储使用建议使用动态路由。
2023-06-29 13:45:06
450
1
原创 react 5.0路由跳转的两种方式
由于HashRouter路由组件包裹了组件APP，路由控制跳转的组件中(一般是views目录下的页面组件),props会自动添加以下。在标签中通过 <Link to="/user">跳转个人中心</Link> <br/> 跳转。location: 主要显示路由信息, 可用于路由传值。match: 主要用于路由传值, 也可展示路由信息。react路由跳转方式1: 路由标签Link跳转。history : 主要用于路由跳转和路由监听。react路由跳转方式2: 编程式导航跳转。// 导入路由跳转组件。
2023-06-29 13:26:17
916
1
原创 使用react-router 5.x 版本实现
{/* exact 精确匹配 因为每一个路由都有/ 不精确下 都会匹配主页*/}{/* 路由重定向, 使用Redirect组件实现, 要写在最后 */}(注: 哈希模式用HashRouter 历史模式用BrowserRouter)中,从路由模块导入工具组件Router ,并包裹根组件。在根组件app模板中添加路由组件,即路由出口。在需要跳转的页面, 从路由模块导入工具组件 Link。, 并从路由模块中导入工具组件Route。, 在app.js中导入路由组件。创建路由组件,配置路由, 并导出。
2023-06-29 13:10:19
124
1
原创 react webpack 创建项目
注意: 在使用 create-react-app 来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那,因为资源还是使用了 npm下载的, 我们可以换成淘宝的资源, 执行指令。1, 安装react代码行工具(脚手架), 基于webpack工具构建项目。3,启动react项目 (需要cd进入项目my-app根目录)2,创建一个react应用程序, my-app是自定义项目名。解决: npm i npm@6.4.1 -g。原因: npm版本过高或node版本过低。
2023-06-28 14:42:04
132
1
原创 uniapp 在vue3语法糖中使用vuex
创建 store文件 在store文件中创建index.js文件。在使用vuex的文件中 引入。在index.js中配置。
2023-06-27 08:48:49
428
1
原创 组件的显示与隐藏（两种方案）
方法1：$route.path 判断html部分路由配置.我们可以根据组件身上的$route获取当前的路由信息，通过路由的路径判断我们的组件是否显示或者隐藏例如：top是我们在某个页面上显示或者隐藏的导航组件如果我们的home组件和user组件需要显示我们的top组件 ，我们可以用$route.path 判断我们当前所跳转到页面，如果等于则显示top组件，否则不显示方法2：使用路由元件信息以下的vue官方文档的介绍ok下面我门看实际用法我们在配置路
2023-05-29 22:54:41
2649
1
原创 webpack安装以及基本使用
(4), 如果需要对多个js文件打包，而且还要使用webpack打包其他文件（例如css,图片文件），则必须使用webpack的配置文件进行具体的打包设置。(4)在使用了特殊的插件之后，还能打包一些框架独有的文件，例如vue的.vue文件，react的jsx文件。使用ES6模块化的代码，可以使用webpack进行打包，打包之后的js文件可以在任何环境中运行。把a.js , b.js, 和 c.js中的代码打包到一起,写入x.js中。对a.js文件打包, 默认打包在 dist/main.js文件中。
2023-05-25 12:33:31
77
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人