自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

x先生的博客

个人学习笔记,记录新的知识。

原创 安卓popupWindow高度设置为WRAP_CONTENT时获取高度

背景 选择多规格菜品时,会使用popupWindow在菜品下方弹出待选择的规格。popupWindow支持下方展示不开时,自动移到上方展示,但实际并没有,而是下方被遮盖。 问题原因 popupWindow在创建时未声明高度,而是根据数据动态渲染内容,高度也是动态的。 PopupWindow在创建...

2019-09-12 10:16:13 546 0

原创 antd Modal组件打包后关闭动画为旋转的解决方案

官方在2019年1月26日更新摸Modal组件,其中包含了Modal 函数组件新增 transitionName 和 maskTransitionName 属性支持的更新内容,让开发者自己设置动画效果。并没有体现在文档内,但开发者可以使用。 issues-16435 Modal组件源码内发现 st...

2019-06-04 16:48:25 665 0

原创 eCharts增加图例(legend)的点击事件--echarts-for-react

1. 功能需求: 用户点击图例,进入下钻页面。 2. 背景 使用echarts-for-react开发的图表,echarts的点击事件不能应用与图例,点击图例会触发legendselectchanged事件。图例选择与非选中状态会直接影响到图表的展示效果,非选中状态图例对应的内容不会再图表内展示。...

2019-04-20 16:10:47 2664 0

原创 使用js将blob对象转file对象

在做图片裁剪上传的需求时,后端使用统一的文件上传接口,要求前端做图片裁剪。 前端裁剪上传图片组件开发会单独一篇文章总结,写完后会在此处链接过去。 前端裁剪图片后获取的实际是blob对象,后端统一的文件上传接口实际接收的file对象,前端需要在数据提交前将blob对象转为file对象。转换方法如下:...

2019-03-08 16:21:50 10859 0

原创 记一次完整的等比例还原设计稿的响应式页面

项目新的迭代周期里面有样式优化的任务,决定借此机会重构页面布局,实现等比例还原设计稿、并响应多种设备的页面,上一版时间比较紧凑,忽略了等比例还原,这次补上。 等比例还原实现思路: 实际像素/实际设备宽度 = 设计稿像素/1920 看到这个公式就知道,需要通过rem来实现了 使用rem就需要设置h...

2019-02-14 10:23:16 817 1

原创 多行文字超出部分显示省略号,以及打包后失效问题【20190227更新】

单行超出隐藏 处理单行文字超出显示省略号的问题很常见 div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 浏览器原生支持,但是只能在单行中实现。 多行超出隐藏 使用-webkit-line-c...

2019-01-28 13:34:17 288 0

原创 webpack打包复制文件插件 -- copy-webpack-plugin

在离线应用中,前端所有文件都需在在本地,有些文件(比如iconFont)需要转为离线文件,这些文件可以直接引用更方便些,这就需要在打包时直接复制到打包文件下。 前端的文件复制让人直接联想到node的fs,可以在打包时调用文件复制方法,当然webpack提供一款插件来解决这一问题:copy-webp...

2019-01-28 13:32:58 3846 0

原创 git基础你还得知道点这些(一)

git是如何存储数据的 直接记录快照,而非差异比较 git对待数据更像是一个快照流,每次你提交更新或者在git中保存状态时,他会对全部文件创建一个快照并保存索引,对于没有改变的文件,git不会再次存储,而是保留一个连接,连接到之前存储的文件。 在上图中,版本1创建了三个文件,提交后,git创建了...

2018-12-03 11:21:48 102 0

原创 fetch下载文件--统一拦截导出文件

做外卖报表导出功能,前端使用fetch请求,后端在正常情况向会返回csv文件,在异常时会返回对应的异常码;前端的请求都是使用request.js做了统一拦截和错误提示,但是不支持文件下载,于是对原有内容稍作改造,支持文件下载。 前端是怎么实现文件下载的? // 使用fetch发送请求并拿到返回值 ...

2018-11-08 20:25:14 3590 2

原创 使用dva routerRedux.push跳转页面携带参数时请求两次问题

发现问题 页面使用routerRedux.push([path])进行跳转,部分页面跨页传参也是使用这种方式,然后发现了一个很奇怪的现象,部分页面接受参数后,执行两次subscriptions,所以导致两次请求。在dva的issues里面看到了2016年有人提过这个问题,并被列为bug解决了。很奇...

2018-11-08 19:53:47 5514 0

原创 antd可展开单元格实现按需可展开

每次起一个文章名字的时候都很头疼,不知道怎么描述才算得上直截了当,直奔主题。 功能的使用场景 具体使用场景可以参考下图,当时失败原因下菜品多余一个时,当前行可展开;当仅有一个菜品时,当前行不可展开。 解决思路 antd table要用到的属性 expandedRowRender:额外的展开行属...

2018-09-30 14:47:36 5290 3

原创 动态单元格合并---antd的table组件

