- 博客(37)
- 收藏
- 关注
RSS订阅原创 [sitemap 索引情况提示] 根据 sitemap 的规则[0]，当前页面 [pages/index/index] 将被索引
问题如下:解决：在微信开发者工具找到project.config.json文件在setting中找到checkSiteMap设置为false即可
2022-04-16 00:55:22
272
原创 Eggjs解决跨域问题
1:先安装egg-cors插件npm install egg-cors -g 或者yarn add egg-cors2:在config/plugin.ts开启egg-cors插件const plugin: EggPlugin = { // 其他的 cors: { enable: true, package: 'egg-cors' } // 其他的};3:在config/config.default.ts中进行配置export def..
2022-03-26 13:49:47
1315
2
原创 js获取数组中当前元素的深度
先给定一个树形结构，生成带有深度的新数组。loopDepth(data, 0) // 默认第二个参数传入0 每次遍历到下一个children + 1const loopDepth = (data, count) => data.map((item, i) => { if (item.children) { return { ...item, depth: count, sort: i, children: loopDepth(item.children, count
2022-03-16 10:52:34
463
原创 Electron打包react项目
运行环境：win10 node：v14.17.0 打包工具：electron-packager如果你不是一个假的前端工作者，电脑上一定已经装了node环境，这里react项目搭建使用的是carete-react-app脚手架，dva的亦可使用以下步骤。接下来的步骤是你在成功运行一个项目之后进行的一、安装electron依赖npm i electron --save-dev下载完成 完成之后在package.json中添加命令"electron...
2021-08-05 17:25:12
910
原创 Electron解决fs.existsSync is not a function
报错场景，在jsx文件中使用const { ipcRenderer: ipc } = require("electron");解决：渲染进程—jsx文件：const { ipcRenderer: ipc } = window.require("electron");使用window.require代替require主进程—main.js:mainWindow = new BrowserWindow({ width: 1000, height:
2021-08-04 17:40:39
6706
1
原创 js中reduce的常用方法
reduce的几个参数array.reduce(function(prev,cur,index,arr),init)·prev（上一次调用回调返回的值，或者是提供的初始值（initialValue））·cur（数组中当前被处理的元素）·index（当前元素在数组中的索引)·arr（调用的数组）·init（传递给函数的初始值）累加器let test1 = [1, 5, 32, 10]let result1 = test1.reduce((pre, cur) => ...
2021-05-04 01:52:17
251
原创 moment获取周月年开始和结束时间
获取当天时间moment().format('YYYY-MM-DD')获取本周开始和结束时间const startDate = moment().startOf('week').format('YYYY-MM-DD')const endDate = moment().endOf('week').format('YYYY-MM-DD')获取本月开始和结束时间const startDate = moment().startOf('month').format('YYYY-MM-...
2021-04-21 20:51:22
2536
原创 有趣的contentEditable属性，实现div可编辑
当需求需要在文本输入中加入一些样式，并按删除键遇到某些样式的为多个文字整体删除，使用textArea是无法实现的，textArea中没有办法写单独样式，或者加入其他标签和组件。这时候就需要使用到contentEditable属性，将div或者一些其他标签可编辑。这样便可以简单实现一个可编辑的div，需要作为整体补课编辑的子元素contentEditable设置为false便可以实现回车之后一整个删除，但是此时控制地台会报一个警告，如下图需要加上suppressContentEditabl
2021-04-06 23:27:53
2076
原创 react中添加监听事件 阻止事件冒泡 点击空白隐藏元素
简单写一个点击按钮显示元素，点击元素外的区域元素隐藏的demo先定义一个事件，负责隐藏元素const hidden = () => { setStatus(false)}在uesEffect中添加监听和清除监听useEffect(() => { document.addEventListener('click', hidden) return () => { document.removeEventListene.
2021-03-22 22:52:56
1155
原创 antd Table表格点击行选中前面的选择框
antd的官网有个例子推荐，https://codesandbox.io/s/000vqw38rl放上onRow的用法原理就是点击行的时候将所点击行的内容的key设置到selectedRowKeys中，和rowSelection中onChange的相同，只不过一个是点击checkbox/radio,一个是点击行完整多选的情况：export default class App extends Component { state = { selectedRowK
2021-03-21 00:49:53
2544
2
原创 react hooks中使用setInterval
hooks中直接使用clearInterval()是无法清除定时器的，需要使用useReflet int = useRef()创建定时器int.current = setInterval(() => { // 这里写业务}, 200);清除定时器clearInterval(int.current)需要注意的是假如每次增加1，setNum(num+1)是无法生效的，要使用回调setNum(pre => { return pre + 1;.
2021-03-14 01:55:11
1280
2
原创 antd表格默认选中行（单选或多选都可）
先放上官网文档实现默认选中行主要处理rowSelection，onChange和selectedRowKeys是关键。onChange用于点击选项时候的回调，selectedRowKeys表示选中的行的key。那么可以用这个思路默认设置selectedRowKeys的值，onChange事件触发的时候再改变selectedRowKeys。这里默认单选选中第一行完整代码如下class TestTable extends Component { constructor(
2021-03-13 02:05:34
7840
8
原创 css实现毛玻璃效果
首先我们要知道实现毛玻璃效果的关键点：filter滤镜html代码<div class="main"></div>先写一个居中的div，并给body加上背景图，以及居中的div设置背景颜色和透明度body,html { background: url("./img/lamb.jpg"); background-position: bottom; background-size: cover; background-attachme
2021-03-04 23:58:03
2848
1
原创 svg实现环形loading加载
<circle> 标签可用来创建一个圆<svg> <circle cx="100" cy="100" r="40" stroke="#ffa940" stroke-width="8" fill="none" /></svg>首先实现一个圆环效果，cx,cy表示圆心坐标，r表示圆半径，stroke表示边框可以理解为border，stroke-width表示边框宽度，fill填充颜色。...
2021-03-03 23:36:59
803
1
原创 flex的三个属性
flex:flex-grow flex-shrink flex-basisflex-grow:定义放大比例，默认为0，规定项目相对于其他灵活的项目进行扩展的量 flex-shrink:定义了项目的缩小比例，仅在宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值，默认为1 flex-basis:给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小说起来听拗口也不怎么好理解，直接上代码吧！示例1：子元素都设置为f.
2021-02-28 02:48:55
5003
1
原创 useReducer和useContext组合案例
先看实现效果，点击按钮文字颜色分别变成蓝色和红色新建了三个文件，color.jsx负责业务逻辑，main.jsx负责包裹共享状态的组件，page.jsx负责UI展示page.jsx：先写静态的页面import React from 'react'import { Button } from "antd";function Page() { return ( <> <h1 style={{ color: '#888
2021-02-26 18:00:21
273
原创 useReducer简单使用
在 hooks 中提供了的 useReducer 功能，提供类似 Redux 的功能。useReducer接收一个 reducer 函数作为参数，reducer 接收两个参数state 和 action 。count 是返回状态中的值，dispatch 派发事件来更新 state 。useReducer的第二个参数将count默认值设为0const [count, dispatch] = useReducer((state, action) => { // 这里写逻辑}, 0).
2021-02-26 15:50:21
450
原创 useContext简单使用
如果需要在组件之间共享状态，可以使用useContext()。先引入createContext并创建一个Contextconst ContContext = createContext()需要共享状态的组件使用.Provider包裹，需要共享的数据放在value中<ContContext.Provider value={count}> <TestCom /></ContContext.Provider>完整代码im...
2021-02-23 00:18:03
750
原创 useEffect第二个参数
1、当useEffect没有第二个参数时const [count, setCount] = useState(0)useEffect(() => { console.log("useEffect:", count)})组件的初始化和更新都会执行2、空数组const [count, setCount] = useState(0)useEffect(() => { console.log("useEffect:", count)}, []).
2021-02-21 02:24:14
18090
原创 React中使用echarts 5.0
react中使用echarts和vue中差不多首先下载echartsnpm install echarts --save我这里下载的是5.0版本的按照官网的完整代码提示 复制下来就可以了在componentDidMount初始图表，配置项官网都有介绍代码可以直接使用import React, { Component } from 'react'import * as echarts from 'echarts/core';import { GridCompone
2021-02-17 02:24:34
1765
1
原创 js取两数之间的随机整数
function random(min, max) { min = Math.ceil(min) // 向上取整 max = Math.floor(max) // 向下取整 // 为了包括最大值要在之后加上1 可以取到闭区间[min,max] let result = Math.floor(Math.random() * (max - min + 1)) + min return result}random(-10, 10)...
2021-02-09 23:36:14
524
原创 js大写字母转小写字母前加下划线
功能实现： 将'FirstnameSecondnameThirdname'转换成'firstname_secondname_thirdname',首字母大写改成小写字母前加下划线let str = 'Firstname Secondname Thirdname'function toLow(str) { let arr = str.split(' ') // 根据空格分割 let newStr = '' arr.map((item, index) => {...
2021-02-09 23:14:24
1592
原创 react保留后台返回的换行功能
在父级元素中添加white-space:pre-wrap，这里写在行内效果：'↵'的发现无法换行，只需要将其替换成\n效果：
2021-02-04 00:29:18
838
原创 js获取一个函数执行时间
关键词:时间戳这里随便瞎写了个for循环10000次向arr中添加内容 let arr = [] function testFun() { let start = new Date().getTime() for (let index = 0; index < 10000; index++) { arr.push(index) // ...D.
2021-02-03 23:00:18
1270
原创 js下划线之后的小写字母转大写
功能实现将原先的字符串 "name_firstname_secondname"转化成 "nameFirstnameSecondname"let testStr = 'name_firstname_secondname' function toUp(str) { let newStr = '' let arr = str.split('_') arr.forEach((item, index) => .
2021-02-03 22:44:17
1447
原创 vue报错：do not mutate vuex store state outside mutation handlers.
项目中使用vuex遇到如下图问题，提示内容不要在mutation函数外修改vuex中存储的值，但是程序运行正常正常情况下vuex的值是可以在vue页面组件页面中修改的，但是为了避免不必要的参数混乱，不推荐此写法。然而vuex也是暖暖的提供了严格模式修改为false之后控制台不再提示警告...
2021-01-27 22:39:57
537
原创 js判断字符串中某个特定字符的个数(split)
split() 方法用于把一个字符串分割成字符串数组。我们可以根据这个方法，对字符串进行切割成数组，获取数组长度但是获取的长度就像现在有十棵树，每两棵树之间种一盆花，最后需要九盆花的原理一样所以我们在获取的数组长度之后需要 -1获取'a'的个数为3个同样的把需要的'a'放在首尾效果都是一样的不知道有没有其他更好的方法...
2021-01-27 10:15:24
9892
原创 v-html关于css和scss样式问题
这两天在做一个考试系统项目中在填空题方面遇到关于v-html中写class无法生效的问题百度之后发现了一个神奇的存在：样式穿透(嘿嘿 其实我也不知道这个叫法对不对，之前有遇到过js事件穿透 嗯 活到老学到老)这里简单写一个demo来看下图效果 没有生效百度了一大堆有说把scoped去掉或者写两个style,嗯效果是可以的 就是感觉有点low，另外也可以将样式写为行内样式，也是可行的，但是还是想找个更好的方法于是乎发现css中可用>>>,scss中存在/de.
2021-01-27 09:45:49
570
原创 console.log()简写小技巧
工作中使用console.log()调试程序可能会很麻烦，需要一遍又一遍地写这个方法。可以通过对象的解构函数来简写它。嘿嘿 但是发现习惯性依旧会敲个congsole.log()
2021-01-25 11:31:51
1040
原创 css实现立体旋转
先放效果主要涉及css：perspective,animation直接上代码需要一个父级div包裹一个子元素父元素添加perspective，数值表示元素距离视图的距离，这里写了1000px,效果如下图改成300px之后数值决定景深然后我们给其加上animation动画，2s的重复匀速旋转得到最终的效果...
2021-01-24 22:44:46
908
1
原创 解决React中setState异步问题
setState 只在合成事件和钩子函数中是异步的，在原生事件和 setTimeout 中都是同步的。 合成事件：例如onClick等 原生事件：比如通过addeventListener添加的，dom中的原生事件 先举个栗子以上代码会输出啥嘞？原因：React会将多个setState的调用合并成一个来执行，这意味着当调用setState时，state并不会立即更新。组件渲染的结果是1，并且在控制台中输出了10次0，说明每个循环中，拿到的state仍然是更新之前的。这是
2021-01-23 19:50:35
5939
原创 vue提示Named Route ‘News‘ has a default child route. When navigating to this named route...问题
控制台显示如图解决办法：去除路由配置中父级的name属性原因：因为当某个路由有子路由的时候，父级路由需要一个默认的路由，所以此时父级路由不能定义name属性。
2021-01-19 17:11:10
403
原创 yarn build命令打包后,打开网页显示为空白的问题
问题：运行yarn build之后打开index.html网页显示空白，控制台显示如图：解决：在package.json文件中添加"homepage": "./"
2021-01-17 22:24:25
3536
转载 redux之reducer 为什么必须是纯函数？
Reducer 为什么必须是纯函数？前言本文不讲 react、redux、action、reducer 的具体应用，只是单纯的讲解 reducer 为什么必须是纯函数，本文适合有一定 redux 开发经验的同学。用过 react 的同学对 redux 一定不会陌生，我们知道 redux 可以提供可预测化的状态管理。在一个应用中，所有的 state 都是以一个对象树的形式存在一个单一的 store 中，唯一改变 state 的办法就是触发 action，而 reducer 就是用来编写专门的函数决定每个
2021-01-14 09:47:00
1118
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人