- 博客(28)
- 收藏
- 关注
原创 使用new Set优化双重循环
需求背景:在一个下拉框和一个table中,如果table中已经存在了,则下拉框中的数据需要被选中或者禁用,此时下拉框中的数据就必须多一个参数checked:true or false来判定是否被选中。第一种方法一直超过1000ms,第二种方法一直未超过20ms,可见其效率。
2024-05-13 17:50:10
212
原创 react二次封装input
子组件主动继承来自input的原生属性,将其给props,让父组件也能传参对应的input的原生属性,做到不需要额外再写一次input的原生属性,只需要写额外传参即可。
2024-02-08 09:53:12
385
原创 React封装触底加载,不使用第三方插件
3、较以往的触底加载有一个比较大的区别:避免了触底后多次pageIndex进行增加,需要使用额外的参数进行控制,本次的逻辑采用监听父盒子的可滚动高度来进行pageIndex的增加,减少额外参数的使用。
2023-12-08 18:53:54
202
原创 vscode 设置只格式化新增修改的代码
2、在 save mode 中选择最后一种,但是前提是该项目是存在了git仓库的,且vscode能识别到代码是否修改,否则将格式化整个文件。3、该设置用于二次开发较为合适,当自己习惯的代码格式化和上一位的不同时,用该方法格式化既不会影响以前的代码,自己新增代码也能保持自己的格式。1、首先设置为自动保存格式代码。
2023-07-30 13:41:29
766
4
原创 React路由懒加载
需要引入:BrowserRouter、useRoutes、lazy、 Suspense。router文件夹下的index.tsx。使用的是history路由模式。
2023-03-04 15:03:25
236
原创 vue前端处理跨域问题
代码解释:/server 在请求的时候链接会变成 http://localhost:1021/ 这一串代码,下面是调用的时候,只需要写/server开头即可,后面的api等路径原封不动接下去就行。在 vue.config.js 中写入代码。
2023-01-27 17:35:16
248
原创 vite创建vue保姆级教程
在正式初始化前需要安装node环境。④npm install 安装依赖。⑤npm run dev 运行项目。②选择配置的安装选项。③cd 你的项目名字。
2023-01-27 17:18:53
88
原创 vue导航守卫
1、在某些页面中,没有登录的时候也能访问一些页面,但是一旦使用了某些功能后,就会让用户登录;或者访问页面的时候必须登录的情况下,就自动跳转到登录页进行登录。4、亦可在if-else中设置一些逻辑处理,比如权限管理,进行角色划分,某些角色可以访问该页面,某些角色不能访问该页面等效果。设置白名单在没有登录的时候也能访问,其它页面则需要登录才能访问。
2023-01-20 11:53:18
190
原创 vue引入axios并封装
将http请求放在一个js中,如果需要put则增加一个;将api放在一个js中,如果api名字修改,则只需要修改api.js中的名字即可,方便快捷。
2023-01-20 11:11:29
130
原创 vue图片懒加载
我们使用软件的时候,会有很多图片需要加载,但是当网络环境不好,或内存不足的情况,就会导致用户首屏加载特别慢,影响用户体验,所以为了解决这个问题,提出了图片懒加载的方法来解决该问题。这样做的好处就是可以使用当前网络环境来全力加载该可视区域的图片,增加加载速度;②首屏加载时候img标签src赋为空值,这样就不会去渲染看不见的图片而浪费时间。③当用户滑动到图片的可视区域后,替换src的路径,改为正式路径,则开始渲染图片。①当图片区域到达用户界面可视区域的时候才进行加载图片。
2023-01-19 17:49:49
6541
原创 vue虚拟列表,一次性拿到10w条数据
第一步:计算每条数据的渲染后的实际height,计算外部盒子需要滚动的高度,内部渲染的真实dom使用粘性布局,在我滚动的时候,动态计算截取10w条数据中的一部分渲染到真实dom去,以实现列表的不卡顿。
2022-12-31 13:06:11
1598
原创 Flex布局个人信息右对齐
这个时候可能会有人想说用两个盒子包裹着,使用 justify-content: space-between 来,但是使用这个后,对于一级导航的样式就需要在两个盒子中各自设计,那么有没有一种方式就能实现一个大盒子里面装的所有的小盒子是在同一级的,但是个人信息又能跑到最后边呢?这样的话就能很明显看出来最后那个盒子是沾满了剩下的盒子了的,再配合text-align: right;一般布局在使用flex布局的时候,我们是希望一级导航是左边是所有的导航,但是个人信息按钮是在最右边对齐的。
2022-12-18 17:30:17
1291
原创 vue引入echarts
一、cmd命令:vue create demo二、项目命令窗口:npm install echarts --save三:main.js 全局引入形式import * as echarts from "echarts"Vue.prototype.$echarts = echarts四:index.vue页面使用<template> <div class="app"> <div style="width:500px;height:500px" r.
2022-05-02 17:20:57
362
1
原创 Vue2点击阻断事件
当父组件将内部所有元素包含时,点击最外层的view会整体触发该事件,但是我想在内部的点击事件只触发内部单独事件,就会用到以下方法这样就会阻断外部父组件的点击事件,只执行内部事件。更加符合使用要求...
2022-04-05 09:56:51
1688
2
原创 Vue引入Echarts
有没有一种比较方便的做数据表格分析呢?通过Echarts可以实现:第一步:引入Echarts,详情请看官网第二部:将Echarts放入组件,方便管理第三步:写代码<template> <div class="app"> <div style="width: 100%;height: 100%;" ref="chart"></div><!--ref是喧嚷echarts的时候可以多个渲染,如果不用,只能渲染最后一个--> &l
2022-03-17 09:16:00
147
原创 组件传值方式
当我们在写很多重复的模块的时候,会觉得重复写部分代码,很麻烦也很浪费时间,那么有没有一种方式来减少代码的书写量呢?有:子组件:<template> <div class="app"> <div class="block"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentP
2022-03-17 09:10:07
492
原创 PC端-移动端自适应屏幕
根据宽度决定内容的行数,适应手机端和PC端,便于开发;使用Table+iframe实现页面快速跳转。效果图:移动端Index.html<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met
2021-12-20 22:07:21
1654
3
原创 微信小程序
后台数据列表渲染效果图:HTML:<view class="wai"> <view class="left"> <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex;width:100%;"> <view wx:for='{{personalList1}}' bindtap="{{item.left}}" .
2021-12-13 20:57:45
1117
2
原创 微信小程序
//前后端分离数据传输和接收onload:function(){ wx.request({ url:’你的API地址‘, data:{ stuId:3, stuName:”***”//json格式传输给后台数据 }, method:'get',//post隐藏传输的数据,get不会隐藏 header:{ 'conten...
2021-12-08 23:00:40
319
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人