1091214370的博客-CSDN博客

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

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

2019-09-12 10:16:13 2433

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

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

2019-06-04 16:48:25 3197 2

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

1. 功能需求：用户点击图例，进入下钻页面。2. 背景使用echarts-for-react开发的图表，echarts的点击事件不能应用与图例，点击图例会触发legendselectchanged事件。图例选择与非选中状态会直接影响到图表的展示效果，非选中状态图例对应的内容不会再图表内展示。当我点击图例时，页面跳转至下钻页面。3. 解决思路需要保证点击图例时，页面跳转至下钻页面，但是被点...

2019-04-20 16:10:47 9835

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

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

2019-03-08 16:21:50 46436 2

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

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

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

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

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

2019-01-28 13:34:17 691

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

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

2019-01-28 13:32:58 12172

原创 git基础你还得知道点这些（一）

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

2018-12-03 11:21:48 186

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

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

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

发现问题页面使用routerRedux.push([path])进行跳转，部分页面跨页传参也是使用这种方式，然后发现了一个很奇怪的现象，部分页面接受参数后，执行两次subscriptions，所以导致两次请求。在dva的issues里面看到了2016年有人提过这个问题，并被列为bug解决了。很奇怪在这为什么复现了。寻找原因想知道从页面加载到请求结束到底发生了什么，这就要借助工具了----Re...

2018-11-08 19:53:47 8770

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

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

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

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

怎么合并antd提供了河边单元格的功能，支持合并行和列。以合并行为例，将第一行的高度rowSpan设置为2，其下一行高度设置为0，这样就实现了两行单元格合并，多行和列colSpan合并同理，给一个单元格设置值为要合并的行数，其余待合并为0，即可合并。动态合并场景以工作中的实际场景为例，用户通过表格维护所有门店的外卖信息，有的门店只有一个渠道，有的门店有两个渠道，以后不排除多个渠道；表格要以门...

2018-09-30 14:45:53 14820 29

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

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

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

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

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

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

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

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

2018-08-14 16:55:23 31375 36

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

我服务器环境是centos7+Apache，只需要将编译好的静态文件上传至Apache服务的根目录下，即算完成。我们可以借助ftp来实现。主角登场安装 hexo-deployer-ftpsynctnpm install hexo-deployer-ftpsync --save修改配置：deploy: type: ftpsync host: &lt;host&gt...

2018-07-19 20:35:12 3103

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

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

2018-07-19 20:34:32 1740

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

hexo入门教程简介Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。由于生成的是纯静态文件，所以你可以直接放在github上面，把github当做自己的服务器使用，比如这里。当然也可以直接部署到服务器上面，比如这里，算上本篇文章将有三篇文章详细的介绍hexo环境本地搭建以及部署到git...

2018-07-19 13:38:42 1789

原创 js输出蛇形矩阵

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

2018-04-14 13:20:04 1923

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

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

2018-03-26 13:13:36 5404 3

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

问题再现：现在有新增和编辑两个弹窗需求。由于内容一致，所以使用一个Modal组件即可。问题随之而来。点击编辑，Modal弹出并呈现出数据，编辑后点保存或关闭，再打开新增，弹窗内还是刚才的数据，即使在新增窗口打开前置空state也无效。头疼。。。。。解决方案1：设置Modal 的key属性，使其每次打开都是新的窗口。（貌似用处不大）modalKey: Date.par...

2018-03-12 20:26:14 6998

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

react-umeditor，这是liuhong1happy同学将百度富文本编辑器用react封装的一个组件。安装：npm install react-umeditor –save 使用：react-umeditor github文档中有介绍这篇文章不是介绍插件是怎么用的，是总结如何将图片上传到本地服务器，并且正常使用。问题：插件本身使用七牛作为图片服务器，与实际需求不符，我们希望上...

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

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

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

2018-02-11 15:55:16 1300

原创 React dva数据流程总结

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

2018-02-01 11:25:21 5510

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

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

2018-02-01 09:36:39 10047

原创 JS內建对象Math

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

2017-12-23 14:41:23 164

原创 JS数组API知识点总结

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

2017-12-22 22:52:26 245

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

后端框架使用的是Express，实现纯数字验证码。//命令行npm install captchapng//app.jsvar captchapng = require('captchapng');实现原理： 1. 使用Math.random()生成随机数，使用parseInt(Math.random() * 9000 + 1000) 将这个随机数设置为四位数字。 2. 将这个四位数字传

2017-12-22 16:33:14 1651

原创 JavaScript数组去重

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

2017-12-22 15:53:39 129

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

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

2017-12-22 14:33:59 156

原创 css3中的滤镜特效

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

2017-11-23 20:51:03 1286

原创 box-sizing 布局

在CSS中盒模型被分为两种，第一种是W3C的标准模型，第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型，但对于表单form中的部分元素还是基于IE的怪异盒模型，如input里的radio、checkbox、button等元素，如果给其设置border和padding它们也只会往元素盒内延伸。　　在W3

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

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

在之前的文章中总结过闭包，也是咋结合了几本书的解释加上自己的理解，总结了关于闭包的一些知识点。这两天在读《JavaScript面向对象编程指南》时，再次接触了闭包，这次接触，更加加深了我对闭包的理解，我认为对闭包最简单的理解就是：能够在函数外部访问函数内部变量，将内部变量提升为“全局变量”（这里是指能够在全局作用域内访问），这改变了原有的作用域链的限制。今天的第一个简单的应用实例：getter和

2017-11-03 22:08:45 308

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

const命令const用来声明常量，一旦声明，其值就不能更改，这就意味着const一旦声明常量，就要立即初始化。 const命令的作用域与let命令相同： - 只在声明所在的块级作用域内有效。 - const命令声明的常量也不提升。 - 同样存在暂死区，只能在声明后使用。对于复合型的变量，变量名不指向数据，而指向数据所在的地址。const命令只需保证变量名指向的地址不变，并不保证

2017-10-26 10:29:34 4080

原创【ES6】let 命令

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

2017-10-24 23:31:08 320

原创安装angular

1、确认电脑上的 node和npm版本合适–node 6.9.x 和 npm 3.x.x 以上的版本。查看版本node -v npm -v 2、安装Python。Unix & Linux 平台安装 Python: 以下为在Unix & Linux 平台上安装 Python 的简单步骤：打开WEB浏览器访问http://www.python.org/download/ 选择适用

2017-10-23 23:15:24 820

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

先贴张图片，看看效果贴代码之前，将一下<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title> 上传头像 </title> <link href="css/re-boot.css" rel=

2017-08-17 17:25:36 2189

原创 IE8 兼容rgba

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

2017-07-27 08:58:22 248

原创商品详情放大效果

//页面布局：<div class="box"> <div class="disImg"> <img src="images/datu.png"/> <img src="images/datu.png" style="display: none;" />

2017-07-23 09:33:40 508

空空如也

360浏览器兼容模式下使用IP地址访问网页和使用域名访问展示效果不同