怎么合并 antd提供了河边单元格的功能,支持合并行和列。以合并行为例,将第一行的高度rowSpan设置为2,其下一行高度设置为0,这样就实现了两行单元格合并,多行和列colSpan合并同理,给一个单元格设置值为要合并的行数,其余待合并为0,即可合并。 动态合并场景 以工作中的实际场景为例,用户通...

2018-09-30 14:45:53 8848 23

原创 记一次npm发包失败的经历

前言 早就注册了npm,就发布了一版测试包,搁置到此,最近想封装一些常用组件,发布到npm上面,也算是一种技术储蓄了。 从昂首挺胸到灰头土脸 正常的发布流程其实很简单: 注册个npm账号 本地使用npm登录npm login,填写用户名、密码、邮箱完成登录 在待发布的文件内执行npm publi...

2018-09-30 14:32:57 2514 1

原创 antd可展开单元格实现按需可展开

每次起一个文章名字的时候都很头疼,不知道怎么描述才算得上直截了当,直奔主题。 功能的使用场景 具体使用场景可以参考下图,当时失败原因下菜品多余一个时,当前行可展开;当仅有一个菜品时,当前行不可展开。 解决思路 antd table要用到的属性 expandedRowRender:额外的展开行属...

2018-09-18 21:54:01 3986 1

原创 使用antd开发可动态增加项的表单

我不知道应该怎么描述这个功能才算清晰,看图吧 环境是在antd的Form组件内开发大概的功能如下: 用户需要选择异常情况通知方式,并填写最少一个最多三个的联系人姓名和联系方式。 期望用户点击加号,可以增加一条,最多三条。 内容需校验,输入不能为空,联系方式需要根据用户勾选的通知方式校验输...

2018-08-14 16:55:23 18970 33

原创 hexo入门教程--部署到自己服务器

我服务器环境是centos7+Apache,只需要将编译好的静态文件上传至Apache服务的根目录下,即算完成。我们可以借助ftp来实现。 主角登场 安装 hexo-deployer-ftpsynct npm install hexo-deployer-ftpsync --save 修...

2018-07-19 20:35:12 2174 0

原创 hexo入门教程--部署到git服务器

首先纠正自己一个错误,之前说部署到github,其实全面的说法应该是部署到git服务器—包括github和自己搭建的git服务器。我们可以在服务器上面搭建一个自己的git服务,设置hook,当我们在本地完成push后,服务端自动将push的内容复制到网站服务器的预留的目录下,完成网站服务器的部署。...

2018-07-19 20:34:32 1146 0

原创 hexo入门教程--本地环境搭建

hexo入门教程 简介 Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。 由于生成的是纯静态文件,所以你可以直接放在github上面,把github当做自己的服务器使用,比如这里。当然也可以...

2018-07-19 13:38:42 826 0

原创 js输出蛇形矩阵

