weixin_50745161的博客

原创 antdv table+form行内校验

字段校验1：<template v-if="resource === 2" slot="writeOffAmount" slot-scope="text, row, index"> <a-form-model-item :prop="'recordPayList.' + index + '.writeOffAmount'" :rules="[ { validator: (rule, value, callback) => {

原创 a-input回填数据为0时无法回填

写项目的时候遇到一些情况输入框为0时，如果涉及到输入框有相关校验，这时候是可以正常提交数据的，但是进行编辑的时候可能会出现值为0的数据无法回填到表单中，有时候可以回填但是为0的输入框会触发相关校验规格，显示是没有数据，这时候就看看接口返回的0是不是数字类型的，如果是就把数字类型的0转为字符串类型的，这时候数据就可以正常回填了，提交表单的时候也可以正常提交了...

原创 antdv tabs闪动

当使用antdv tabs做一些页面切换的时候，会发现有时候tabs的下划线会不停闪动，在页面请求少的时候还不是特别明显，但是页面请求数据多的时候就会特别明显，其实和tabs本身并没有关系，是因为每个tab页有好几个接口请求，每个都会触发render刷新，而tab切换时，active值因为存在state里，因此数据变化也会触发render加载，因此会出现多次render加载，也导致动画多次开始，因此出现闪动。在没确定问题是出在页面rander的时候曾试着降低antdv的版本，但是发现无济于事，后来知道问题

原创 moment 获取相对时间

<a-range-picker :ranges="{ '今天': [moment(), moment()], '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], '最近7天': [moment().subtract(6, 'days'), moment()], '最近30天': [moment().subtract(29, 'days'), moment()], '

原创 如何判断一个元素是否在可视区域内

el.offsetTop - document.documentElement.scrollTop <= viewPortHeightviewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离viewPortHeight：可视区高度...

原创 axios、fetch 和 ajax 等的区别详解

ajax浏览器通过XMLHttpRequest 对象进行 http 通信。　　传统Ajax 指的是 XMLHttpRequest（XHR），最早出现的向后端发送请求的技术，隶属于原始 js 中， 核心使用 XMLHttpRequest 对象，多个请求之间如果有先后关系的话，就会出现 回调地狱是XMLHTTPRequest的一个实例；只有当状态为200或者304时才会请求成功；axiosaxios 是一个基于 Promise 的 http请求库，可以用在浏览器和 node.js 中，本质上也是对原

原创 vue组件通信方式

整理vue中8种常规的通信方案通过 props 传递通过 $emit 触发自定义事件使用 refEventBusparent或root通过共同祖辈parent或者parent或者parent或者root搭建通信侨联attrs 与 listeners适用场景：祖先传递数据给子孙Provide 与 Inject在祖先组件定义provide属性，返回传递的值在后代组件通过inject接收组件传递过来的值Vuex...

原创 单页应用与多页应用的区别

单页应用优缺点(js渲染)优点：具有桌面应用的即时性、网站的可移植性和可访问性用户体验好、快，内容的改变不需要重新加载整个页面良好的前后端分离，分工更明确页面切换快缺点：不利于搜索引擎的抓取首次渲染速度相对较慢单页应用优缺点(返回html )优点：首屏时间快，seo效果好缺点：页面切换慢...

原创 防抖和节流

