Y_G_G-优快云博客

原创 Antd Upload封装（React）

封装的功能包括：文件类型检查文件大小检查文件数量检查文件预览供参考import React, { ReactNode, useState } from 'react';import { Upload, Button, Modal, message } from 'antd';import { UploadProps } from 'antd/lib/upload/Upload';import { UploadChangeParam } from 'antd/lib/upload';i

2021-03-16 10:45:16 776

原创 Upload svg

我真的好蠢…Antd Upload 上传jpg png等都没问题，svg就不行，只需要后端改一下 content-type: image/svg+xml 就可以了…明明知道svg的type是image/svg+xml 我还让人家改成text/xml，我怕不是个傻子吧

2021-03-16 10:26:59 501

原创 flex内容溢出

参考资料：Flex Basis与Width的区别【CSS】flex-basis 文本溢出问题flex溢出的根本原因是 flex-basis解决方式：设置width属性，一般设置为width: 0min-width来限制，一般也是min-width: 0;设置overflow:hidden为什么？设置width属性，只要width小于剩余空间即可，一般设置为width: 0;这样可百分之百确定小于剩余空间；不设置width但用min-width来限制也是一样的，既然 flex

2020-09-04 16:10:58 2232

原创 Antd Upload上传图片nginx报错405

antd Uploadantd Upload listType 3个类型一个项目把坑踩全了…之前使用Upload 是用 action 属性，指定上传地址。现在是在form表单里面使用Upload，不配置action属性，直接formData提交。问题：本地调试没问题，打包测试，nginx转发报错405 not allowed查到原因是 nginx禁止用post访问静态资源解决：问：哎上传图片怎么会访问静态资源呢？？？答：默认的上传行为…Upload提供【 customRe

2020-08-19 17:40:48 2838 2

原创 react-router 跳转前确认Prompt使用

需求页面切换的时候，会遇到这样的需求：切换时需要判断内容区域编辑后是否保存了，若没保存，则弹出提示框，提示保存。官网示例react router中的Prompt可以实现这样的功能。Prompt示例Prompt文档/** when:是否启用 *//** message:string | func */// 示例1<Prompt when={formIsHalfFilledOut} message="Are you sure you want to leave?"/&gt

2020-08-19 15:37:27 4022

原创小程序将字符串生成二维码

最开始用 weapp-qrcode这个库，canvas绘制。但是华为很多手机会存在画不出来的情况， issues里面也有人提出：【在华为p20上面试了一下，定位到 canvas API 问题，需要微信修复。】有人提出了修复方法：【暂时在小程序论坛上找到了临时解决方案，如果判断当前手机品牌为HUAWEI或者HONER时，延时2秒执行画二维码的操作，可以解决这个问题。】然后直接换了库wx-...

2019-11-28 16:48:40 888

原创 css实现4个角有边框

// html react JSX <div className={styles.intro} style={{background: 'rgba(255,255,255,'+ opacity+')'}}> <span className={styles.lpArrow}></span> <span cl...

2019-10-14 17:12:24 3239

原创 H5 前置摄像头图片压缩上传

最近接到一个需求 - 微信公众号里面嵌入人脸识别。想着似乎还挺复杂的。结果需求说就是采集图片不用识别。我就emmm叫个鬼的人脸识别…所以如此贴近当代科技生活的AI识别，就变成了图片采集。当然问题也就简化了。调起前置摄像头图片压缩上传调起前置摄像头这个问题网上有很多，大致是input 和 navigator.getUserMedia 这两种。我选择的第一种。如果大家有更...

2019-09-20 15:18:06 358

原创微信小程序省市区联动

