zjw0742的博客

原创 vue框架下的滚动条优化插件

https://github.com/GarveyZuo/EasyScrollVue下的滚动条优化插件EasyScroll使用：运行：npm isntall --save easyscroll使用：import EasyScroll from 'easyscroll';Vue.use(EasyScroll);

转载 js 判断对象是否为空，没有属性

. 代码1：?1234vara = {};if(!a){ console.log(1);}elseif(a == null) { console.log(2);} else{ console.log(3);}结果

原创 element-ui 表格实现单元格可编辑的方法

:data="tableData"    border    @cell-mouse-enter="handleMouseEnter"    @cell-mouse-leave="handleMouseOut"    style="width: 100%">          label="日期"      width="180"> 

原创 基于element-ui封装的分页组件，功能齐全。

template> div class="el-table-self"> el-table @row-click="rowClick" :data="tableData" :height="tableHeight" @sort-change="sortChange" border @se

转载 国际化插件vuex-i18n

vuex-i18nWe are big fans of the awesome vue, vuex and vue-router libraries and were just looking for an easy to use internationalization plugin, employing as much of the "standard library" as poss

原创 Echarts 占用CPU高，导致浏览器卡顿问题。

页面中使用了大量的Echarts 图例，当操作页面时间久了后发现浏览器占用电脑CPU达到了30%，而电脑的配置是服务器级别的配置，这让人觉得奇怪。使用chrome的profile调试工具记录了js脚本的cpu占用情况，定位到echarts的一个函数占用了大量的CPU，这个函数是：        return setInterval(function () {         

原创 bootStrapTable开源插件的修改指定行背景和指定列背景函数

function markColumn(tabId,colType){   $("#"+id).find("tr").each(function(){               $(this).find("td").each(  $(this).css("background-color","");//先将所有的td背景置为空  );   });       switch

原创 最完整的React+Redux+router兼容ie8 修改！！！！

最近的一个项目使用的是React+React-router+Redux框架，刚开始编写代码的时候，客户的需求不明确，没有明确要求兼容IE8,当第一个版本出来之后，用户发现不能在IE8下使用，才提出兼容IE8的事情。但当时整体的代码框架和主要功能都已经实现，如果更换框架来实现，相当于放弃前面几个月的React代码重写。这带来的工作量是难以估计的。      查找网上的React兼容IE8的方法，

原创 echart2.2.7在ie8下的兼容问题！！！参数无效 NaN

最近在将一个echarts2.2.7的版本修改兼容到ie8，其中遇到一个坑echarts2.2.7的demo在IE8下显示正常，并且我们项目里面的首页饼状图pie，和柱状图都能正常显示，但是子页面的饼状图和柱状图显示不出来，并且报错参数无效，因为IE8下无法进行调试，只能用Echarts的源代码加进去进行调试。定位到了vmlcanvas代码处的错误：    var Painter = func

转载 移动端vw布局详解

有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为了新...

转载 flex布局兼容性语法

CSS样式flex：定义布局为盒模型flex-v：盒模型垂直布局flex-1：子元素占据剩余的空间flex-align-center：子元素垂直居中flex-pack-center：子元素水平居中flex-pack-justify：子元素两端对齐.flex { display: -webkit-box; display: -webkit-flex; displa

转载 Sequelize和sql之间的对应关系，入门文章

如果你觉得Sequelize的文档有点多、杂，不方便看，可以看看这篇。在使用NodeJS来关系型操作数据库时，为了方便，通常都会选择一个合适的ORM（Object Relationship Model）框架。毕竟直接操作SQL比较繁琐，通过ORM框架，我们可以使用面向对象的方式来操作表。NodeJS社区有很多的ORM框架，我比较喜欢Sequelize，它功能丰富，可以非常方便的进行连表

转载 React Native常用第三方组件汇总--史上最全[转]

本文出处：http://blog.csdn.net/chichengjunma/article/details/52920137React Native 项目常用第三方组件汇总： react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时

转载 js文件全局引用redux的store

https://segmentfault.com/q/1010000010159774/假设已有类似如下代码let store = createStore(reducers);那么store为一个对象，其是如下的结构 { //执行createStore其实返回的就是这些东东 dispatch, //触发acti

转载 android屏幕分辨率

在 android 开发中常常会使用到手机屏幕密度和屏幕逻辑尺寸来进行屏幕适配，这里就列出常见手机的屏幕参数列表：像素密度等级等级像素密度逻辑像素密度屏幕像素屏幕尺寸(inch)宽逻辑尺寸(dp单位)真实像素密度设备型号ldpi-0.75120120240*3202.

转载 vue全套

element ★11612 - 饿了么出品的Vue2的web UI工具套件Vux ★7503 - 基于Vue和WeUI的组件库iview ★5801 - 基于 Vuejs 的开源 UI 组件库mint-ui ★5517 - Vue 2的移动UI元素vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用

原创 框架开发中处理异步操作的方式，善用回调函数。

转载 js驼峰命名和下划线转换

在网上找的这段,比较喜欢1.驼峰转连字符:    var s = "fooStyleCss";  s = s.replace(/([A-Z])/g,"-$1").toLowerCase();//利用正则进行替换,简洁明了,很棒 2.转驼峰var s1 = "foo-style-css";s1 = s1.replace(//-(/w)/

转载 ubuntu上安装并使用nvm管理node版本

nvm是一个非常不错的node版本管理器，类似于ruby的rvm。其github地址为https://github.com/creationix/nvm。此处介绍一下如何在ubuntu上安装使用nvm。首先安装必要的包。[plain] view plain copysudo apt-get update  sudo a

原创 nodemon文件修改后自动运行node

{ "name": "ezor_web_cms", "version": "0.0.1", "dependencies": { "global": "^4.3.2", "nodemon": "^1.12.1" }, "scripts": { "devmon": "nodemon current/index.js --watch content/theme

转载 vue-cli中使用less的方式！

npm install less-loader --save-devnpm install less --save-dev@import '../'style/common.less';@test-color:red;@test-color-hover:darken(@test-color,10%);@selector:testid;@property:colo

转载 移动端布局资料

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

转载 移动端布局

下面我们所说的是需要兼容的系统为iOS 5+、Android 2.3+、Windows Phone 8+。对于普通页面来说，iOS比较好兼容；Android低版本有老规范，需要注意；Windows Phone 8里按道理说应该是IE11，结果QQ和百度浏览器还是IE10的内核。。。所以一般CSS3的代码通常要写两至四句，兼容以上各种系统：-webkit-transition: all 0.

原创 完美居中

template> div> div class="login-page"> div class="login-container">fuckdiv> div> div>template>script>script>style> html,body{ width: 100%; padding: 0px; m

原创 时间格式化插件http://momentjs.com/

http://momentjs.com/

原创 发布npm包

然后，npm init的工作做完了。接下来就是：用npm命令登陆一下：Paste_Image.png如果你对password是空的感到疑惑的话，不用紧张，命令行输入密码是不会显示的。然后，在你的目录下使用npm publish就像这样：Paste_Image.png这里因为我已经发布过了，而且version版本没有改变，所以这里npm会给我报错。

原创 Vue中点击组件外关闭组件的实现方式

Vue定义全局点击函数，参数为点击的回调函数。Vue.prototype.globalClick = function (callback) { //页面全局点击 $(document).click(callback);}组件挂载后监听全局的点击事件mounted:function () { this.globalClick(this.handleClickOut);

原创 element ui 表格动态列显示空白bug 修复

在使用element ui框架进行项目开发的时候，表格的列是根据后台数据动态生成的，但是发现在列刷新的视乎，会出现表格完全空白，没有显示的情况，经过自己编写demo发现，在增加列的情况下表格正常，但是一旦表格列减少时就会出问题，对element底层代码进行调试发现，在node_modules/element-ui/lib/elementui.common.js 中的一个函数removeCo

转载 dom节点的尺寸属性

在web开发中，不可避免遇到要计算元素大小以及位置的问题，解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来，所有内容大概分3篇左右的文章的来说明。本文作为第一篇，介绍DOM提供的与尺寸大小相关的DOM属性，提供一些兼容性处理的方法，并结合常见的场景说明如何正确运用这些属性。1. 正确理解offsetWidth、clientWidth、scrollWidth及相应的height

转载 Sequelize 中文API文档

Sequelize 中文API文档－1. 快速入门、Sequelize类 2016年05月20日     35766     声明Sequelize类是引用sequlize模块后获取一个顶级对象，我们通过它来创建sequlize实例，也可以通过该对象来获取模内其它对象的引用，如：Utils工具类、Transaction事务类等。创建实例后，可以通过实例来创建或定义Model

原创 React+router+redux兼容ie8下的页面效果

在虚拟机下进行测试，性能还是相当不错的，但不能涉及大数据刷新，ie8下不适合大数据刷新渲染，性能会差很多，简单的页面显示和数据渲染是没问题的

原创 uglify-js

npm install uglify-js -guglifyjs inet.js -o inet-min.js再运行如下代码，测试-m可选参数：uglifyjs inet.js -m -o inet.min.js

转载 Object.observer数据双向绑定详解！

介绍一场革命正在来临。JavaScript增加了一个新机能，其将改变以往你对数据绑定的所有认知。它也将会改变当今的MVC框架实现监听数据模型编辑、更新行为的方法。那些关注属性监听的应用将会得到性能上的提升，你准备好了吗？好了，赶快进入正题吧。我很高兴地宣布，「Object.observe()」正式在 Chrome 36 稳定版中可用了。【哇哦~此处应该有掌声】.Object

转载 js原型链最详细解释

原型是JavaScript中一个比较难理解的概念，原型相关的属性也比较多，对象有”prototype”属性，函数对象有”prototype”属性，原型对象有”constructor”属性。一、初识原型在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个”[[Prototype]]”内部属性，这个属性所对应的就是该对象的原型。“[[Pr

转载 elementui 表单验证

rules: {    account: [{            required: true,            message: '请输入用户名',            trigger: 'blur'        }, {            min: 2,            max: 25,            message: '长度在

转载 js中__proto__和prototype的区别和关系？

作者：doris链接：https://www.zhihu.com/question/34183746/answer/58155878来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。首先，要明确几个点：1.在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有

转载 js constructor

揭开 constructor在 JavaScript 语言中，constructor 属性是专门为 function 而设计的，它存在于每一个 function 的prototype 属性中。这个 constructor 保存了指向 function 的一个引用。 在定义一个函数（代码如下所示）时，function F() {// some code}123123

原创 VueJs日志信息模块代码。

/*  */var warn = noop;var tip = noop;var formatComponentName = (null); // work around flow check{  var hasConsole = typeof console !== 'undefined';  var classifyRE = /(?:^|[-_])(\w

转载 使用Object.prototype上的原生toString()方法判断数据类型

使用Object.prototype上的原生toString()方法判断数据类型，使用方法如下：Object.prototype.toString.call(value)1.判断基本类型：bject.prototype上的原生toString()方法判断数据类型，使用方法如下：Object.prototype.toString.cal

转载 为什么使用"use strict"可以节约你的时间

// file.js"use strict"function doStuff(){    // use strict is enabled here!}这样佻的file.js都会应用上"use strict"模式。如果你仅想在一个函数中使用：// file.jsfunction a(){ "use strict"; // use strict is ena