- 博客(100)
- 收藏
- 关注
RSS订阅原创 微信小程序引导关注公众号
其实是利用了路由跳转，跳转到一个新的页面，新的页面里加个web-view组件，web-view组件配置src属性——公众号文章的链接。这样，小程序点击关注按钮，就先路由跳转，然后利用web-view打开公众号文章，在文章里引导用户关注公众号。小程序的页面里加个按钮，点击按钮引导用户关注公众号。
2024-07-10 09:39:11
385
原创 react高阶组件——withRouter
withRouter是高阶组件，可以通过 withRouter 获取到 history、location、match 对象。
2024-06-03 00:00:00
324
1
原创 将下拉弹层渲染节点固定在触发器的父元素中
如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，将下拉弹层渲染节点固定在触发器的父元素中。
2024-06-02 16:38:39
264
原创 可变引用useRef()保存可变数据
每次渲染组件时，countRenderRef可变引用的值都会使countRenderRef.current ++递增。重要的是，更改不会触发组件重新渲染。场景：useState的状态值一旦通过状态更新函数改变了，React 就会重新渲染组件。方法：可变引用useRef()保存可变数据，这些数据在更改时不会触发重新渲染。
2024-06-02 16:19:48
244
原创 useEffect中返回函数的作用
React 何时清除 effect？React 会在[组件卸载的时候]执行清除操作。正如之前学到的，effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除。为什么要在 effect 中返回一个函数？这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。它们都属于 effect 的一部分。
2024-06-02 15:51:42
281
原创 使用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
4035
1
原创 antd的表格有多选框时翻页记住之前选择的数据
场景描述：antd的table表格数据有提供多选框的功能,只要在表格列中多加一列就可以选择表格的数据。但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页的数据的选中状态就没有了。解决办法：antd提供了preserveSelectedRowKeys，类型为 Boolean，为 true时会在数据更新之后记住之前选择的数据。（需要指定rowKey）代码如下：const onSelectChange = (selectedRowKeys,selectedRows) => {
2021-11-25 10:54:17
4178
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
1092
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
1645
1
原创 取消radio的选中状态
radio一旦选中一般是取消不了选中状态的，但是可以通过js操作数据的方式实现。以element-ui的radio组件为例，可以给radio增加一个native后缀去监听原生的点击事件（不加无法监听点击），增加一个prevent后缀去除radio组件原来自带的行为来执行新的逻辑。当点击的时候，如果当前点击的选项还没有被选中过，那么给v-model绑定的值赋值为当前选中的选项的值，如果当前点击的选项已经选中了，那么v-model绑定的值就重置为空，这样就可以实现***取消radio的选中状态***的效果了。
2021-04-12 12:04:14
4269
原创 常见的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
645
原创 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
1060
原创 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
3527
2
原创 【小技巧】怎么把mac程序坞移动到另外一个屏幕
在mac上,使用command + tab可以切换应用。当使用外接显示器并处在双屏模式时,如果想要把mac程序坞移动到另外一个屏幕,只需要将鼠标移动到另一个屏幕的最下方几秒钟,待“程序坞”(即mac默认显示在屏幕下方的应用程序栏)出现在该屏幕,则可以完成切换。...
2020-11-03 09:25:36
27494
5
原创 VSCode标签内的代码块无法折叠问题解决
点击VSCode软件左上角工具栏的：文件 =》 首选项 =》设置 =》在搜索设置输入框输入 Folding =》修改 Editor:Folding Strategy 选项的值 auto 为 indentation。
2020-09-18 12:47:36
5334
2
原创 在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
14521
2
原创 vue项目使用postMessage和eventBus进行窗口和组件间数据通信
先来说说什么是postMessage：postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案。场景：今天在vue项目中本来想使用eventBus(中央事件总线)进行组件间通信的。但是发现$emit后，另外一个组件没有收到通知。我检查了一下，发现其中一个组件是被另外一个组件使用iframe嵌套进页面的，而 $emit无法突破ifr
2020-08-05 23:58:27
1478
原创 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
1141
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
10863
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
2388
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
1136
原创 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
414
原创 如何写一个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
415
原创 vue自定义指令用法
在vue中，普通 DOM 元素进行底层操作，这时候就可能用到自定义指令。也就是说我们在操作普通DOM的时候有可能会用到自定义指令。自定义指令和自定义组件一样，也是先注册后使用，其注册和组件的注册很类似，也分为全局注册和局部注册。只是注册组件时是使用的component关键字，而注册指令时要使用directive关键字。全局注册使用自定义指令：Vue.directive('mydirective',{ // 钩子函数bind：只调用一次，指令第一次绑定到元素时调用。 // 在这里可以进行一次性的
2020-05-12 11:42:12
534
原创 向数组中插入几个值的方法
方法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
1988
原创 如何求数组中的最大值
方法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
7157
原创 利用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
272
原创 .eslintrc、.npmrc等配置文件结尾的“rc”是什么意思
背景：经常看到这样的配置文件，.eslintrc、.npmrc、.browserslistrc等等，那么这些配置文件结尾的“rc”是什么意思呢？解释："rc"可以看成是“run command”的缩写，即运行命令的意思。“ rc”后缀可以追溯到Unix的祖父母CTSS。它具有一个称为“ runcom”的命令脚本功能。 Unix使用“ rc”作为操作系统名称启动脚本，以向CTSS runcom致...
2020-04-17 10:05:46
2883
原创 git用法之amend与force-with-lease
先说一说--amend的用法。在git commit 之后如果想要修改上一次commit的信息，可以执行：git commit --amend -m "新的提交信息"也可以直接执行：git commit --amend然后在打开的编辑文本中直接修改上一次commit的信息，然后保存关闭。...
2020-04-08 16:27:03
1336
原创 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
1227
原创 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
312
原创 js中in关键字的作用
in关键字可以用来检测某个对象里是否存在某个属性，既可以是这个对象自身的属性，也可以是这个对象继承的属性，对于对象的属性需要用字符串指定属性的名称。比如用in检测对象中是否存在"proto"属性："__proto__" in {}返回一个布尔值，表示对象存在或者不存在这个属性。因为数组也是一种特殊的对象，所以in也可以用来检测数组的属性。对于数组的属性需要用数字来表示数组的属性名称：0...
2020-03-04 12:00:18
1789
原创 实现千分位加逗号
先用正则方式实现：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
1072
原创 2个同源tab页之间的数据交互
如果要实现2个同源tab页之间的数据交互，可以选择使用localStorage，因为它的存储遵循同源策略。通过约定localStorage某一个itemName，基于该key值的内容进行通信。H5提供了storage事件，通过window对象监听storage事件，会监听到localStorage的变化（包括item的增加、删除、修改），从而完成不同tab页之间的数据交互。示例：A页面wi...
2020-02-20 16:01:27
1658
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
1048
原创 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
6981
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人