- 博客(63)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 微前端umi + qiankun从搭建到部署的实践
近期在项目中需要使用qiankun实现微前端的微服务化，分享记录一下搭建的过程以及遇到的问题项目框架整体为umi搭建的主应用，两个子应用均为create-react-app搭建，进入系统，菜单main为主应用页面，点击菜单sub-react切换第一个子应用，菜单sec-sub切换第二个子应用，项目根目录下是主应用,child文件夹下为子应用sub-react，sec-sub，搭建后的初始目录结构如下：主应用配置非umi搭建主应用主应用负责导航的渲染和登录态的下发，为子应用提供一个挂载的容器
2021-07-01 10:26:37
4125
1
原创 解决video更多选项按钮点击无反应以及操控video标签的控制按钮
在一个项目中使用原生video时， 点击右下侧 更多按钮时无反应，找了很多文章没有发现类似问题的解决方案后面就想把更多按钮隐藏掉，但是只能找到隐藏 全屏按钮 和 画中画的隐藏方式 后面找到了可以通过shadow DOM 看到被隐藏的 DOM ，发现更多选项按钮其实是被点击了，但是弹出的菜单定位发生了问题，导致无法看到，如下图把bottom改为0，更多选项的菜单就会出现，但是我没有找到修改样式的方法，只能去掉视频的下载和画中画功能，让更多选项按钮消失下面是其他按钮的样式操作以及shadow DOMs
2021-05-07 17:28:21
4838
3
原创 echarts饼图放大指定数据
最近有这样一个需求，在饼图中要求指定的一块数据放大，通过查找类似文章，可以通过echart的API echartsInstance.dispatchAction 来触发图表行为，因为是在react中引入的echarts-for-react，所以又翻找了echarts-for-react的API，可以通过绑定Ref来实现使用echarts的API let echarts_instance = !this.echarts_react.current && this.
2021-01-12 15:25:07
3721
2
原创 antd upload 图片上传前压缩
onChange = (files, type, index) => { const newItem = _.cloneDeep(this.state.imgData); if (type === "add") { const file = [...files].pop().file; const newitem = [...files].pop(); // 多次上传之前的数据 const handle = this.handleUPdata;..
2020-11-05 11:35:42
2548
2
原创 antd 中 Upload 上传图片宽高限制以及上传文件的格式限制
一、上传图片的宽高限制在组件Upload中有一个beforeUpload的API，是文件上传之前的钩子函数，我们需要在这个API中做限制 beforeUpload: file => { this.handleFilebeforeUpload(file) .then(() => { message.success(`上传成功`); }) .catch(() => { Modal.error({
2020-10-28 16:36:47
10398
转载 ES2020新特性
前言ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样包含大量新特性。但是，也添加了许多有趣且有用的特性。本文以简单的代码示例来介绍 ES2020新特性。这样，你可以很快理解这些新功能，而不需要多么复杂的解释。可选链操作符（Optional Chaining）可选链 可让我们在查询具有多个层级的对象时，不再需要进行冗余的各种前置校验。日常开发中，当需要访问嵌套在对象内部好几层的属性时，可能就会得到臭名昭著的错误Uncaught TypeEr
2020-09-21 17:59:50
252
转载 7个令人兴奋的 JavaScript 新特性
前言一个ECMAScript标准的制作过程，包含了Stage 0到Stage 4 五个阶段，每个阶段提交至下一阶段都需要TC39审批通过。本文介绍这些新特性处于Stage 3 或者Stage 4 阶段，这意味着应该很快在浏览器和其他引擎中支持这些特性。一、类的私有变量最新提案之一是在类中添加私有变量的方法。我们将使用 # 符号表示类的私有变量。这样就不需要使用闭包来隐藏不想暴露给外界的私有变量。class Counter { #x = 0; #increment() { this.
2020-09-21 17:25:12
430
原创 react项目引用Echarts中的词云图
最近在react项目中遇到词云图，在echarts中关于词云图的demo较少，以下为实现代码：import React, { Component } from "react";import ReactEcharts from "echarts-for-react";import { Row, Col } from "antd";import * as echarts from "echarts";import "echarts-wordcloud";export default class .
2020-08-24 19:08:15
2900
3
原创 antd中头像上传前编辑antd-img-crop插件弹出modal没有样式的问题
在antd pro项目中,有一个头像上传前编辑的需求,在antd组件Upload中有一个上传前编辑的demo,用到一个antd-img-crop插件,用法很简单,只需要包裹Upload标签即可,具体API可以参考antd-img-crop的github地址https://github.com/nanxiaobei/antd-img-crop在使用过程中发现编辑弹出的modal框没有样式,查阅antd-img-crop的github文档,发现对样式有这样的描述样式为防止覆盖自定义 antd 样式，
2020-08-18 10:47:51
1812
原创 快速搞懂js中的宏任务与微任务
众所周知js是单线程，但js是可以执行同步和异步任务的，同步的任务众人皆知是按照顺序去执行的；而异步任务的执行，是有一个优先级的顺序的，包括了 宏任务（macrotasks）和 微任务(microtasks)宏任务:整体代码script setTimeout, setInterval, setImmediate, I/O, UI rendering微任务: Promises.(then catch finally), process.nextTick, MutationObserver宏任务和微任
2020-07-13 15:33:03
1163
原创 React 中的 lazy 和 suspense
我们通过 webpack 或是 rollup 这样工具可以将项目多个 JavaScript 文件最终打包成为一个 bundle 文件。加载一个 js 文件速度要快于加载多个 JavaScript 文件。不过随着 bundle 的体积不断增大，最终造成首次加载时间过长，还有就是加载一些不必要的 javascript 文件。所以我们想是否可以对 bundle 文件进行拆分来进行按需加载，就此需求 webpack 和 rollup 都给出自己解决方案，支持代码拆分，也就是 code splitting。在 r
2020-07-02 09:59:11
400
1
原创 antd中日期选择框DatePicker不可选择日期的前后限制
disabledDate = (current: any) => { const {currentData} = this.state console.log("currentcurrent", current) // return current < moment(currentData.startDate)|| current > moment(currentData.endDate) return current ...
2020-06-28 16:52:07
3133
原创 typescript中的接口（interface）
在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implements）。TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。一个简单的例子：//定义接口interface Person{ name: string, age: number, // 必选属性 job?: string, //可选属性，表示不
2020-06-03 20:03:25
387
原创 antd pro 项目Modal中嵌套Form表单,触发表单验证并获取表单提交的数据
antd pro项目中遇到弹框嵌套表单的需求,并获取其中的数据,在官方提供的Form表单API中有一个出发表单验证的方法validateFields 触发表单验证类型: (nameList?: NamePath[]) => Promise如下为项目中使用//此为Modal点击确定以后的回调const okHandle = async () => { const fieldsValue = await form.validateFields(); //fieldsVa.
2020-06-03 19:36:51
6564
5
原创 antd pro后台管理项目中form表单的动态添加问题
在做的一个基于antd pro开发的一个后台管理系统中遇到这样一个需求,员工档案部分的地址信息,紧急联系人,教育经历需要编辑添加多段,因此遇到了antd中的form表单里面添加多个字段的问题,具体需求以及实现如下:经过查阅官方文档,可以通过Form.List,以及内部提供的API来实现下面附上源码 <Form {...layout} form={form} name={props.titleid} onFinish={onF
2020-06-03 09:26:51
2219
1
原创 在博客右下角设置透明卡通小美女,附上源码
在逛博客园的时候,发现有些博客的右下角会出现一个透明的卡通小美女,并且头会跟着鼠标移动,鼠标点击之后也会有互动,研究了一下,想要实现其实并不难,下面附上源码,<div id="live2d-widget"><canvas id="live2dcanvas" width="300" height="600" style="position: fixed;opacity: 0.7...
2020-05-06 20:26:33
1616
3
原创 记录在项目中使用装饰器的写法实现调用高阶组件VS code报错问题
解决办法打开vs code 点击左上角文件==>首选项==>设置然后搜索experimentalDecorators把上图箭头所指位置打上对勾即可.
2020-04-23 21:17:23
258
原创 六步快速安装React Devtools调试工具
去GitHub上下载react-devtools 到桌面https://github.com/facebook/react-devtools/tree/v3打开cmd,切换路径到解压过后的react-devtools-3 文件使用npm安装依赖npm --registry https://registry.npm.taobao.org install下图表示成功安装依赖...
2020-04-22 22:01:29
450
原创 vue中实现一个评分星级功能
不多说直接上代码星星是使用的iconfont图标<div> <ul> <li v-for='item in list' > <span class="iconfont icon-start-copy " :style="{color:item.isred...
2020-04-22 18:47:17
1904
原创 vue中绑定自定义属性并获得属性的值
语法： data-属性<ul> <li v-for='item in list' > <span :data-index="item.id" @onclick ="cools($evevt)"></span> </li></ul> methods:{ cools(ev...
2020-04-22 18:34:20
3477
1
原创 react中关于render渲染次数的性能优化
在普通组件里面可以使用shouldComponentUpdate钩子函数提升react性能。 （nextProps,nextState）在内部可以判断组件外部接受的最新属性与之前的属性是否一致，从而约束render刷新的时机。只要结果返回true，render就会立马执行渲染更新，返回false就代表render不会执行。可以使用PureComponent来优化性能。内部机制是通...
2020-04-18 10:14:02
1929
原创 ES6中六种常用的传出调用方式
第一种// const a = 1;// const b = 2// export default {// a,b// }调用 ===========> 使用// import a from “./a.js” ===> a ==> {a:1,b:2}第二种// export const a = 1;//...
2020-04-16 21:40:06
555
1
原创 在Vue-cli中得xxx.vue文件中快速生成组件模板
在我们的Vue-cli项目中会频繁的创建xxx.vue文件,为了加快我们的编写速度可以快速生成组件模板如下图在VScode中点击左上角的文件文件–> 首选项 --> 用户代码片段然后搜索 vue.json 回车下一步, 在vue.json 文件中插入如下代码"Print to console": { "prefix": "vue", "body": [ "<...
2020-04-08 14:15:53
1578
原创 如何在Vue-cli中关闭ESLint以及关闭部分ESLint验证
ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码.关闭eslint 如果当前项目使用了eslint，并且需要关闭。需要创建vue.config.js文件，采用如下代码：module.exports = { devServer: { overlay: { ...
2020-04-08 13:34:19
1858
原创 哀悼日很多网站都变成了灰色，这是怎么做到的？
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院发布公告，决定2020年4月4日举行全国性哀悼活动。全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。而在哀悼日当天,许多网站将自己的整个首页变成了灰色,表达深切哀悼.可能有许多小伙伴好奇这是怎样做到的.其实很简单,前端工程师们只需要一行代码就可以解决,只需给htm增加一行代码就可以了// html{// -w...
2020-04-07 21:03:28
3447
原创 CentOS7上Mongodb安装、卸载
一、安装1、配置yum管理包1）、在路径/etc/yum.repos.d/下创建文件mongodb-org-3.4.repocd /etc/yum.repos.d/touch mongodb-org-3.4.repo2）、在文件mongodb-org-3.4.repo中写入如下内容[mongodb-org-3.4]name=MongoDB Repositorybaseurl=htt...
2020-03-29 23:17:54
764
原创 CentOS 7 下安装 Nginx
安装所需环境Nginx 是 C语言 开发，建议在 Linux 上运行，当然，也可以安装 Windows 版本，本篇则使用 CentOS 7 作为安装环境。一. gcc 安装安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要安装：yum install gcc-c++二. PCRE pcre-devel 安装PCRE(Perl Com...
2020-03-29 23:10:53
114
原创 SPA vs MPA
现在的应用都流行SPA应用（single page application）传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候受网络、性能影响，浏览器会出现不定时间的空白界面，用户体验不好单页面应用就是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好。...
2020-03-29 22:27:43
256
原创 Vue中的路由守卫
路由守卫在某些情况下，当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化全局路由钩子：//进入到某个路由组件之前router.beforeEach((to, from, next) => { //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了 console.log('beforeEach') conso...
2020-03-29 22:23:14
181
原创 Vue中的路由模式
路由模式为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于 ——— 改变视图的同时不会向后端发出请求。路由有两种模式：hash、history，默认会使用hash模式，但是如果url里不想出现丑陋hash值，在new VueRouter的时候配置mode值为history来改变路由模式，本质使用H5的histroy.pushSta...
2020-03-29 22:20:57
786
1
原创 Vue中的命名路由
命名路由我们可以给路由对象配置name属性，这样的话，我们在跳转的时候直接写name:main就会快速的找到此name属性对应的路由，不需要写大量的urlpath路径了<router-link v-for="nav in navs" :key="nav.id" :to="{name:nav.name}" >{{nav.title}}</rou...
2020-03-29 22:09:16
527
原创 Vue中路由懒加载
懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。非按需加载则会把所有的路由组件块的js包打在一起。当业务包很大的时候建议用路由的按需加载（懒加载...
2020-03-29 22:06:44
301
原创 Vue中简单的路由实现
简单路由实现cnpm install vue-router -S or yarn add vue-router -S引入vue-router，如果是在脚手架中，引入VueRouter之后，需要通过Vue.use来注册插件router/index.js文件 import Vue from 'vue' import Router from 'vue-rout...
2020-03-29 22:05:54
425
原创 单行文本溢出显示省略号
width:value;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;#content{width: 200px;border: 1px black solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} <div id=...
2020-03-26 22:00:15
133
原创 最最最全的清除浮动方法
如何清除浮动？上下排列：clear属性，表示清除浮动的，left、right、both嵌套排列：固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。display : inline-block ...
2020-03-26 21:55:46
243
原创 移动端布局以及rem的适配
移动端布局方式与设计图现有的布局方式：固定布局，每一个元素都是固定的尺寸，内容区域居中在浏览器中间内容区域的尺寸：980,1000,1100,1200响应式布局，利用媒体查询来实现不同尺寸的浏览器显示结构不一样 @media 根据浏览器分辨率大小进行适配一般会有三张设计图，PC,平板,手机自适应布局，属于响应式里的一种，利用rem、百分比、vwvh等布局单位来实现设计...
2020-03-26 21:39:50
429
原创 详细的HTTP协议讲解
概念HTTP协议（HyperText Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传输协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。HTTP是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。 在Internet上的Web...
2020-03-25 21:18:38
685
原创 JS中的原型与原型链
什么是原型？原型链原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链也可以用三句话描述一下下面根据代码解释一下js中的原型...
2020-03-25 20:51:41
174
原创 Vue中的自定义指令
自定义指令介绍 directives - 对普通 DOM 元素进行底层操作(1) 自定义指令注册当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：// 注册一个全局自定义指令 `v-focus`Vue.directive('foc...
2020-03-25 15:38:04
301
原创 Vue组件&实例的生命周期
每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载到，只是一个空壳，无法访问到数据和真实的dom，一般不做操作挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里...
2020-03-24 22:20:03
234
redux devtools.rar 2.17.0
2020-12-10
新版 React Developer Tools 4.10.0
2020-12-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人