【UMI】路由懒加载
摘要：原生的路由加载是在打包的时候,将所有的组件都打包到一个文件中,然后在首次进入页面的时候就会加载这个包,相当于全量包.接着在你点击路由时去查找相关组件.网络压力全在首屏加载的时候. 路由懒加载:分包,分请求.先分不同的包,然后根据路由从后端请求.加载压力分到每一次路由请求. 在umi中使用路由懒加载
阅读全文
posted @
2021-12-27 17:30
Shyno
阅读(1964)
推荐(0) 编辑
【antd】form表单如何校验区间值
摘要：需求:我们需要在表单中填写两个数值,一个最大值一个最小值,但是我们需要在填写的时候去校验最大值和最小值的关系,最大值不能小于最小值,最小值不能大于最大值.如下 解决方案: 1.rules中配置validator 2.通过form.getFieldValue()拿到另一个值进行对比 //最小值校验 r
阅读全文
posted @
2021-12-23 18:01
Shyno
阅读(1848)
推荐(0) 编辑
【antd】form表单默认值设置
摘要：问题: 在antd的form表单的api里面有个"initialValues"可以设置默认值.但是表单没有更新 <Form name="test" form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} initialValues={
阅读全文
posted @
2021-11-01 13:44
Shyno
阅读(5244)
推荐(0) 编辑
数组去重(包含复杂数据类型数组)
摘要：基础数据类型数组 现有，一个数组，其中有若干元素，请将其中重复的元素去除 let arr = [1,1,2,3,4,4,5,6,6] 方法1：唯一添加法 声明一个新数组，然后将原来的数组一个个加入到新数组（新数组没有相同值得情况），关键是需要一个isClude去判断是否newArr是否已经包含了此元
阅读全文
posted @
2021-10-22 17:38
Shyno
阅读(622)
推荐(0) 编辑
如何自定义容器组件
摘要：假如我现在想自定义一个类似Form.Item的组件,可以让其作为容器组件,承包一部分逻辑.然后我包裹着的组件还能正常显示. 方案:关键函数React.cloneElement或者React.createElement.如果是直接填入组件而并非动态生成的,主要推荐React.cloneElement,
阅读全文
posted @
2021-08-30 15:40
Shyno
阅读(108)
推荐(0) 编辑
【antd】如何自定义antd组件form表单中Form.Item里的内容组件
摘要：需求:现有一个form表单,但是其中一个元素比较复杂,并不是简单的输入框或者下拉框之类的.但是我又希望能通过form.validateFields().then()去获得它的值,就不需要在当前页面写大量相关的逻辑了. 比如:如图为一个可以增删改的input列表 方案:将其封装成自动绑定值的组件 (1
阅读全文
posted @
2021-08-30 15:12
Shyno
阅读(9761)
推荐(1) 编辑
【antd】表单-单页面多表单提交功能
摘要：需求:多个表单,我想一起校验一起提交,比如这里的上下两个部分为两个组件,两个form表单 功能点:1.所有报表需通过校验 2.通过校验后提交并带入所有参数 核心问题:form表单的validateFields()返回的是一个promise对象,也就是说他是一个异步方法,对标的的校验必定有异步问题.而
阅读全文
posted @
2021-08-27 16:18
Shyno
阅读(2190)
推荐(0) 编辑
子组件dispatch导致其他页面刷新问题解决
摘要：问题: 现在有一个页面,包含"项目基本要素"和"供应链管控要素"多个组件,其中一个组件有表单级联,通过产品类型的不同选取去调接口获得产品名称的下拉 调接口是通过dispatch实现的. 理想状态:当我调用这个接口时只改变另一个相关下拉框的数据,其他的以及其他同级组件的值不变. 实际结果:当我调用后,
阅读全文
posted @
2021-08-25 18:46
Shyno
阅读(424)
推荐(0) 编辑
antd动态的表格合并(包含排序功能)
摘要：主要是两个步骤, 1.处理接口返回数据,给其添加两个属性,一个是合并行数(列数),一个是当前数据的序号 2.在columns结合antd官网的处理方法合并表格 3.尽可能得减少计算量 数据处理函数 /** * 表单表头合并 * @param list 需要遍历的数组 * @param key 合并依
阅读全文
posted @
2021-08-20 18:29
Shyno
阅读(1028)
推荐(0) 编辑
react的diff算法与antd中switch组件不更新问题
摘要：问题描述: 现在有个需求,现有一个列表table,里面的数据有启用的也有关闭的,switch组件会根据数据状态展示,同时进行排序,启用数据在前面,未启用的在后面.如图 然后现在需要操作,假如我将第四条数据'的撒管道施工'进行启用,调用启用接口,改变switch组件状态,并重新调用列表查询接口,理想效
阅读全文
posted @
2021-07-30 10:35
Shyno
阅读(876)
推荐(0) 编辑
前端常用语法糖或便利的方法函数
摘要：方法或函数 1.includes():返回布尔值，表示是否找到了参数字符串 (1)string.includes const str= 'shyno大帅逼' const str1 = '大帅逼' console.log('includes',str.includes(str1)) //true (2
阅读全文
posted @
2021-07-02 18:13
Shyno
阅读(440)
推荐(1) 编辑
面向对象编程(2)-类与原型
摘要：1.用函数代替对象储存变量 变量 const obj1 = { a: 1, b: ['1', '2'], c: function () { return 'name' } } 函数:实际上最终还是放在对象里 const getObj=()=>{ return { a: 1, b: ['1', '2'
阅读全文
posted @
2021-03-17 19:27
Shyno
阅读(133)
推荐(0) 编辑
vue+element项目中动态表格合并
摘要：需求:elementui里的table虽然有合并函数(:span-method),单基本都是设置固定值合并.现在有一个树型结构的数据,要求我们将里面的某个list和其他属性一起展开展示,并且list中的长度不确定.如下图 数据结构: 效果图: 方案: 1.数据平铺,我这里只做一层嵌套的.多层的可递归
阅读全文
posted @
2020-07-08 15:45
Shyno
阅读(1940)
推荐(0) 编辑
内容可滑动,隐藏滚动条
摘要：实现方案 1.一个父盒子,充当遮罩层,挡住滚动条 2.滚动区域,子盒子.可滚动,比父盒子略宽.相差的部分就是滚动条宽度 <div class="caver" style="position:fixed;left:20px;bottom:40px;z-index:1000;width:320px;he
阅读全文
posted @
2020-06-03 13:34
Shyno
阅读(466)
推荐(0) 编辑
图片压缩并预览
摘要：需求:将图片压缩之后再进行预览和上传 一、大致的html和css html <img id="img" /> <input type="file" id="file" multiple="multiple" onchange="handleFile()"> css #img{ display: bl
阅读全文
posted @
2020-04-22 11:27
Shyno
阅读(291)
推荐(0) 编辑
vue在某页面监听键盘输入事件
摘要：需求:在某一网页,通过上下左右键控制一些操作 实现: 1.基本代码: 因为没有绑定特定的元素.所以我们将事件绑定到document上. //当前页面监视键盘输入 document.onkeydown = function(e) { console.log('键盘输入了') //事件对象兼容 let
阅读全文
posted @
2019-09-21 10:28
Shyno
阅读(18487)
推荐(0) 编辑
