独孤听雨

原创 行内块级元素的并排问题

1. 在一个长度为400px的section中，存在两个分别为200px的div, 如何并排存放：如图所示：解答：设置最外层的 盒子 word-spacing: -5px, 两个div盒子 inline-box box-sizing: border-box然后：...

原创 JS查询数组中出现次数最多的元素--通过reduce解决

const arrx = [1, 2, 3, 'x', 'y', 3, 6, 2, 1, 1, 'y', 'x', {a: 2}]const resx = arrx.reduce((acc ,cur) => { cur in acc ? acc[cur]++ : acc[cur] = 1 return acc}, {})console.log('resx', resx)...

转载 实现图片的本地预览

https://segmentfault.com/a/1190000019431922?utm_source=tag-newest图片压缩https://juejin.im/post/5a0161e151882561a209e253

原创 react生命周期函数

一、如图二、详述1. 这个生命周期函数是针对 组件而言的 父组件有如上的生命周期函数，同时子组件也有如上的生命周期函数2. componentWillReceiveProps3. shouldComponentUpdate生命周期函数父组件中的render函数被执行的时候，子组件中的render函数会被重复执行，如果shouldComponentUpdate retur...

转载 react-route中children、component、render区别和使用场景

1. 我们再使用react-route的时候 经常会用到 chaildren component render，区别如下：component &&render区别 参考：https://www.jianshu.com/p/a2a9b469a422

原创 antd MonthPicker禁用往后月份

1. 自定义组件的的处理const monthFormat = 'YYYY-MM'const currentMonth = moment().format(monthFormat)<Col span={7}> <MonthTotalFlowData defaultDate={currentMonth} formatV={monthFormat} /></...

转载 React CSS模块化的解决方案

一、BEM与命名空间来规范CSSBEM(block-element-modifer)方法论 + 约定项目命名空间<component (c-), object(o-)>参考：https://juejin.im/post/5b20e8e0e51d4506c60e47f5二、webpack中使用local scope参考：https://juejin.im/post/5b2...

原创 JavaScript原型&&原型链与面向对象

一、基础&&问题1. 创建的对象有几种方式？2. 什么是原型、原型链、实例、构造函数？3. 关于new及其本质4. 实现继承的的方式有几种方式？继承的本质是啥？二、解答1. 创建对象的几种方式// 方式一：字面量的方式var o1 = {name: 'shawn'}var o11 = new Object({name: 'shawn11'})// ...

转载 React + TS + Mobx 示例

一、创建项目// 方式一：create-react-app todo-React-ts-demo --scripts-version=react-scripts-tscd todo-React-ts-demonpm start// 方式二：create-react-app todo-React-ts-democd todo-React-ts-demonpm install ...

原创 CSS3之内容布局——定位(position)

声明：本文源自《精通CSS：高级web标准解决方案》(第3版)一、定位：static relative absolute fixed1. 概念： static(静态定位)：块级元素垂直堆叠 relative (相对定位)：真正的用途：可以为 “后代元素” 创造 “定位上下文” ；相对其 “原始位置” 控制该元素的 “偏移量”，同时不影响周围其他的元素。 ...

翻译 基于gulp4 + babel7 + webpack-stream5.x搭建的项目配置

Question：当用 gulp进行编译的时候报错如下：根本原因babel包不一致[14:41:49] Error in plugin "webpack-stream"Message: ./js/index.tsModule build failed (from ./node_modules/babel-loader/lib/index.js):Error: Plugin/P...

原创 JavaScript数组扁平化处理

let testArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]function simpleNormalizeChildren (children) { for (let i = 0; i &lt; children.length; i++) { if (Array.isArray(children[i])) { return Arr...

原创 ES6利用Proxy和Reflect实现观察者模式

// 观察者模式const queuedObservers = new Set()const observe = fn =&gt; queuedObservers.add(fn)const observable = obj =&gt; new Proxy(obj, {set})function set(target, key, value, receiver) { const re...

原创 iView组件日期范围添加限制

&lt;FormItem :label="$t('myEngagement.newClient.periodFrom')"&gt; &lt;DatePicker v-model="formValidate.periodFrom" type="date" :readonly="!isEditable" :disabled="!isEditable"

转载 javascript数组的深度拷贝

 声明： 本文来自：https://segmentfault.com/a/1190000009542462 仅作收藏这两在写js时遇到 数据的拷贝问题如果 数组是 这样子的:  let arrOne = [1, 2, 3, 4, 5] ，1. 如果直接赋值  let arrTwo = arrOne  那么属于浅拷贝 拷贝的是原数组(arrOne)的引用，改变 arrTwo中的任何操...

翻译 IE浏览器调试，get请求

前提：在IE11上调试1.get请求，第一次回去服务器请求，的二次默认从 cache中获取   如果想第二次 从server获取数据，需在参数中 添加一个 随机变量 如 时间  随机数等，例如：axios.get(`/${businessPrefix}/currency/all?time=${new Date().getTime()}`, {})  也可以在header中 设置...

原创 es6异步加载

import _ from 'lodash'fetchSuggest: _.debounce(function () {}, 500),用户输入 在判断 用户连续输入的 情况下 不执行查询操作，一旦用户输入间隔超过500ms 执行查询操作...

转载 常见的正则表达式

验证数字的正则表达式集 验证数字：^[0-9]*$ 验证n位的数字：^\d{n}$ 验证至少n位数字：^\d{n,}$ 验证m-n位的数字：^\d{m,n}$ 验证零和非零开头的数字：^(0|[1-9][0-9]*)$ 验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数：^\+...

原创 JS将DD/MM/YYYY to YYYY-MM-DD日期格式转换

DD/MM/YYYY to YYYY-MM-DD 格式转换 const YYYYMMDD = time.replace(/\//g, '').replace(/^(\d{2})(\d{2})(\d{4})$/,"$3-$2-$1")

原创 慢慢走出javascript回调之坑

1.逻辑混乱的代码：function attach (node, status, done) {  node.addEventListener('click', function () {    var id = node.dataset.id;    var endpoint = '/api/v1/records/' + id;    http.get(endpoint, func...

原创 vue样式的动态绑定

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue中的样式绑定&lt;/title&gt; &lt;script src="../../common/js/vue.js&quo

原创 Javascript中创建对象的几种方式

1.直接创建  var  obj = new Object();2.直接声明的方式：var person = {aa:aa,bb:bb};2.使用对象构造器得方式：函数的方式function person(A,B,C){    this._A = A;    this._B = B;    this._C = C;    this.sleeping = sleep;    fu...

转载 IE报vuex requires a Promise polyfill in this browser问题解决

IE兼容性问题本文 转载 仅收藏解决方法第一步： 安装 babel-polyfill 。 babel-polyfill可以模拟ES6使用的环境，可以使用ES6的所有新方法npm install --save babel-polyfill第二步： 在 Webpack/Browserify/Node中使用在webpack.config.js文件中，使用module.expor...

原创 swiper

&lt;template&gt; &lt;div class="wrapper"&gt; &lt;swiper :options="swiperOption" v-if="showSwiper"&gt; &lt;!-- slides --&gt; &lt;swiper-slide v-for="item of list"

原创 es6对象操作

转载 ElementUI折行表格案例

&lt;template&gt; &lt;div class="mod-menu"&gt; &lt;el-form :inline="true" :model="dataForm"&gt; &lt;el-form-item&gt; &lt;el-button v-if="isAuth('s

转载 window.URL.createObjectURL Blob URL无法在Microsoft IE和Edge中打开

本文转载，仅作收藏：https://www.51-n.com/t-4535-1-1.htmlwindow.URL.createObjectURL()可以直接生成blob:开头的链接，该链接产生于浏览器端，不会占用服务器资源。window.URL.createObjectURL()在IE10, IE11以及Microsoft Edge中生成的blob:链接，你不能把它加到一个&lt;a&gt;节点上...

原创 ElementUI行内条件以及添加“暂无数据”提示

一、添加表格内条件 &lt;el-table class="currentInfo-table" :data="DataSet" :highlight-current-row="false" v-loading="loading" header-cell-class-name="column-css" border stripe height = "552"&amp

转载 vue自定义过滤器

在main.js中自定义过滤器  ￥过滤器Vue.filter('moneyFormat', function(value) { if(!value) return '0.00'; var intPart = Number(value).toFixed(0); //获取整数部分 var intPartFormat = intPart.toString().replace(/...

原创 vue导出excel

// 如果接口需要window.URL转码  可通过超链接直接下载let url = `${base}/biz/internal/exportCsv?queryDtoStr=`; let enURL = window.encodeURI(url.concat(param)); let link = document.createEle...

转载 Jquery Ajax 請求Demo

一、最簡單的使用：引入相関文件：jquery-2.1.1.min.js 以及 jquery.json-2.3.min.js假設請求參數為var requestPram = { affPersonClientCategoryCode: "", affPersonName: "", clientNum: "1", ...

原创 vue使用json最简单的方式：

首先我项目是在 webpack 下搭建的vue项目json格式数据如下：json 格式的数据如下：{ “innerList”: [ {"attr1":"内部数据1","attr2":"内部数据2",...}, {"attr1":"内部数据1","attr2":"内部数据2",...}, .... ]}在某一组件内：......ht

原创 angularjs2-CLI

CLI  即为angularjs2的命令  ng的缩写一、构造新项目：     ng  new   my-app --skip-install     cd  my-app     cnpm install     ng   serve

转载 Vue2+webpack搭建VueDemo

“桌面”1.创建项目文件夹  makdir vueDemo2，并   进入文件夹  cd  vueDemo22.初始化项目 npm inti -y   3. npm  install vue  --save   # 安装 vue4. npm install webpack webpack-dev-server --save-dev  #安装webpack  注意： --save-dev 是你开发时...

原创 vue父子组件嵌套 锚点定位

父子、祖孙组件组件嵌套，父级容器监听了scroll事件：在子、孙子组建中点击相应的标题，定位到对应的位置，实现平滑滚动。参考文章：https://blog.csdn.net/iceking66/article/details/78211213?locationnum=1&amp;fps=1一、在子组建中设置：子组件页面设置如下：菜单项：“topMenu” 为菜单数组&lt;button v-f...

原创 Vue 父子组件 监听scroll事件

借助ref实现dom操作，借助eventHub实现消息传递1. 监听scroll事件如果 父子组件  嵌套  在父组件上 存在滚动前提：父容器设置：overflow-y:scroll，子组件、孙子组件等未设置 则需在父组件上监听滚动事件有效，在子组件、孙子组件中监听无效，在父组件 设置一个 ref="viewhome"；在父组件的 mounted中设置：this.boxHome = this...

转载 vue.js如何加载本地json文件

原文转载至：https://www.cnblogs.com/momozjm/p/6271249.html在项目开发的过程中，如果后台接口还未开发完成，这个时候所以我们可以自建一个假数据文件(如data.json)到项目文件夹中，这样我们就可以模仿后台的数据进行开发。但是，如何在一个vue.js 项目中引入本地的json文件呢，下面就将步骤贴出来。整个项目是由vue-cli脚手架搭建而成。具体项目结...

原创 关于Jquery异步请求出现错误

数据没能正确展示  ，这里用的是Ajax的异步请求，原因是接口查询的时候没做空判断，导致ajax返回data中数据为空

转载 linux部署angularjs2项目步骤

一、编译angularjs2的项目： ng bulid二、在linux服务器上安装  nginx  （怎么安装，百度教程）三、将目录发布到 linux服务器上  假设发布在  /home/XXXXX/    XXXX为编译好的 目录四、配置 nginx中的conf           打开文件  cd   /usr/local/nginx       // 一般nginx安装在 l

转载 Angularjs2项目打包发布以及部署在Linux上

第一部分，打包项目，主要参考来自：https://segmentfault.com/a/1190000007921675我们在使用Angular2项目时，直接使用官网提供的基础配置文件，在NodeJS下面就可以生成一个新的ng2项目，但是这样非常不便利，每次都要新建目录，复制配置文件，使用Node命令安装支持库，最后才是写代码。Angular-cli就是用来简化这一操作的，而且官方配置文件不包