小雷雷哥哥-CSDN博客

原创 react中简单使用redux

如果你一点不熟悉redux，看看这个http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html项目搭建好之后，安装一下依赖，安装一下redux 和react-redux在src目录下建一个redux文件夹，在redux文件夹下建action文件夹和reducer文件夹，分别放我们的act...

2019-04-16 15:47:28 194

原创 vue中的$nextTick 解决DOM没有更新完成问题

vue中的$nextTick很多人比较陌生，主要是这个很少用，我几乎是不用，但是看下面这个场景<div id="app"> <div id="div" v-if="showDiv">这是一段文本</div> <button @click="getText">获取div内容<

2018-07-16 11:01:22 7916

原创 vue table切换组件

如果vue单页开发没有使用ui组件，table切换的功能还是比较烦人的。闲暇时间看书写了一个table切换的组件，和大家分享一下，效果图如下：主要有两个组件页面，第一个是 tabs.vue，这个页面上会循环出table标签和每个标签对应的内容，大部分的事件处理也在这个页面上。代码如下：<template> <div class="tabs"> &l...

2018-07-13 14:52:09 5303

原创 vue自定义数字输入框组件

最近自己在练习组件开发，做了一个简单的数字输入框加减的组件，效果图如下：组件可以传入三个参数，value是初始化值，max是可输入的最大值，min是可输入最小值，当然参数可以按需求继续扩展的。组件代码如下：<template> <div style="text-align: center;margin-top: 20px;"> <input t...

2018-07-06 14:25:38 3975

原创 vue计算属性的使用

