- 博客(46)
- 收藏
- 关注
RSS订阅原创 vue3和vue2 之 provide/inject 用法区别 ---vue3组件间通讯2
provide/inject 主要用于父组件和子孙组件间通讯，简单的父子组件间传值还是使用props、emits或是defineProps、defineEmits、defineExpose比较方便。父组件中提供数据，并在其后代的组件树，无论层级有多深，都可以中注入这些数据，从而实现了组件之间的数据传递。不用在父传子，子传孙，孙传重孙等数据传递了（解决了Prop 逐级透传问题）
2024-04-02 10:05:51
677
1
原创 vue之 h() 函数
Vue在生成真实的DOM之前，首先会将节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM（VDOM）,最后VDOM才渲染成真实的DOM；如果我们直接编写生成vnode的代码，效率会更高，这里我们就是h()函数。h函数我们也可以称为createVnode函数，是用于创建 vnode 的一个函数；h函数接收三个参数。例：()=>h（'h1',{class="classsName"}, '大家好！'）
2023-09-19 20:49:23
1308
原创 VS Code终端系统启动失败的问题
各种各样打不开，有的配置一下就可以了，有的改成管理员权限就可以了，我的是怎么设置都不行，安装了最新版本的不行，又退了几个版本才行了，1.56版本内网行，1.55版本能行，比这高的版本都不行。
2023-08-15 16:28:03
1807
原创 react-codemirror2 编辑器需点击一下或者延时才显示数据的问题
现象： 组件的数据已经赋上值的情况下，初始状态不渲染数据，需要点击编辑框获取焦点后才展示，或者延迟了几秒才显示出来。解决：1. 手动引入自动刷新的插件 2. 配置一下参数。
2023-08-10 19:19:20
1473
原创 defineExpose 、defineProps、defineEmits --- vue3组件间通讯1
1. defineExpose子传父（用在子组件，暴露想传递的值或方法，父组件通过ref属性获取子组件暴露的）2. defineEmits 子传父（用在子组件，将子组件的方法传递给父组件，用来声明emits）3. defineProps 父传子（用在子组件，接收父组件的传值，用来声明props）
2023-06-09 17:26:09
9319
2
原创 vue 中的 $ （持续更新...）
1.`${}`模板字符串;2. $是vue的命名规则，增强区分的，来说明这是内置的实例方法属性。自定义的就不要带$了。
2023-05-19 15:17:01
2889
原创 reduce函数及其用法
reduce()方法对数组中的每个元素按序执行一个由您提供的reducer函数，每一次运行reducer会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。即：1. 为数组的每个值从左到右执行提供的函数；2. 将数组缩减为单个值（函数遍历整个数组后的结果）。
2023-04-27 19:42:11
971
原创 文件上传---FormData格式的传参
一般前端做 文件导入功能 / 上传功能 的时候会用到Formdata的格式，来上传文件和数据。会比较常用的两种方式：1. 直接表单传值可以使用FormData.append来添加键/值对到表单里面；2. 后端的多部分传参和后端接口保持统一，那么可能不全是表单格式的数据，可能设置的不同的格式，比如文件格式的文件和数据格式的数值，因此需要带格式传过去（new Blob方法）。
2023-04-26 14:32:07
7394
原创 数组去重，对象去重，数组对象去重
数组去重1.双层循环+splice 2.forEach+indexOf (利用对象属性key排除重复项)3.new Set(数组)4. filter()+indexOf()5.reduce() +includes；数组对象去重1.双层循环2.for循环+新数组3.利用对象属性4.reduce()5. Map（）对象数组的去重，大多是在数组去重的基础上处理的
2023-04-25 18:16:01
1474
原创 判断两个对象数组是否有相同元素，对象数组合并去重
1.循环判断arr与arr2是否有相同元素，相同的添加isdelete:false字段，不同添加isdelete:true。2.循环判断arr与arr2是否有相同元素，不同的使用arr2里的元素。3. 判断arr与arr2合并去重。
2023-01-31 17:14:05
1460
2
原创 判断一个值是对象还是数组，数组或对象判空，判断数组或对象中是否包含某个值
1. 通过es6的一个方法Array.isArray()判断2. 通过 instanceof 运算符判断3. 通过 constructor 属性判断
2023-01-30 15:10:59
1673
原创 Vue2 传值（父子传值，provide/inject传值，vuex传值）
vue组件间通讯有什么方法： 1） 使用props、$emit 传值 （prop向下传递，事件向上传递；$emit触发父组件的自定义事件） 2） 使用provide、inject 传值 3） 使用bus.js （通过定义公共实例文件来进行非父子组件之间的传值） 4） 使用vuex 父子组件间传参，用props、$emit 比较便利好用； 跨组件传参，用provide/inject ，vuex
2022-12-08 16:27:43
3448
原创 IP和端口的格式校验（正则表达式）
IP地址：/^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/端口：/^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
2022-11-11 14:36:11
1718
原创 react hooks-页面实时刷新2（useRequest）
页面能够实时刷新，归根结底是用了定时器的原理1. 用setTimeout直接实现 ->react hooks-页面实时刷新（setInterval）2. 用封装好的hook函数实现 （useRequest）useRequest 轮询通过设置 options.pollingInterval，进入轮询模式，useRequest是一个强大的异步数据管理的 Hooks。
2022-11-10 19:40:11
2214
原创 react传值（父子传值，context传值，redux传值）
总述： 组件间通讯有什么方法： 1）使用props传值 2） 使用context传值 3） 使用redux传值 非跨组件传参，以上传参方式都可用，比较常用也好用的是跨组件传参，使用props一层层往下传，使用context，或者用redux 。
2022-10-24 17:35:27
3367
原创 vue页面基本用法
app这个变量会代理vue中的data数据，访问data中的数据时，直接app.name就可以了若后台修改数据，页面就会自动绑定改变。vue的各个指令操作...
2022-09-13 16:04:49
609
原创 Vue与React的异同
react中数据发生变化（调用setstate时），render函数就会执行，重新生成一个新的虚拟dom， 就会遍历 diff 当前组件所有的子节点子组件，新旧比较，得出差异然后渲染。vue组件中数据发生变化，会触发setter，由于vue组件中数据的getter的作用，收集了依赖，setter触发会根据这些依赖，生成新的虚拟dom，然后对比新旧虚拟dom进行渲染。...
2022-08-25 20:31:16
1368
原创 react hooks-页面实时刷新（setInterval）
页面实时刷新一般用定时器（setInterval（））实现1. 页面使用定时器一定要记得清除。2. useEffect 的数组依赖不要忘记，不然只执行一次。3. 也可以使用useRef（为了避免setInterval变量形成闭包）.........
2022-08-10 16:13:57
7962
原创 js 鼠标点击元素复制指定的内容
鼠标点击元素复制指定的内容，使用了Dom原生的API，document.execCommand(commandStr)，该方法允许运行命令来操纵可编辑内容区域的元素。
2022-07-07 19:09:15
1129
原创 查看和导出 .html/.csv/.xls/.zip等类型的文件（前端从后端接受文件流来实现）
1. 查看html报告用XMLHttpRequest（客户端的一个 API）实现 去学习XMLHttpRequest --->通过XMLHttpRequest提供的方法实现页面的预览查看。const openReport=(fileId:string)=>{ const reqUrl = `/api/gsQueryWdr/download/${fileId}`; const token = localStorage.getItem('authori......
2022-05-28 16:30:38
1516
原创 react前端导出pdf（设置边距）
大体思路：html转换成canvas后生成图片导出pdf jspdf用法：将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置。1. 用到2个插件html2canvas：html转canvasjsPDF：canvas生成pdf（使用Javascript语言生成PDF的开源库）
2022-04-29 15:11:14
3370
5
原创 纯前端导出ecxel（用插件和不用插件[原生js]）
一般的，下载excel是后端放到服务器上，然后读取文件流，然后给接口，前端直接就下载。一、用插件npm install -save js-export-excel1. 引入插件2. 定义导出的模板（表头、数据等）3. 定义导出的文件名二、用原生js实现（没有插件）将table标签，包括tr、td等对json数据进行拼接，通过将json遍历将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件
2022-04-21 19:37:58
3376
原创 bug：select组件多选时value不起作用
注意下面两点就解决了，费了半天的功夫，才发现多选的value会去option对象中去检测，然后显示选择的内容，如果传入的不是对象，就会导致找不到，value就不起作用了1.多选时value为 string[ ]2.存储选择的value时，不能只存储选择的值，而是整个对象 ItemProps[ ]interface ItemProps { label: string; value: string;}value起作用的代码：import { Select, Spa...
2022-03-22 15:49:27
1078
原创 upload组件多个文件上传、自定义文件列表显示及手动上传
1.多选和单选1）由multiple属性来控制2）保存state时，注意存的List内容即可//参数uploadProps={ name:'file', //接口入参名 accept:'.gz', //接受上传的文件类型 action：document.location.prot+'//'+location.host+'/apis', //接口url headers：{ authorization:localStage.getItem('
2022-03-17 16:06:26
4409
原创 js 数组集合和区间集合的相互转化
需求：总核：16 已用核：['1', '3-5', '8'] 求未用的核数即 :求 ['0', '2', '6-7', '9-15']思路：1. 将总核、已用核都转化成数组形式2. 从总核数组中删除已用核，得到未用核数组3. 将未用核数组转化成区间集合实现：...
2022-02-22 16:56:08
812
原创 自定义hooks实现监控页面高度
实现一个简单的功能，监听页面高度，把他维护未公共组件，其他想使用的组件都可调用。1. 和写功能一样，写好这个功能的代码逻辑。 只要注意use开头，最后导出即可import React, { useState, useEffect，useCallback } from 'react'// 自定义hooks，要以use开头function useWinSize() { const [size, setSize] = useState({ heig...
2021-12-31 17:58:08
684
原创 对高阶组件和自定义hook的理解
有时候我们会想要在组件之间重用一些状态逻辑。目前为止，有两种主流方案来解决这个问题：高阶组件和render props。自定义 Hook 可以让你在不增加组件的情况下达到同样的目的。每个组件间的 state 是完全独立的。Hook 是一种复用状态逻辑的方式，它不复用 state 本身。事实上 Hook 的每次调用都有一个完全独立的 state —— 因此你可以在单个组件中多次调用同一个自定义 Hook。...
2021-12-18 14:57:47
1111
原创 js 截取字符串里的IP和port
例如：str = 192.168.12. 2541. 用 ip和port 的正则let ip_reg = /([\d\.]*)/gi;let ip =ip_reg.exec( str );ip=ip[0] let port_reg =/.+:(\d{1,5})/let port=str.match(port_reg);port= port[1]2. 一步到位let ipPort=str.match(ip_reg)ip=ipPort[ 0 ];p..
2021-11-20 17:14:25
4983
原创 antd表单 Form.Item,Form.List 的自定义数据格式
1. 常用格式{ }表单内容：<Form> <FormItem name={'name'} lable={'用户'} > <Input placeholder='请输入'/> </FormItem> <FormItem name={'ip'} lable={'IP地址'} > <In.........
2021-10-23 14:51:19
4538
2
原创 Too many re-renders. React limits the number of renderers to prevent an infinite loop...
原由：页面是一个 ip 区间，在区间后面显示 一组数据是否都存在区间内的，都存在显示√，部分存在显示 ×，并显示不存在区间内的 ip页面崩溃的代码：//页面<Row> <ipInput> </Input> { seeError(value)? <span> √ </span> ： <span> × <Popover ..
2021-10-22 09:29:04
3831
原创 TypeScript高级类型-Partial、Required、Pick、Omit、Readonly
Partial (部分的; 不完全的)ts中就是让一个定义中的所有属性都变成可选参数，参数可以变多也可以少。我们定义 一个user 接口，如下interface IUser { name: string age: number department: string}经过 Partial 类型转化后得到type optional = Partial<IUser>// optional的结果如下type optional = { name?: strin...
2021-10-11 19:51:18
5232
原创 TextArea禁止输入空格和回车
在textarea 里面，空格和换行会被保存为/s和/n，如果我们前台输入和前台显示的文字都是在 textarea 里面，其实并不需要做任何处理，你在 textarea 里面编写的样式会按照你之前编辑时候的样式，正确的显示出来。那么，如果要 textarea 编辑提交的文字，从后台返回之后，不是显示在 textarea 里面，那么就需要考虑处理空格和换行了；这个情况可以看看下小朋友的博客，写的很赞 处理textarea中的换行和空格 - 下小朋友 - 博客园又或是......
2021-09-27 18:00:16
7842
2
原创 TypeScript - 泛型 总结
本文搬运于TypeScript中文网：https://www.tslang.cn/docs/handbook/generics.html目录一个例子！！ 泛型变量一个问题，报错了！ 泛型约束 使用泛型函数 泛型接口 泛型类一个例子！！创建一个identity函数：这个函数会返回任何传入它的值。不用泛型：function identity(arg: number): number { return arg;}或者，使用any类型来定义函
2021-09-04 17:52:23
182
2
原创 form表单遇的坑（react）
1.Modal 中直接调用 form 控制台会报错因为在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。通过Form.useForm对表单数据域进行交互。注意useForm是React Hooks的实现，只能用于函数组件，class 组件通过ref获取数据域。const [ form ] = Form.UseForm( )<Form form = {form} // form的控制实例 name ...
2021-08-18 16:57:54
1840
原创 TypeScript 是什么，以及它的一些基础语法
TypeScript 是 JavaScript 的运行时，带有编译时类型检查器。JS与TS的关系：四. 基础语法1. TS 的基本类型：2. 原语：3. 数组：4. 对象：5. 函数：6.空值void7.联合类型：8. 类型断言：9. 元组 Tuple:10. 枚举 enum：11.any:12.字面量类型+联合类型
2021-08-14 14:57:50
405
原创 多个接口顺序调用，实现方式的进化
场景：假设有4个异步方法要按顺序调用1. 嵌套调用为了顺序调用接口，出现多重嵌套，也就出现了俗称的 “回调地狱”； ajaxA("xxxx", ()=> { ajaxB("xxxx", ()=> { ajaxC("xxxx", ()=> {ajaxD("xxxx", ()=> { //处理dataXXXXXXX})...
2021-08-05 15:28:22
2804
3
原创 react-router 跳转原理及用法
1. 为什么使用react-router路由是提升用户体验的重要一环，当需要页面切换而又不想重新加载新页面的时候，就需要用到路由。同时还可以增强组织资源的语义，每个页面的业务功能都是高内聚，低耦合的，通过url就可以将页面进行很好的隔离。2. react-router的基本原理一句话：实现URL与UI界面的同步。其中在react-router中，URL对应Location对象，而UI是由reactcomponents来决定的，这样就转变成location与components之间的同步...
2021-07-27 21:02:47
3594
原创 react 纯前端实现数据分类、并可搜索
功能描述：把无序的数据按英文字母排序显示，实现搜索分类不变排序功能实现：搜索功能实现：代码实现：/* * 对以下数据按字母顺序排序 */let fruit = [ { 'name': '苹果', 'value': 'Appel', 'LienItems': [{ 'itemName': '苹果派',
2021-07-24 22:22:44
1274
2
原创 TypeError: arr[Symbol.iterator] is not a function
我们可以通过将类数组(array-like)对象转换为数组来绕过它。该对象将具有一个length属性，其元素必须可以被索引。我们来看一个例子：Array.from()方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。https://www.cnblogs.com/jf-67/p/8440758.htmlhttps://blog.csdn.net/weixin_36706903/article/details/86153740...
2021-07-17 14:33:10
1767
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人