背景微信的省市区联动比支付宝简单。picker完全支持。实现效果图数据结构citys - 城市 areas - 区当然这是处理之后的，行政区划树不长这样子。[{ code:1, name:'北京', areas:[ { code: 101, name:'朝阳区' }, { ...

2019-09-12 18:49:33 1427

原创支付宝小程序省市区三级联动

背景最近做的项目有省市区联动。不仅要传name还要把对应的id发给后台。支付宝提供的级联有 my.multiLevelSelect 和picker并不能满足需求。picker 组件不支持多列选择，所以使用 picker-view组件和Popup配合使用。实现效果图数据结构citys - 城市 areas - 区当然这是处理之后的，行政区划树不长这样子。[{ ...

2019-09-12 16:11:02 2843 6

原创 Number一些方法的探索

toFixed()表示Number 四舍五入为指定小数位数的数字。直到前几天看到书里面写的，才知道为什么不行：. 运算符是一个有效的字符，优先识别为数字字符的一部分所以2.toFixed(2)会报错。Number.EPSILON 【ES6】表示 1 与Number可表示的大于 1 的最小的浮点数之间的差值。实际上是 JavaScript 能够表示的最小精度。误差...

2019-08-23 17:53:51 202

原创微信小程序踩坑（与支付宝小程序的异）

前段时间刚写了一个支付宝小程序，然后又说再写一遍微信emmm，心中os：玛德不早说，又得再来一遍。然后用微信小程序重写了一遍。中间稍微走了点弯路，但二者基本一致。可能先入为主了，我更喜欢支付宝小程序的文档，简单明了。微信小程序的文档，看一眼一箩筐话… 可能我脑子有问题吧，有时候某些api都翻不到，也不知道给放哪了下面是我踩得坑，原生input textarea就不说了，谁让人家是原生的…微...

2019-08-16 18:23:37 796

原创 nginx 重定向地址

这里解决的重定向地址是从a.html 到 b.html 不是其他的重定向！！！我们抛开一切鬼理论，鬼知识点，就单纯地解决这个问题。rewrite /login.jsp /login.html last; 就这么简单！从/login.jsp页面跳转到login.html页面。server { listen 9392; server_name ...

2019-04-12 16:55:08 738

原创深拷贝和浅拷贝

之前写代码的时候，误用了浅拷贝，导致数据出错，特此进行小总结，具体的细节文中没有提及。浅拷贝是拷贝应用，拷贝后的对象和之前的指向同一引用，会相互影响深拷贝是在堆中重新分配内存，前后两个是不同的对象，相互不影响浅拷贝有两种，1是拷贝引用，2是拷贝实例，但其属性拷贝引用。第一种情况：var a = [{c:1}, {d:2}];var b = a;console.log(a ===...

2019-04-02 20:00:55 167

原创深入js类型转换

之前写过js类型转换，https://blog.youkuaiyun.com/Y_G_G/article/details/78031510 是比较详细的规则，可能后面用得多了，现在并不太注意这些。最近看了一篇文章，https://juejin.im/entry/58beb514128fe1006456df73 让我更深刻的认识了类型转换，尤其是对象类型转换.，以及问题的本质。个人觉得，记住这些具体的规则...

2019-03-05 23:51:27 261

转载内存空间详细图解

转自 https://www.jianshu.com/p/996671d4dcc4这位博主的前端进阶系列很不错，推荐大家看一遍内存空间详细图解var a = 20;var b = 'abc';var c = true;var d = { m: 20 }因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念，很容易被大家忽视。特别是...

2019-02-21 23:18:19 1317

转载 BFC是什么？

转载 http://blog.sina.com.cn/s/blog_877284510101jo5d.htmlBFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境...

2019-02-18 16:41:18 1324

原创令人窒息的垂直居中

平时工作中，经常会遇到各种居中的问题。水平居中，给父元素设置 text-align:center，就可以实现，但是垂直居中 emmm…今天来总结我用过的垂直居中：针对固定宽高元素&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="U

2019-01-07 16:49:55 200

原创纪念一个很奇怪的报错 Blocked a frame orgin '**' from accessing a cross-orgin frame

问题描述：某个页面列表中有一个查看地图的按钮开发环境中没有问题生产环境中接口可以调通，但是报跨域的错误stack-overflow 上也看了很多，但没能解决，无意间看到返回结果返回了一个空数组 []，然后我就让后台哥哥把返回格式标准化猜想:这个应该是 dva 中的redux-saga 的底层实现问题，直接使用ajax 是可以的，主要通过 yield call(callbac...

2018-12-29 18:25:49 1920

原创关于scrollTop的理解以及实现无缝滚动

目标：实现数据的自动滚动【无缝滚动】scrollTop是什么？实现无缝滚动scrollTop是什么？The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.元素的scrollTop属性获取或设置【元素内容】垂直滚...

2018-12-29 17:57:18 2619

原创字符串的slice(),substr(),substring()

三个方法都将返回字符串的子串，接受1-2两个参数 slice(start, end) [ )左闭右开 substr(start,length) substring(start, end) [ )左闭右开都是正数时var str = '0123456'str.slice(3); //'3456'str.substr(3); //'3,4,5,6'str.substring(3); /

2017-09-21 20:20:02 2537

原创数组的slice()和splice()方法

slice()slice的英文意思是一部分，所以这个方法就是用来截取数组一部分的函数 slice(start[, end]) 两个参数，分别表示起止位置，第二个参数可省略，左闭右开[ )，不影响原来数组var num = [0,1,2,3,4,5];num.slice(1); //[1,2,3,4,5]num.slice(1,4); //[1,2,3]num;[0,1,2,3,4,5]

2017-09-21 16:18:34 1792

原创函数内部属性 arguments、this 以及非继承而来的方法 call()和 apply()

argumentsarguments 是类数组对象，包含传入函数的所有参数。该对象有一个callee属性，是一个指针，指向拥有这个arguments 对象的函数。//递归function factorial(num) { if(num <= 1) { return 1; } else { return num*factorial(num-1);

2017-09-21 12:32:01 526

原创数值转换 Number() parseInt() parseFloat()

Number()可以转换任何对象，后两者是针对字符串转数值Number()Boolean类型。true -> 1 false -> 0undefined -> NaNnull -> 0number类型有效的八进制，则输出对应的十进制有效的十六进制，还是输出对应的十进制字符串 -->仅包含数字，转换成数字 Number('01113444') ->

2017-09-19 16:25:58 934

转载 IOS 原生输入法不支持keyup keydown

作为当时小系统的开发兼职测试，作为我们三个人中唯一的一颗苹果，我没用原生的输入法….这个bug出现的时候，又是一脸懵逼…..竟整这些幺蛾子…..情况说明：实时搜索监听input的值然后实时拽接口拉数据这看似完美的流程，在iPhone原生输入法下出错了？没发出去？！嗯，就是没发出去。bug！！！解决方案：input propertychange 下面这些属于转载内容帮助理解keyup k

2017-06-30 14:49:35 851

原创 IOS 点击事件失效

当初遇到这个问题时候，已经让开发小哥发布了至少10遍….本以为万事俱备，赶紧滚去上线，结果….点一点自己的手机，发现！哇擦擦！！怎么点不动？报错了？哪里报错了？什么鬼？之前不是没问题么？你的手机有问题吗？没有？啥？为什么我的有问题？找了另外一颗苹果，发现那颗苹果也有问题….(⊙﹏⊙)bbug!!!然后找到两个解决方案 1、用touch事件替换click 事件还有一个原因是因为click事件会

2017-06-29 16:50:17 3550

原创 <footer>始终在页面底部

问题描述：当内容很多时，footer跟在内容后面；当内容不够一页时，footer位于最底下。效果展示: 【有滚动条出现的时候，底部跟在内容后面，此时一屏下是看不到的】【没有滚动条出现的时候，位于最底端，此时一屏下是能看到的】 23333 感觉效果展示有点模糊…..实现：html { height：100%；}body { min-height:100%;

2017-06-28 17:22:45 1250

原创 input checkbox / radio 大变样

实际应用中，我们很少使用原生的input框，大家都嫌他丑…也因此诞生了很多美化input的插件。工作中，设计师根据不同系统设计的input框可谓各式各样，以最近做的一个项目为例，不借助插件，input + label就能轻松搞定。<span class="has-checkbox"> <input type="checkbox" id="checkAll" value="0" onclick

2017-06-28 11:42:24 441

原创 <input />调用日历组件触发键盘输入法

<input type="text" />调用日历组件，会触发系统自带的输入法。化解这个尴尬的问题，有两个小方法： 1、this.focus=blur() // 放在input元素上 2、用type=”button”替换text <input type="button" />第一种方法有点尴尬，会冒出来，然后再憋回去，给人一种错过了什么的感觉，我一般用第二种。

2017-06-19 19:53:08 861

原创 position:fixed的元素定位到滚动区域，会被覆盖

目的想让position:fixed 的元素定位在页面底部问题华为、oppo旧款手机上会被覆盖原因误将position:fixed 的元素定位在滚动区域中解决 position:fixed 的元素定位根元素body上问题说明起初遇到这个问题实在是没想到是定位，找了很久才发现…以后还是乖乖滴把footer fixed 在body上吧

2017-06-18 23:21:08 7757

原创手机端时间选择器慢input type="date"

手机端时间选择器慢做手机端页面时遇到一个尴尬的问题，自带的日历组件出来的很慢。goggle之后找到了解决方案:<input type="date" min='0001-01-01 max='9999-12-31' />哇啊哦真的会变快！ Why has Chrome on Android’s native HTML5 date picker become really slow?

2017-06-18 22:49:51 620

原创 JQuery 易混点

平时使用弄混过的几点后台小哥虽厉害，但有时候他们总喜欢乱用==，一旦找不到解决方案，就会把我们叫过去，看他们写的乱七八糟的js…他们还会时不时问一些细节的东西，说不上来的时候，感觉有点小羞愧，故作总结如下：_ (function() {})() vs $(function() {}) _ window.load() vs document.ready() - 一个页面

2017-06-18 21:08:41 312

原创原生JS实现tab切换

今天刚好写了一个简单的tab切换代码，样式有点丑….不过自己做个总结。//html<body><div id="wrap"> <ul id="nav"> <li class="active"><a href="javasript:;">区域前端组</a></li> <li><a href="javasript:;">区域开发组</a></li>

2016-05-12 18:51:42 730

Y_G_G的博客