- 博客(44)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 自定义封装fetch
// import 'es5-shim' //由于 IE8 是 ES3，需要引入 ES5 的 polyfill// require('es6-promise').polyfill(); //支持IE浏览器,引入 Promise 的 polyfill// import 'whatwg-fetch' //解决移动浏览器兼容性问题// import 'fetch-detector' //引入 f...
2018-10-22 18:49:45
897
原创 vue自定义指令v-load-more实现上拉加载
vue通过自定义指令实现loadMore上拉加载，实现方法：common.js/** * 获取style样式 */export const getStyle = (element, attr, NumberMode = 'int') => { let target; // scrollTop 获取方式不同，没有它不属于style，而且只有doc...
2018-09-29 17:17:27
9828
2
原创 快速删除node_modules文件夹
step1：npm install rimraf -gstep2：rimraf node_modules
2018-09-18 18:21:35
1572
原创 vue通过DllPlugin插件优化打包性能，减少打包时间（基于vue-cli）
step1：在build文件夹下新建 webpack.dll.conf.js 文件(即和webpack.base.conf.js同级)const path = require('path')const webpack = require('webpack');module.exports = {output: { filename: 'dll/[name].dll.js',...
2018-09-18 18:18:52
4960
2
原创 vue打包通过image-webpack-loader插件对图片压缩优化
vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积step1：npm install image-webpack-loader --save-devstep2：在build/webpack.base.conf.js中改如下配置module.exports = { module: { ...
2018-09-18 17:57:17
15830
2
原创 react打包通过image-webpack-loader插件对图片压缩优化
react正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积step1：npm install image-webpack-loader --save-devstep2：在config/webpack.config.prod.js中改如下配置module.exports = { module: {...
2018-09-18 17:52:06
2891
1
原创 react通过react-router-dom拦截实现登录验证
在使用react开发项目中，有些页面需要登录之后才能访问，所以需要进行拦截，此处分享采用react-router-dom v4+redux+redux-saga+ant-mobile+axios技术来实现Login.jsximport React from "react";import { is, fromJS } from "immutable";import { connect ...
2018-08-31 17:20:56
17220
原创 vue通过vue-router拦截实现登录验证
在实际开发中，有些页面需要登录之后才能访问，采用vue-router+vuex+elememt-ui+axios的方式实现。以下是案列代码：login.vue<template> <div class="login"> <el-input type="text" v-model="username" placeholder="请输入用户名&qu
2018-08-31 16:40:21
7187
原创 vue调试工具Devtools不出现的解决方式
在使用vuex时，想直观的查看数据state的变动，用Devtools可实现，但是在Google浏览器中开发调试的时候，右上角出现vue的图标，但是在开发者工具中没有出现vue调试（已在扩展程序中安装 Vue Devtools）vue图标：开发者工具：扩展程序：没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本，或是没有勾选：允许访问文件网址https:...
2018-08-31 15:19:38
74887
11
原创 H5调取摄像头摄像上传的两种方式
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>H5 Upload&am
2018-08-31 14:59:25
4742
原创 H5实现拍照上传功能
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>H5 Upload&am
2018-08-30 16:52:25
2424
原创 react使用react-hot-loader实现局部热更新
Q：webpack-dev-server 已经是热加载，为何还要在 react 项目还要安装 react-hot-loader 呢？A：其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack ...
2018-08-16 14:34:36
9865
原创 react中使用ant-design步骤
step1、 npm install antd --savestep2、npm install babel-plugin-import --save-devstep3、分别在config/webpack.config.dev.js、config/webpack.config.prod.js中配置https://github.com/ant-design/babel-plugin-im...
2018-08-16 14:29:39
2621
原创 react-router v4传递参数
注意： 路由表改变后要重启服务 方式 一： 通过params 1.路由表中 <Route path=' /user/:id ' component={User}></Route> 2.Link处 ...
2018-08-16 14:23:40
5899
原创 react打包放在服务器上出现空白页(即文件路径不对问题)
解决方式：https://stackoverflow.com/questions/38565538/create-react-app-css-and-js-path/在package.json中添加--- "homepage" :".",或是直接添加文件路径，例如："homepage":"http://example.com/react"{ "name": "react-.
2018-08-16 14:20:28
4843
原创 react引入照片的几种方式
//引入方式一：import tsIcon from '../images/typescript.jpeg';//引入方式二：const tsIcon = require('../images/typescript.jpeg');//使用方式一：<img src={tsIcon} alt="" />、<img src={require('../images/typescr...
2018-08-16 14:18:51
861
原创 通过create-react-app创建的react项目使用sass
step1:安装sassnpm install sass-loader node-sass --save-devstep2:配置sass 1、找到webpack.config.dev.js和webpack.config.prod.js 2、分别修改test: /\.css$/改为test: /\.(css|scss)$/，并且在use:[]中添加即use:[...,...,{...
2018-08-16 14:15:39
1645
原创 React中配置跨域
在package.json中配置代码可以实现跨域1、确保你自己已经使用 npm run eject 命令，这个是生成本地webpack配置文件2、package.json中配置如下代码"proxy": { "/*": { "secure": false,//若是https可以添加，也可以不添加，不添加也行 "target": "https://...
2018-08-16 14:11:56
3101
原创 相邻div元素层设置margin引起的层级问题解决方案
需求：up和down层，down层margin-top:-100px;目的：down层覆盖up层100px<div class="up"></div><div class="down"></div>出现问题：up层覆盖down层上100px，而不是隐藏在down层下；解决方案：方案一：.up{ position: re...
2018-08-16 14:04:12
1155
原创 利用伪元素设置元素是否选中状态
li::before { content: ''; position: absolute; top: 50%; left: 0; width: .36rem; height: .36rem; margin-top: -.18rem; border-radius: .36rem; border: .01rem solid ...
2018-08-16 13:57:20
869
原创 input框文字不垂直居中解决方案
可采用浮动的方式使input框文字垂直居中<div class="info-content clearfix"> <div class="info-text">联系电话:</div> <input type="tel" name="mobile" value="" id="co
2018-08-16 13:52:21
7710
原创 vue中使用jQuery
1、 npm install jquery --save 2、在webpack.base.config.js中添加module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},......plugins: [ new webpack.ProvidePl...
2018-08-08 16:00:45
266
原创 vue设置404页面
在router/index.js中添加{path: "/404",name: "notFound",component: notFound}, {path: "*", // 此处需特别注意置于最底部redirect: "/404"}
2018-08-08 15:56:52
19260
2
原创 通过webpack之externals配置减少打包vendor体积
1、在webpack.base.conf.js中配置module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},externals: { 'vue': 'Vue', "element-ui": "ELEMENT", "vue-router": ...
2018-08-08 15:54:34
5321
2
原创 vue之组件之间的传值
1、父组件向子组件传值//parent.vue<template> <div> <child :send-msg-to-child="toChildMsg"></child> </div></template><script>import child
2018-08-08 15:51:36
447
原创 vscode插件之vsocde-fileheader
vsocde-fileheader是一款书写js，添加作者详情插件，快捷键：ctrl+alt+i，扩展搜索安装，用户自定义设置作者名//用户配置"fileheader.Author": "author","fileheader.LastModifiedBy": "author" ...
2018-08-08 15:45:02
7742
3
原创 vscode插件之Power Mode
Power Mode是一款炫酷的敲代码插件，vscode扩展搜索Power Mode，然后用户自定义配置Power Mode//用户配置{"powermode.enabled": true,"powermode.presets": "flames","powermode.comboTimeout": 5,"powermode.enableShake": false,"powermo.
2018-08-08 15:41:48
2647
原创 vscode插件之背景插件（background）
vscode中点击扩展，然后搜索background，点击下载，然后用户自定义配置用户配置//"background.enabled": false,//卸载插件开启"background.useDefault": false,"background.style": { "content": "''", "pointer-events": "none&
2018-08-08 15:37:35
30566
2
原创 vscode之快速生成vue模板的配置
在vscode中点击左下角的设置---用户代码片段---输入：vue.json，将以下代码复制保存，然后新建.vue文件，输入：vue，回车即可。可按需自行添加内容。{ "Print to console": { "prefix": "vue", "body": [ "<template>",
2018-08-08 15:32:56
7423
转载 背景页面为黑客帝国效果
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title&a
2018-08-08 15:26:10
21521
原创 点击页面文字闪现效果
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&
2018-08-08 15:23:14
485
转载 JS判断是PC端还是WAP端
var browser = { versions: function() { var u = navigator.userAgent; return { trident: u.indexOf('Trident') > -1, //IE内核 ...
2018-07-09 10:52:45
862
原创 简单弹窗的设置(CSS方式)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-06-12 18:43:47
6407
1
原创 vue中图片转换为base64上传、预览、删除
<template> <div class="com-upload-img"> <div class="img_group"> <div class="img_box" v-if="allowAddImg"> <input t
2018-05-16 15:31:42
15565
2
原创 通过FileReader实现多张图片转换成base64、上传、预览、删除
方法名 参数 描述 abort none 中断读取 readAsBinaryString file（blob） 将文件读取为二进制码 readAsDataURL file（blob） 将文件读取为 DataURL readAsText file, （blob） 将文件读取为文本 事件 描述 o...
2018-05-16 15:26:14
3806
原创 模仿li标签实现省市区三级联动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-03 15:40:50
1579
原创 左固定右适应
左固定右适应//CSS样式html, body { margin:0; padding:0; height: 100%; } .container { height: 100%; } .left { height: 100%;
2017-09-15 15:46:55
280
原创 placeholder兼容IE8代码
//需要引入jQuery$(function(){ handlePlaceholderForIE();});function handlePlaceholderForIE() { if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) // ie7&ie8
2017-09-15 15:17:53
292
原创 Sublime text3 build3143注册码
—– BEGIN LICENSE —–TwitterInc200 User LicenseEA7E-8900071D77F72E 390CDD93 4DCBA022 FAF6079061AA12C0 A37081C5 D0316412 4584D13694D7F7D4 95BC8C1C 527DA828 560BB037D1EDDD8C AE7B379F 50C9D69
2017-09-15 15:16:03
4813
7
原创 移动端滚动穿透解决方案
/解决移动端滚动穿透样式/ body.modal-open { position: fixed; width: 100%; }//scrollingElement兼容性代码 (function () { if (document.scrollingElement) { return } var element = null function scro
2017-09-15 15:11:24
1211
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人