- 博客(20)
- 收藏
- 关注
RSS订阅原创 ant design受控组件树组件封装
LevelTree组件import React, { useEffect, useState } from ‘react’;import { Tree} from ‘antd’;import styles from ‘./index.less’;const { TreeNode } = Tree;interface IProps {dataSource: Array,handleSelected?: any}export default (props: IProps) => {co
2021-04-15 10:11:30
522
react css模块化处理
cssLoaderOptions: {modules: true,getLocalIdent: (context: {resourcePath: string;},_: string,localName: string,) => {// 阻止模块化if (context.resourcePath.includes(‘node_modules’) ||context.resourcePath.includes(‘ant.design.pro.less’) ||context.r
2021-04-01 14:24:50
210
原创 vue service层封装
import axios from ‘axios’;import store from ‘…/store’;import DDMessage from ‘./utils/utils’;import { showErrorContent, showLoading, clearLoading, showToast } from ‘./tip’;import ds from ‘@/defaultSettings’;const { ddPostMessage, ddOnMessage } = DDMess
2021-03-30 10:58:25
693
原创 无限递归
描述：1. 如果有 parentCode参数，说明他的父级元素为值为parentCode值catalogCode值。2. 只有catalogCode， 没有parentCode，说明为最顶级父级元素。思想：从最底层开始寻找上一级// 处理穿梭框数据const doOperateTransforData = data => {const targetData = […data];// 一级目录const levelOneLists = [];data.forEach(el =>
2021-02-25 11:43:04
338
原创 vue与react对比总结
事件对象处理机制后补数据流向后补更新通讯Vue中子组件向父组件传递消息有两种方式：事件和回调函数，但Vue更倾向于使用事件。在React中我们都是使用回调函数的vuex redux在Vuex中，$store被直接注入到了组件实例中，在Redux中，我们每一个组件都需要显示的用connect把需要的props和dispatch连接起来,所以vu ex更加灵活。...
2021-01-30 16:32:52
241
原创 redux、 react-redux、dva理解
状态管理状态管理用来管理通讯复杂的组件树，使得数据流向变为单向，项目维护成本更低。redux:通过createStore创建仓库，保证store数据修改只支持reducers纯函数去修改。 通过combineReducers去将多组件rēducers组装在一起。我们就可以通过dispatch一个action去触发reducers. 但是redux没有提供存在副作用的api。所以使用redux-saga中间件来进行操作异步。在saga（effect）中，我们可以通过takeEvery来监听dispatc
2021-01-30 16:14:39
500
3
原创 https原理
https简述http明文传输，数据不安全，存在在传输过程中被窃听，篡改，以及敏感信息被第三方获取风险。HTTPS 协议会对传输的数据进行加密，而加密过程是使用了非对称加密实现。但其实，HTTPS 在内容传输的加密上使用的是对称加密，非对称加密只作用在证书验证阶段。因为HTTPS在内容传输上采用对称加密，（非对称加密不断加解密会占用大量cpu，效率低）。密钥在传递过程中无法保证安全。所以首先需要验证服务端分发的公钥，是否受三方ca信任，如果验证公钥安全，就会进行数据传输阶段。https一定是安全的吗
2021-01-30 14:51:37
95
原创 react中render props 应用
*render propsrender props 是 react 中实现逻辑复用的一种模式，本质是使用回调函数，父组件写具体业务逻辑，公用组件调用父组件这个业务逻辑函数，达到组件通用性。父组件上述 operateLists为父组件向子组件传递配置。 逻辑为gatherType值为2时，为禁止状态， 其他值为激活状态。gatherType为业务字段，放在公共组件显然不太合理，所以采用render props方式。子组件执行回调函数：例二： 单选框逻辑；子组件：// 将改变后的状态通知
2021-01-29 23:35:32
203
原创 vue与react虚拟dom对比
虚拟dom:同vue和react都采用了虚拟dom算法，以最小化更新真实DOM，从而减小不必要的性能损耗。按颗粒度分为tree diff, component diff, element diff. tree diff 比较同层级dom节点，进行增、删、移操作。如果遇到component， 就会重新tree diff流程。差异dom的更新策略不同react 会自顶向下全diff.vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。1. 在react中，当状态发生改变时，组件
2021-01-29 22:54:29
3120
原创 灵活应用vue中slot
如上图所示，2个tab在内容展示上只有底部不同，我们在抽离组件时只需要底部动态传入组件即可。<组件名 :info=“item”>规格：{{ item.specification }}剂量：{{ item.onceDosage }}{{ item.dosageUnit }}总量：{{ item.totalNum }}{{ item.dosageUnit }}</组件名>组件：...
2021-01-29 20:30:41
112
原创 flex布局中同时存在单行与多行展示的垂直居中问题
如上图所示，在flex布局中，无论某列存在多行可能，我们始终要保持同一行数据高度居中问题。line-height只能解决单行问题，所以我们可以利用css3的transform属性来解决。如果li 元素设为flex, 那么直接包裹子元素会转化为块级元素，和li等高，就无法实现居中， 所以我们多套一层，用span元素直接包裹内容，获取到内容真正高度。就可以transform了。p {position: relative;span {position: absolute;top: 50%;tr.
2021-01-29 17:49:19
867
原创 vue中使用eslint以及prettier
如何保证团队中协同开发时，代码质量与风格保持一致，那么我们就需要使用到eslint以及prettier去格式化代码。安装eslint,prettier，@vue/eslint-config-prettier.配置es lin t有2种方案， 可以在package.json文件中的eslintConfig中配置，也可以在.eslintrc.js中配置。es lin t配置内容module.exports = {root: true,env: {node: true},globa
2021-01-29 17:26:50
1844
原创 vue起别名之后，无法智能提示
添加jsconfig.json文件{“compilerOptions”: {“baseUrl”: “./”,“paths”: {“@/": ["./src/”],},“target”: “ES6”,“module”: “commonjs”,“jsx”: “react”,“allowSyntheticDefaultImports”: true},“exclude”: [“node_modules”]}需要重新打开编辑器，方可生效。...
2021-01-11 14:50:16
831
原创 window.open被拦截解决方案
打开一个空白页面，将url window.location.href = url;如果一旦url没有回调获取到，而打开一个空白页面，会让人很诧异。比较好的方案就是我们去监听是否拿到了url, 一旦拿到了，我们就window.open(url).具体实现：setInterval(() => {if ( this.useRef.current) {window.open(this.useRef.current)}}, 100)请求promise.then(res=> this.use
2020-12-31 17:44:59
383
原创 前端避坑
iframe 上述为嵌入html结构内容。 如果嵌入http地址， http地址如果是通过接口获取，为undefined时，（undefined/ren=1） iframe会按当前域名加载嵌入的页面。 所以会出现当前页面又嵌入着当前页面bug.2**. 重定向**，http://rem/com?url=baidu.com,如上述地址， 如果重定向到url , 而url值有没有添加域名，就会被解析道http://rem/com域名下，实际可能为http://haah?url=b.
2020-12-31 17:30:07
121
原创 前端好用的工具以及插件
vsCode查看git记录： git history(应用商店下载)图片查看器： react-zmage （支持多图片）xml解析 （xml-js）
2020-12-31 17:17:37
114
原创 自定义配置化table，实现同ant-design类似render效果
如何实现像ant-design一样，使用原生table就能实现在render中自定义展示数据呢。我们来定义一个columnconst columns = [{key: ‘name’,title: ‘姓名’,dataIndex: ‘name’,render: (text) => ({text})},{key: ‘age’,title: ‘年龄’,dataIndex: ‘age’,}];render 是一个callBack, 必然是在循环columns时回调rende
2020-12-31 17:12:46
458
1
原创 横向展示折线图
coord: [25, 3] - x 表示值， y表示下表options:options: {tooltip : {trigger: ‘axis’,extraCssText:‘transform: rotate(90deg)’,axisPointer: {type: ‘line’,}},xAxis: {type: ‘value’, //数据position :‘top’, //x 轴的位置【top bottom】nameRotate :-90, //坐标轴名字旋转，角度..
2020-12-31 16:55:40
310
原创 git切换分支
git 切换分支引起git/hook/pre-commit No such File or …解决方案：cd .git/hooksls -alvim pre-commit删除Result=$后面的一行:wq!cd …/…/rm -rf node_modulescpm iok
2020-12-19 11:54:01
169
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人