我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护，比如<div> {{text.split(',').reverse().join(',')}}</div>表达式里面包含了3个操作，有时候可能会更加复杂，这时我们可以使用计算属性。如下<template> <div> {{re...

2018-06-15 12:10:23 10094

原创 vue单页开发父子组件传值

vue单页开发时经常需要父子组件之间传值，自己用过但是不是很熟练，这里我抽空整理了一下思路，写写自己的总结。GitHub地址：https://github.com/leileibrother/wechat-vue文件目录如下图，example.vue是父组件，exampleChild.vue是子组件。父组件引入子组件，父组件html的代码如下：<template> <di...

2018-05-17 11:11:03 2441

如何判断一个对象是空的？字符串和数组可以判断length，对象却没有这个length，有几个简单的方法可以来判断。1，jquery封装的isEmptyObject()方法，需要引入jquery。var obj = {};var a = $.isEmptyObject(obj);//true2，for in 循环来判断，就是isEmptyObject()的实现原理function isEmptyO...

2018-04-19 10:43:12 3698

转载 vue单页的三级联动地区选择组件

在开发vue单页项目时，需要使用地区选择组件，在网上下载了一个三级联动组件（原文我忘了地址，很久之前找的），修改之后分享给大家，我的GitHub上有项目：https://github.com/leileibrother/wechat-vue地区选择的样式如下：在personal文件夹中的area文件是原代码文件，可以在这个文件里修改页面的样式在需要地区选

2018-04-17 17:31:48 3199

原创 scrollTop兼容性问题

很多时候需要获取页面的scrollTop的值，通常使用document.body.scrollTop来获取值。今天在review代码时，发现这个写法无法获取到scrollTop的值，查阅资料发现scrollTop的兼容性问题，在这里分享一下。我通常会在html文件的头部声明文档，也就是，如果写了这个声明，那就需要使用如下方法：var scrollTop = document.doc

2018-03-13 11:36:17 1368

转载 jquery生成条形码插件

以前用过很多二维码的插件，最近需要一款生成条形码的插件，这里介绍一款简单实用的生成条形码的插件jquery-barcode.js，非常的简单实用方便，可以去https://github.com/leileibrother/jquery-barcode下载文档，本文参考其他文章，原文链接：https://www.cnblogs.com/yjmyzz/p/jquery-barcode.html。全文代...

2018-03-12 13:45:20 1294

原创 vue单页使用keep-alive页面返回不刷新

使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。首先在App.vue页面上有下面一段代码，我们都知道这是页面渲染的地方把这段代码改成如下：

2018-02-26 15:23:47 28806 24

原创模仿苹果手机屏幕的虚拟键，可以在手机上随意拖动

自己在开发项目时，需要做一个可以在屏幕上随意拖动的按钮，类似苹果机的虚拟键，先看一下我做好的效果，如图：效果就是那个“主页”按钮可以随意拖动，我是用原生js写的，代码如下： var homeBtn = document.getElementById("HomeBtn"); var width = document.documentElement.clientWidth;...

2018-02-23 10:39:40 3174

原创 vue 图片上传功能

这次做了vue页面的图片上传功能，不带裁剪功能的！首先是html代码，在input框上添加change事件，如下： 0" v-for='(item ,index ) in imgs'> =6 ? false : true">

2018-01-10 10:38:27 42868 15

原创简单实用vue状态管理vuex

vue单页项目开发总是要管理一些状态值，比如登录状态之类，简单的学习了vuex，分享一下。这里暂时介绍vuex里面的三个模块的功能，state,getters和mutations1，在我们的单页项目中安装vuexnpm install vuex --save2，在我们项目的文件目录中的src文件夹下面新建一个文件夹，文件夹名名字随意，一般叫vuex，store之类的

2017-12-22 16:25:36 2678

原创 vue单页路由跳转后scrollTop问题

作为vue的初级使用者，在开发过程中遇到的坑太多了。在看页面的时候发现了页面滚动的问题，当一个页面滚动了，点击页面上的路由调到下一个页面时，跳转后的页面也是滚动的，滚动条并不是在页面的顶部。最开始我使用了一个很笨的方法，每个页面上都加上window.scrollTop(0,0);来解决问题，但是这个太繁琐了。最后和小伙伴们商量了一下，在main.js页面上加了这么一段代码router.af

2017-12-20 13:54:29 6177 4

原创 H5web端存储

做项目的时候需要保存几个数据到其他页面使用，但是又不想通过接口传值，费事，就通过web存储来实现，简单又使用。首先我们要知道H5web存储有两种方式：localStorage和sessionStorage,它们的值都是以键值对的形式存在的。localStorage和sessionStorage的存储量要比cookie大很多！cookie的容量为4k，H5存储的容量达到5-10M！1，loc

2017-12-14 16:03:14 424

原创 jquery地区选择三级联动

无意间发现以前自己写的地区选择的三级联动，虽然现在都是用插件做的，但是jquery手写的还是可以了解一下，看看就好。首先是要引入jquery和全国地区列表文件，可以自己下载一个，我的GitHub上有 https://github.com/leileibrother/selectArea全部代码如下：1，html代码三级联动省

2017-12-08 14:12:50 2971 3

原创字符串的常用方法总结

自己在写js的时候，经常会用到的字符串的一些方法，这里总结了一下我自己常用到的方法，分享一下。先定义一个字符串 var str = "abbcalgldkjgldgehlgjldf";1，indexOf()，返回指定字符创第一次出现的位置。str.indexOf('a') //结果是02，lastIndexOf()，返回指定字符串最后一次出现的位置。str.lastIndexO

2017-12-07 10:16:20 21458

原创 js时分秒倒计时

项目在微信商城里做了个秒杀活动，写了一段倒计时代码，虽然不是啥高端技术，还是分享一下。代码如下： html,body,div,p{margin:0;padding:0;} .content{width: 500px;height: 200px;margin:0 auto; line-height: 200

2017-12-04 16:54:52 717

原创 js获取各种高度总结

在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。抽空整理了我自己常用到的，时间仓促，没有考虑到万恶的IE浏览器。。。。1，获取屏幕的高度和宽度（屏幕分辨率）：window.screen.heightwindow.screen.width2，获取屏幕工作区域的高度和宽度（去掉状态栏）：window.screen.availHeightwindow.

2017-12-01 14:44:44 17525

原创 h5手动滑动进度条效果（移动端）

公司项目需要在手机上做手动滑动进度条的效果（移动端），自己琢磨了一下，用原生js和h5的touchmove事件写了这个效果，可以参考一下，先看看效果图。红色的圆点可以在黑色区域任意滑动。全部代码如下：手动滑动进度

2017-11-30 09:50:21 12826 3

原创阻止事件冒泡

阻止事件冒泡事比较常见的，举个例子：一个元素上有个click事件，其内的一个子元素也有click事件，当点击子元素的click事件时，其父元素的click事件也会触发。我一般用的方法是兼容性写法，代码如下：//阻止冒泡 function stopPropagation(event){ var event=event || window.event;

2017-11-29 14:07:09 265

原创基于jquery的上传文件插件ajaxUpload

以前做web端时用到一个上传文件的插件ajaxupload，主要用于上传图片和文档，没有试过上传视频，这里给大家分享一下。插件可以到网上下载。1，引入jquery和ajaxupload，2，定义上传函数，修改一些配置（可以写在页面的script标签里，也可以写在插件里）//上传图片 $.fn.uploadImg= function(options) { var opts =

2017-11-29 10:30:34 927

转载 cropper js基于vue的图片裁剪上传功能。

前端时间公司的vue项目需要头像裁剪上传功能，看了一篇博客，在此基础上做的修改完成了这个功能，与大家分享一下。原文：http://m.blog.csdn.net/JaneLittle/article/details/72037910。首先下载引入cropper js，npm install cropper js --save在需要的页面引入：import Cropper fro

2017-11-28 15:52:19 16217 15

原创 vue绑定图片路径数据问题

初次使用vue，遇到了许多小细节问题，比如data里面的静态图片路径渲染到页面上的问题，天真的我以为直接写图片的相对路径就可以了，然而失败了，我还是太嫩了，如图，里面的图片路径无法渲染在页面上，百度了一下，基本用两种方法解决。1、加require，如 headerImg: require('../../../assets/img/man.png')，这样就可以显示出来了。

2017-11-27 14:25:02 6370 3

原创 Vue单页开发项目搭建

公司新项目开发要使用vue框架，自学了一下vue单页开发，分享一下vue单页项目搭建的学习效果，主要使用vue脚手架 vue-cli 和 vue全家桶（vue、vue-router、vuex、vue-resource/axios），很多地方不了解，大家多多指点一、项目搭建，使用vue-cli会生成一套提前定义好的构建文件，和相应的文件。1，npm install -g v

2017-11-27 14:20:32 1623

leileibrother的博客