来自choice boh /** * 蛇形矩阵 * 思路整理:首先定义一个二维数组用来保存矩阵内容,蛇形矩阵的特点是数字顺时针回旋依次增加1, * 可以通过二维数组坐标控制输出内容。 * 传入值必须为正整数!!! * 循环定义:以3X3数组为例,一次循环为[0][0]==&...

2018-04-14 13:20:04 1050 0

原创 ant design Tree组件多个叶子节点非全选时也需要提交所有直属父节点解决方案

问题场景:在子级非全选时,同时也要提交所有直属父级节点id 问题分析: 目前选择子级时,直属所有父级均变成半选状态原因如下 onCheck(val, enent) 打印的数据为event,可以看到halCheckedKeys属性,即所有半选状态的节点。 当节点为全选时,halChe...

2018-03-26 13:13:36 3288 0

原创 使用antd Modal组件时数据污染问题解决方案

问题再现: 现在有新增和编辑两个弹窗需求。由于内容一致,所以使用一个Modal组件即可。 问题随之而来。 点击编辑,Modal弹出并呈现出数据,编辑后点保存或关闭,再打开新增,弹窗内还是刚才的数据,即使在新增窗口打开前置空state也无效。头疼。。。。。 解决方案1: 设置Modal ...

2018-03-12 20:26:14 3494 0

原创 适用于React的富文本编辑器 -- react-umedito 图片上传本地服务器解决方案

react-umeditor,这是liuhong1happy同学将百度富文本编辑器用react封装的一个组件。 安装:npm install react-umeditor –save 使用:react-umeditor github文档中有介绍 这篇文章不是介绍插件是怎么用的,是总结如何将图...

2018-02-24 16:42:36 5885 1

原创 如何实现一个数与多个数比较

问题在现: 我需要根据后台传来的数据判断数据展示,下图中红色是后台数据对应的单选框,其他表示其他数值。值使用react 的state保存,所以当数值为前五个其中之一时,用户选择自定义出现的输入框内值也为改数值,用户需要先删掉,在从新填写。 需求: 当数据为前五个其中之一时,点选自定义,输...

2018-02-11 15:55:16 201 0

原创 React dva数据流程总结

一直在整理dva的运行流程,这次算是比较完善的一个吧,个人理解的dva流程图。 根据一个实际项目总结的流程,目录结构大致如下:

2018-02-01 11:25:21 4496 0

原创 webstorm不能自动重新编译问题

问题: 项目是react+webpack的,已经设置好,页面改动一次,就会自动更新,实际却需要手动执行 npm start,偶尔也会自己更新。 问题原因: system setting 里面默认勾选了safe write选项,其作用是首先把文件的修改保存到一个临时文件里,当确定保存完毕之后再...

2018-02-01 09:36:39 5588 0

原创 JS內建对象Math

Math是一个包含一系列方法和属性、用于数学计算的全局內建对象。/** * 随机数 Math.random(); * random()返回的0到1之间的某个数[0,1);如果要获得0-100之间的某个数100*Math.random() * 要获取min-max之间的数,使用公式:((max...

2017-12-23 14:41:23 97 0

原创 JS数组API知识点总结

/** * 数组API知识点总结 */var arr = [1, 2, 5, 4, 3, 6, 7, 8, 4]; /** * 数字转字符串 * 两种方法:String()和join(); * join参数为用于分隔的标识,若为空,则与String相同 */console.log(St...

2017-12-22 22:52:26 146 0

原创 node.js在服务端实现简单的验证码--captchapng

后端框架使用的是Express,实现纯数字验证码。//命令行 npm install captchapng//app.js var captchapng = require('captchapng');实现原理: 1. 使用Math.random()生成随机数,使用pars...

2017-12-22 16:33:14 1117 0

原创 JavaScript数组去重

/** * 数组去重方法思路 *方法 1:新建一个数组,将原数组第一个元素放入, *然后从原数组第二个元素开始与新数组内元素比较,相同则放弃,不同则加入新数组 */ Array.prototype.unique1 = function() { var aRes = [this[0]...

2017-12-22 15:53:39 75 0

原创 JavaScript对几个排序算法的实现

冒泡排序、选择排序、插入排序、快速排序、归并排序和堆排序的代码实现var arr=[2,1,3,6,5,7,4,9,8]; 冒泡排序 /** * 冒泡排序: * 每次都要从头开始比,两两相比。 */ function bubble(arr) { var temp; var l...

2017-12-22 14:33:59 83 0

原创 css3中的滤镜特效

页面被渲染后再页面中某个局部呈现的一些特殊的视觉效果。 先放一张原图: grayscale滤镜(灰度滤镜) <style> .grayscale { filter: grayscale(50%); -webkit-filter: graysca...

2017-11-23 20:51:03 729 0

原创 box-sizing 布局

在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸,而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型,但对于表单form中的部分元素还是基于IE的怪异盒模型,如input里的radio、check...

2017-11-22 20:06:23 873 1

原创 关于闭包的简单应用实例--getter && setter以及迭代器

在之前的文章中总结过闭包,也是咋结合了几本书的解释加上自己的理解,总结了关于闭包的一些知识点。 这两天在读《JavaScript面向对象编程指南》时,再次接触了闭包,这次接触,更加加深了我对闭包的理解,我认为对闭包最简单的理解就是:能够在函数外部访问函数内部变量,将内部变量提升为“全局变量”(这...

2017-11-03 22:08:45 159 0

原创 【ES6】const命令和import命令

const命令const用来声明常量,一旦声明,其值就不能更改,这就意味着const一旦声明常量,就要立即初始化。 const命令的作用域与let命令相同: - 只在声明所在的块级作用域内有效。 - const命令声明的常量也不提升。 - 同样存在暂死区,只能在声明后使用。 对于复...

2017-10-26 10:29:34 1763 0

原创 【ES6】let 命令

let命令:用于声明变量,类似于var,但声明的变量只在let命令所在的代码块作用域内有效。最经典的对比://场景1: var a=[]; for(var i=0;i<10;i++){ a[i]=function(){ console.log(i); }; }...

2017-10-24 23:31:08 199 0

原创 安装angular

1、确认电脑上的 node和npm版本合适–node 6.9.x 和 npm 3.x.x 以上的版本。 查看版本node -v npm -v 2、安装Python。 Unix & Linux 平台安装 Python: 以下为在Unix & Linux 平台上安装 Py...

2017-10-23 23:15:24 440 0

原创 头像上传剪裁预览功能js实现,以及Safari中一个坑。

先贴张图片,看看效果贴代码之前,将一下<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> ...

2017-08-17 17:25:36 1890 0

原创 IE8 兼容rgba

关于rgba的内容不介绍了,直接贴代码。background-color: rgba(0,0,0,0.4); filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolo...

2017-07-27 08:58:22 176 0

原创 商品详情放大效果

//页面布局: <div class="box"> <div class="disImg"> <img src="images/d...

2017-07-23 09:33:40 345 0

原创 jq获取同一类名的但处于不同父元素下的当前元素的索引值

今天遇到了一个小坑,关于jQuery的 index()的,分享一下。 先看一下菜鸟教程的定义:获得被点击的li元素相对于它的同级元素的 index:$("li").click(function(){ alert($(this).index()); });也就是说,如果...

2017-07-22 15:24:56 1340 0

提示
确定要删除当前文章?
取消 删除