作用：限制函数的执行次数防抖：通过setTimeout的方式，在一定时间内，将多次触发变成一次出发window.addEventListener('scroll',function(){ var timer;//使用闭包，缓存变量 return function(){ if(timer) clearTimeout(timer); timer = setTimeout(function(){ c

原创 2021-7 前端面试总结

本人基本情况：工作经验三年，面试中高级前端闭包原型/原型链防抖和节流[最好能说出代码]less/scss的区别，他们是如何转译成css的webpack的基本配置（基本配置要知道，loader、plugin，了解原理加分，还有一些优化之类的）语义化是什么，作用是什么深拷贝和浅拷贝的区别[最好能说出代码是如何实现的，JSON.parse(JSON.stringty()的缺点[无法实现function,date,正则等的copy])]强缓存和协商缓存const 命名的对象/数组类型为什么能更

原创 vue组件名称的作用

vue组件有个name 属性，那么这个name到底有什么作用呢官方解答是这样的看的似懂非懂在实际的项目中有什么作用呢1.当项目使用keep-alive时，可搭配组件name进行缓存过滤举个例子：我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载export default { name:'Detail'}，mounted(){ this.getInfo();}，methods:{ getInfo(){ axios.ge

原创 react+umi 使用本地图片做菜单icon

1.看文档有这么一段const IconMap = { smile: <SmileOutlined />, heart: <HeartOutlined />,};const defaultMenus = [ { path: '/', name: 'welcome', icon: 'smile', children: [ { path: '/welcome', name: 'one',

原创 安装了包还提示Could not find a declaration file for module

如图所示，明明安装了react-copy-to-clipboard，在引用的时候还是提示Could not find a declaration file for module ‘react-copy-to-clipboard’.解决办法：如果是在ts环境下，就看一下有没有ts版本的包npm install “@types/***”我这里是 npm install “@types/react-copy-to-clipboard”然后就不报错了...

原创 Mac打开txt文件

将txt文件拖动到这里就可以啦

原创 antd step自定义样式

<Steps current={adviceInfo.Steps.length - 1} direction="vertical"> { adviceInfo.Steps && adviceInfo.Steps.map((item, index) => { return <Step title={item.name} description={<div st

原创 react+ umi 使用iconfont,实现更改图标颜色

1.线上引用，这种无法更改图标颜色import { createFromIconfontCN } from '@ant-design/icons'const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_2242890_ffxnfeb837a.js'});2.下载到本地将下载下来的文件夹放到assets文件夹下，自己命名一个名称将iconfont.js文件提取出来放到public文件夹

原创 vue项目启动报错 This dependency was not found: * core-js/modules/es.object.to-string in ./src/router.js

Vue 3.0.4更换 core-js版本为 core-js@3.6.5重新启动问题解决

原创 TypeError:Cannot read property ‘upgrade‘ of undefined

因为vue.config.js设置了devServer proxy target为空，将target设置不为空就可以了

原创 git 第一次提交代码

git init //把这个目录变成Git可以管理的仓库git add . //不但可以跟单一文件，还可以跟通配符，更可以跟目录。一个点就把当前目录下所有未追踪的文件全部add了 git commit -m "Initial commit" //把文件提交到仓库，双引号内是提交注释git remote add origin http://192.168.3.165/project/simplechain/simplechain-frontend.git //关联远程仓库 git push -u or

原创 qiankun微服务子系统对接文档

Vue子系统main.js 入口文件修改let instance = null​function render(props = {}) { const { container } = props instance = new Vue({ // el: '#app', router, store, render: h => h(App) }).$mount(container ? container.querySelector('#app') :

原创 Egg

与社区框架的差异Express 是 Node.js 社区广泛使用的框架，简单且扩展性强，非常适合做个人项目。但框架本身缺少约定，标准的 MVC 模型会有各种千奇百怪的写法。Egg 按照约定进行开发，奉行『约定优于配置』，团队协作成本低。Sails 是和 Egg 一样奉行『约定优于配置』的框架，扩展性也非常好。但是相比 Egg，Sails 支持 Blueprint REST API、WaterLine 这样可扩展的 ORM、前端集成、WebSocket 等，但这些功能都是由 Sails 提供的。而 Egg

原创 webpack入门

123edgcheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。

原创 Object.freeze()

JavaScript 标准内置对象Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。被冻结对象自身的所有属性都不可能以任何方式被修改。任何修改尝试都会失败，无论是静默地还是通过抛出TypeError异常（最常见但不仅限于strict mod

原创 vue component动态组件

is用来确定显示的组件 :is=‘组件名称’

原创 vue-grid-layout

注意事项：第二行y数值不能小于对应位置第一行h值的大小，否则布局会覆盖乱掉根据colNum的值合理设置每一行每个模块w的大小

原创 ping github.com 丢包100%

转载 Git常用命令及方法

本地分支关联远程git branch --set-upstream-to=origin/分支名 分支名代码库修改密码后push 不上怎么办// 重新输入密码git config --system --unset credential.helper // 密码存储同步git config --global credential.helper store一、新建代码库# 在当前目录新建一个Git代码库$ git init # 新建一个目录，将其初始化为Git代码库$ git ini

原创 node-sass缓慢

原因：代理出现了问题，删除之即可解决方案：npm config rm proxy npm config rm https-proxy删除之后一切ok对node-sass镜像源进行设置yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass或npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass...

原创 yarn报错error An unexpected

网不好！ yarn报错error An unexpected error occurred: "https://registry.yarnpkg.com…connect ETIMEDOUT…这是由于资源地址请求超时造成的，更换一下请求地址即可。npmnpm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --globalya

原创 判断数据类型

typeof对对象类型，除了函数返回function，其他都返回object。但我们开发中数组肯定是要返回array类型的，所以typeof对对象类型来说并不是很适用。判断对象类型一般用instanceof:var obj = {}var arr = []var fun = () => {}typeof obj // 'object'typeof arr // 'object'typeof fun // 'function'obj instanceof Object // truear

转载 vue create 和vue init的区别

vue create：是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页链接vue init： 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，

原创 使用Vue脚手架构建项目时Runtime + Compiler和Runtime-only的区别

在使用vue-cli脚手架搭建项目时会出现一个选项Vue build，有两个选项：Runtime + Compiler: recommended for most users运行时+编译器:推荐给大多数用户Runtime+Compiler字面意思为运行时+编译器，是不在打包时进行编译的，是在客户端（浏览器）运行时进行编译的，所以要使用带编译器的完整版本Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specif