- 博客(91)
- 收藏
- 关注
RSS订阅原创 使用ref手动改变antd的搜索框Input.Search的搜索内容
antd提供了Input.Search搜索框组件，它的其余属性和 Input 一致，通过value当然可以修改搜索内容，这里介绍另外一种方法来修改搜索的内容。直接上代码：import { useRef } from 'react';import { Input } from 'antd';...const searchRef = useRef(null)...<Input.Search ref={searchRef} placeholder='请输入' onSearch={O
2021-12-08 14:30:37
3842
1
原创 antd的表格有多选框时翻页记住之前选择的数据
场景描述：antd的table表格数据有提供多选框的功能,只要在表格列中多加一列就可以选择表格的数据。但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页的数据的选中状态就没有了。解决办法：antd提供了preserveSelectedRowKeys，类型为 Boolean，为 true时会在数据更新之后记住之前选择的数据。（需要指定rowKey）代码如下：const onSelectChange = (selectedRowKeys,selectedRows) => {
2021-11-25 10:54:17
3835
1
原创 求数组嵌套深度
有很多求数组嵌套深度的解法，我自己想出来的解法如下：function deepLevel(arr){ var num = 0; function recurse(arr){ var arr2 = arr.flat() if(arr2.some(item=>typeof item === 'object')){ num+=1 recurse(arr2) } } recurse(arr) return num}主要解题思路是：先
2021-07-06 10:47:34
1046
4
原创 visibilitychange事件在移动端开发的使用
业务想要实现的效果：APP从原生或者RN页面进入h5页面，之后再跳转到其他页面，在其他页面点击返回的时候直接回到原生或RN页面，不要再回到中间过渡的H5页面。我开始的是h5跳转到其他页面之前关闭当前的webview,但是这样的效果不好。后来我使用了visibilitychange来触发，当从其他页面返回这个h5页面的时候document.hidden会变成false,这时再关闭webview。代码如下：mounted() { window.document.addEventListener('
2021-05-20 11:11:18
1566
1
原创 取消radio的选中状态
radio一旦选中一般是取消不了选中状态的，但是可以通过js操作数据的方式实现。以element-ui的radio组件为例，可以给radio增加一个native后缀去监听原生的点击事件（不加无法监听点击），增加一个prevent后缀去除radio组件原来自带的行为来执行新的逻辑。当点击的时候，如果当前点击的选项还没有被选中过，那么给v-model绑定的值赋值为当前选中的选项的值，如果当前点击的选项已经选中了，那么v-model绑定的值就重置为空，这样就可以实现***取消radio的选中状态***的效果了。
2021-04-12 12:04:14
4165
原创 常见的2种实现下载文件的方式
第一种就是get请求啦，点击按钮的时候执行window.location.href或者window.open就可以自动让浏览器去下载对应地址的文件，具体代码如下：methods: { // 导出文件 exportFile() { const downloadURL = '下载接口 const params = '?请求参数' const requestUrl = downloadURL + params window.location.href = reques
2021-04-07 09:47:39
621
原创 axios自带的上传进度回调函数
在选用antd上传组件上传的时候，需要显示上传的进度。upload组件是自带上传特效的，但是这个效果不能代表实际的上传进度，所以还是得获取实时的上传进度。所幸的是axios自带这样的回调函数，即uploadProgress。import axios from 'axios'axios.post(url, { onUploadProgress(p){ console.log(100 * (p.loaded / p.total)) }})其中100 * (p.loaded / p
2020-12-15 01:13:34
1025
原创 vue中的$refs属性几个注意点
1.在vue中获取dom推荐使用$refs来获取，可是有时会出现 this.$refs.xxx 为undefined的情况。场景1：在created()里使用在这个生命周期中进行数据观测 ，属性和方法的运算，watch 事件回调。但是页面还没有挂载上去，没有el属性，this.el 属性，this.el属性，this.refs无法调用dom。解决办法：换成在mounted()里使用场景2：父元素或当前元素使用了v-if或v-show因为$refs不是响应式的，只在组件渲染完成后才会生效，
2020-12-02 11:19:26
3471
2
原创 【小技巧】怎么把mac程序坞移动到另外一个屏幕
在mac上,使用command + tab可以切换应用。当使用外接显示器并处在双屏模式时,如果想要把mac程序坞移动到另外一个屏幕,只需要将鼠标移动到另一个屏幕的最下方几秒钟,待“程序坞”(即mac默认显示在屏幕下方的应用程序栏)出现在该屏幕,则可以完成切换。...
2020-11-03 09:25:36
25191
5
原创 VSCode标签内的代码块无法折叠问题解决
点击VSCode软件左上角工具栏的：文件 =》 首选项 =》设置 =》在搜索设置输入框输入 Folding =》修改 Editor:Folding Strategy 选项的值 auto 为 indentation。
2020-09-18 12:47:36
4976
1
原创 在vscode中配制setting.json遇到“Auto Fix is enabled by default. Use the single string form.”报错解决
在vscode编辑器的setting.json中设置eslint的校验规则："eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true }]然后这里就出现黄色波浪线，提示“Auto Fix is enabled by default. Use
2020-09-03 16:34:04
14392
2
原创 vue项目使用postMessage和eventBus进行窗口和组件间数据通信
先来说说什么是postMessage：postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案。场景：今天在vue项目中本来想使用eventBus(中央事件总线)进行组件间通信的。但是发现$emit后，另外一个组件没有收到通知。我检查了一下，发现其中一个组件是被另外一个组件使用iframe嵌套进页面的，而 $emit无法突破ifr
2020-08-05 23:58:27
1406
原创 git推送到仓库却发现没有贡献
最近发现自己推送代码到github，但是github却没有任何的contribution记录。我一开始以为是自己的SSH key的问题，我重新添加后发现还是没有记录。最后我发现在新的电脑上需要做git email 配置，且配置的email必须和github上的email保持一致，否则github不认为你们是同一个用户，就不会记录contribution了。配置的命令如下：git config user.email "your github email"这个命令是对单个项目生效的，如果想要对所有的
2020-07-23 11:31:31
1047
2
原创 vue解决图片加载失败显示默认图片的方法
代码如下：defaultImg.js:function install(Vue, options = {}) { /** * 检测图片是否存在 * @param url */ let imageIsExist = function (url) { return new Promise((resolve) => { var img = new Image(); img.onload = function () { if (th
2020-06-19 12:56:50
10639
2
原创 技术分享：前端开发中电脑和手机联调的方法
如果是普通的H5页面，那么电脑和手机处于一个局域网，手机就可以访问电脑启动的前端项目了。例如，项目地址是 http://192.168.43.241:8088，在手机直接访问http://192.168.43.241:8088即可。如果想要手机和电脑的网页同步的话，可以在手机中安装 chrome浏览器，USB 连接电脑（手机需要开启开发者模式），然后在电脑的 chrome 浏览器中打开 chrome://inspect ，打开一个新的标签，输入要访问的前端项目地址，这样手机就可以看到和电脑上同步的网页。
2020-06-10 10:58:30
2213
1
原创 git本地分支和远程分支的关联
经常会遇到本地分支和远程分支关联的情况，最常见以下2种情况：1.远程新建了一个分支，本地没有该分支这种情况下使用git checkout --track origin/branch_name 后，本地会新建一个分支名叫 branch_name ，并自动跟踪远程的同名分支 branch_name。2.本地新建了一个分支，远程没有该分支这种情况下使用git push --set-upstream origin branch_name ，可以在远程创建一个 branch_name 分支，本地分支会自动跟踪
2020-06-02 14:14:39
1116
原创 vue组件之间通信的方式
1. props/$emit最常见的方式，父组件通过props的方式向子组件传递数据，子组件通过$emit 提交事件向父组件通信。2. $children/$parent通过$parent和$children就可以访问组件的实例，其中 $children是数组，$parent是对象3. ref/$refsthis.$refs.xxx可以获取组件实例4. eventBus通过中央事件总线的方式，一个组件$emit,另外一个组件$on5. vuex项目复杂采用它6. localStorage
2020-05-12 22:53:52
387
原创 如何写一个vue自定义插件&&前端控制权限访问
一个vue插件需要对外暴露一个install方法，然后再通过Vue.use()注册它。举个例子：定义一个控制权限访问的auth.js插件： function check(item){ const role = localStorage.getItem('role'); //这里的role是登录时存在storage里的角色类型，例如:"admin" return item.includes(role) } function install(Vue,options){
2020-05-12 17:11:33
393
原创 vue自定义指令用法
在vue中，普通 DOM 元素进行底层操作，这时候就可能用到自定义指令。也就是说我们在操作普通DOM的时候有可能会用到自定义指令。自定义指令和自定义组件一样，也是先注册后使用，其注册和组件的注册很类似，也分为全局注册和局部注册。只是注册组件时是使用的component关键字，而注册指令时要使用directive关键字。全局注册使用自定义指令：Vue.directive('mydirective',{ // 钩子函数bind：只调用一次，指令第一次绑定到元素时调用。 // 在这里可以进行一次性的
2020-05-12 11:42:12
507
原创 向数组中插入几个值的方法
方法1: 使用splice()var arr = [1,2,3,4];arr.splice(3,0,'a','b');console.log(arr);方法2：先slice()后添加新元素var arr = [1,2,3,4];// 使用pushvar newArr = arr.slice(0,3)newArr.push('a','b',4)// 或者使用unshiftvar newArr2 = arr.slice(3)newArr2.unshift(1,2,3,'a','b')/
2020-05-11 15:52:50
1959
原创 如何求数组中的最大值
方法1：先排序再取数组最后一项var arr = [1,3,4,2];arr.sort(function(a,b){return (a - b)});console.log(arr[arr.length-1]);方法2：遍历判断var arr = [1,3,4,2];var max = arr[0]arr.forEach(ele=>{ if(max<ele){ max = ele }})console.log(max);方法3：使用内置函数Math.max
2020-05-11 15:14:30
7054
原创 利用git别名alias来简化git命令
情景：我们使用git的时候经常需要敲很多命令，例如：git checkout dev、git status等，能不能用缩写来简化命令呢？答案是：yes~解决方法：可以利用alias来简化git命令，具体配置如下：git config --global alias.co checkout这样配置以后，以后再运行git checkout dev的时候就可以简化为git co dev。...
2020-04-22 18:42:26
253
原创 .eslintrc、.npmrc等配置文件结尾的“rc”是什么意思
背景：经常看到这样的配置文件，.eslintrc、.npmrc、.browserslistrc等等，那么这些配置文件结尾的“rc”是什么意思呢？解释："rc"可以看成是“run command”的缩写，即运行命令的意思。“ rc”后缀可以追溯到Unix的祖父母CTSS。它具有一个称为“ runcom”的命令脚本功能。 Unix使用“ rc”作为操作系统名称启动脚本，以向CTSS runcom致...
2020-04-17 10:05:46
2736
原创 git用法之amend与force-with-lease
先说一说--amend的用法。在git commit 之后如果想要修改上一次commit的信息，可以执行：git commit --amend -m "新的提交信息"也可以直接执行：git commit --amend然后在打开的编辑文本中直接修改上一次commit的信息，然后保存关闭。...
2020-04-08 16:27:03
1261
原创 react-router下browserRouter与hashRouter的区别
先说结论：二者的最大区别就是hashRouter不支持location.key 、location.state。举例说明：homepagethis.props.history.push({ pathname:'/about', state:{ msg:'this is a msg from home' }})aboutpageconsole.log(JSON.s...
2020-03-23 14:43:36
1214
原创 css文字渐变的实现
比较了几种方案，个人觉得background-image结合background-clip以及text-fill-color是最佳的实现方案。原理：text-fill-color把文字变透明，用background-image设置渐变作为背景，用background-clip来裁切背景，裁切的范围正好是文字的显示范围。举例：<div class="charge-btn"> ...
2020-03-05 11:38:03
300
原创 js中in关键字的作用
in关键字可以用来检测某个对象里是否存在某个属性，既可以是这个对象自身的属性，也可以是这个对象继承的属性，对于对象的属性需要用字符串指定属性的名称。比如用in检测对象中是否存在"proto"属性："__proto__" in {}返回一个布尔值，表示对象存在或者不存在这个属性。因为数组也是一种特殊的对象，所以in也可以用来检测数组的属性。对于数组的属性需要用数字来表示数组的属性名称：0...
2020-03-04 12:00:18
1725
原创 实现千分位加逗号
先用正则方式实现：var regExp = /\d{1,3}(?=(\d{3})+$)/gfunction change(num){ return (num+"").replace(regExp,function(match){ return match+"," })}var result = change(10000000)console.log(result);然后用非...
2020-02-29 00:55:59
1051
原创 2个同源tab页之间的数据交互
如果要实现2个同源tab页之间的数据交互，可以选择使用localStorage，因为它的存储遵循同源策略。通过约定localStorage某一个itemName，基于该key值的内容进行通信。H5提供了storage事件，通过window对象监听storage事件，会监听到localStorage的变化（包括item的增加、删除、修改），从而完成不同tab页之间的数据交互。示例：A页面wi...
2020-02-20 16:01:27
1615
1
原创 react踩坑之redux删除数据页面无变化
最近在踩坑react，demo使用了redux，发现删除数据页面没有任何变化。代码如下：demo.js:const dispatchToProps = (dispatch)=>{ return{ deleteItem(index){ const action = deleteItemAction(index) dispatch(action) ...
2020-01-14 17:00:39
1016
原创 nodeJS把json数据转成excel（xlsx文件)输出
最近做网站爬虫，爬取到的数据保存到一个name.json文件中，数据结构大概是这样的：可以利用nodeJS把这个json文件转成excel输出，当然浏览器环境也可以做到，网上有相关的方法。我这里使用了fs模块和第三方模块json2xls,所以要先安装json2xls：npm install json2xls -D// 在jsonToExcel.js中先引入核心模块const fs = ...
2019-12-26 11:29:26
6696
2
原创 ES6箭头函数的缺点
ES6中箭头函数给我们带来了便利，写法很简洁，不用再定义this，因为箭头函数的this取决于上一级作用域。但是它的缺点也是这些，this定义好了，太简洁有时候难以阅读。在下面场景使用箭头函数会出现问题：1.在对象中定义方法时使用箭头函数：var obj = { age:20, getAge:()=>{ return this.age }}obj.getAge...
2019-12-21 17:45:28
3210
原创 为什么vue组件里面的data必须是一个函数
先贴下官方的解释：vue组件的data为什么要是一个函数一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：data: function () { return { count: 0 }}我自己的理解是：JS里面的原型链和原型继承导致必须使用函数而不能使用对象。每个组件相当于是Vue构造函数的一个实例，而data是Vue构造函数...
2019-12-21 16:45:40
572
1
原创 使用pointer-events控制div元素的禁用状态
需求：某个div上绑定了点击事件，在不点击button按钮的时候，div处于禁用状态（即点击事件不可触发），只有点击了button这个div才解除禁用状态。思路：在button点击前给div一个disabled的状态，点击后把disaled状态去掉。如果是input可以直接使用disabled属性，但是div没有这样的属性，只能另辟蹊径。解决办法：使用css属性pointer-event...
2019-12-12 18:36:51
1006
原创 如何让tab滑动到顶端置顶
之前做项目的时候遇到一个需求：tab切换栏滑动到顶端的时候置顶不动，当再次下滑的时候恢复原状。当时为了做这个功能，还特意去监听了浏览器的滚动，当滚动到特定位置的时候，让隐藏的置顶的tab（和标准文档流里的tab内容一样）显示。现在发现了一个css属性可以快速实现这个功能，那就是：position:sticky;粘性（sticky）定位可以被认为是相对定位(relative)和固定定位（fi...
2019-12-09 11:51:47
2151
原创 flex布局如何让flex项之间的间距一样大
之前在使用flex布局的时候，为了让flex项之间产生间距，设置了如下属性：ul{ display:flex; flex-wrap:wrap; justify-content:space-around;}li{ width:30%; height:100px;}设置之后发现中间的间距确实一样大,但是左边第一个和右边第一个flex项距离主轴两端的距离却和中间的间距不一...
2019-12-09 11:16:54
55828
1
原创 element-ui表格的多选框CheckBox 是否可以勾选
项目需要使element-ui表格的选择框部分可勾选，部分不可勾选。解决办法：使用selectable属性来判断,接收一个回调函数，函数的第一个参数是row,第二个参数是示例代码：template:<el-table ref="dataTable" :data="data" border> <el-table-column type="selecti...
2019-11-28 14:13:04
3043
原创 js字符串转数字的方法
js字符串转数字的几种方法：1.默认方式 (不带基数)：parseInt(num);2.传入基数 (十位数)：parseInt(num, 10);3.浮点数： parseFloat(num);4.Number 构造器： Number(num);5.按位非： ~~num;6.一元运算符：num / 1;num * 1;num - 0；num;parseInt会将num转为整...
2019-11-18 10:57:51
2013
原创 在for循环中依次执行异步操作
上一篇文章写了使用Promise进行异步操作：使用Promise来进行异步操作。这适用于单条数据的处理场景，如果是在for循环中处理多条数据，依次处理每条数据的异步操作呢？思路：还是利用Promise的then()来进行链式操作，每次循环的时间往Promise后添加一个新的then(),这样就可以保证上一个数据的异步操作执行完毕再执行下一个数据的异步操作。示例代码：const promis...
2019-11-17 01:40:29
5245
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人