自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 echarts 特殊柱状图

特殊规则柱状图如下代码实现:option = { "backgroundColor": "#171A2A", "tooltip": { "trigger": "axis", "axisPointer": { "show": true, "type": "shadow", "lineStyle": { "type": "shadow" }, "z": 0, "label": { "show": true, "color": "#ff

2020-08-14 21:20:36 6

原创 echarts 饼图悬浮背景透明

实现:1、可通过echat.dispatchAction默认悬浮展示浮层2、可调节radius进行文案居中展示效果如下图所示:可通过配置查看:echartsPieoption = { "backgroundColor": "#171A2A", "grid": { "top": 0, "left": "0%", "right": "0%", "bottom": "10%", "containLabel": true }, "tooltip": { "trig

2020-08-14 20:21:01 10

原创 echarts 饼图悬浮背景透明

如图所示:可通过配置查看:echartsPieoption = { "backgroundColor": "#171A2A", "grid": { "top": 0, "left": "0%", "right": "0%", "bottom": "10%", "containLabel": true }, "tooltip": { "trigger": "item", "formatter": "{b} : {d}%", "padding": [ 5,

2020-08-14 20:05:28 19

原创 H5 页面布局 - 滚动条限制

描述:当一个H5页面有头部与尾部的时候,在滑动页面的时候,滚动条会盖在上面,覆盖页面上的所有元素,不大美观,如何做到跟真机一样的效果,直接在指定区域呢?如下:<template> <div class="Index"> <header>标题</header> <section class="content"> <router-link to="/index2"> <button&

2020-08-14 15:23:37 10

原创 百度、Google 埋点统计(Vue篇)

参考资料:资料一、Vue 使用百度统计在Vue单页面开发中接入百度统计代码时,如果直接按照官网的走会出现错误,就是_hmt找不到,这是因为在一个js文件里声明的变量在另一个js文件里是找不到的,所以需要把_hmt挂载到window对象下,这样_hmt成为了全局变量,就可以在任何地方访问了。1、在index.html下百度统计代码添加var _hmt = _hmt || [];window._hmt = _hmt; // 必须把_hmt挂载到window下,否则找不到 (function () {

2020-07-23 17:48:52 78

原创 Uncaught TypeError:Cannot read property 'call' of underfined

如图所示错误解决方案:npm i webpack@4.29.6 webpack-cli@3.1.2 --save-dev

2019-12-03 10:59:27 146

原创 nginx 去除井号操作 2

三步走vue-Router 路由配置const env = (process.env.NODE_ENV && process.env.NODE_ENV.trim() === 'production');//页面导航export const router = new VueRouter({ //mode: "hash", mode: env ? 'history' :...

2018-10-18 17:48:18 1204

原创 vue-loader@15.x VueLoaderPlugin 记录一下

报错:==vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.==目前,//两个方式都可以的,随便用一个const VueLoaderPlugin = require('vue-loader/lib/plug...

2018-08-25 15:42:37 2719

原创 H5 处理服务器返回的 excel 二进制流

当服务器计算excel ,返回数据超级慢的情况下,需要加入 loadding 显示,采用 xhr.responseType = 'arraybuffer' 设置类型,进行 发送请求,回调回来的数据为 二进制流,设置 window.navigator.msSaveOrOpenBlob 支持 ie10+,搜狗浏览器兼容模式场景!H5 处理服务器返回的 excel 二进制流加入 loadding...

2018-07-16 15:33:30 1022

原创 nginx 去除井号操作

Vue、React、Argular 路由去除井号操作寻找框架对应的路由中配置例如 Vue-Router配置:1、首先将路由的 mode 设置为 historyimport Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const router = new Router({ mode: ...

2018-07-15 15:58:53 3536 2

原创 H5 Http请求403 - Referrer Policy

403错误    表示资源不可用。服务器理解客户的请求,但拒绝处理它,通常由于服务器上文件或目录 的权限设置导致的WEB访问错误。遇到的情况:当访问 CDN 或者 第三方资源的时候,经常会出现 403,例如:解决方案:<meta name="referrer" content="no-referrer" />&nb...

2018-05-17 20:23:12 5007

转载 Vue2.x 将页面中表格数据导出excel

Vue2.x 将页面中表格数据导出excel第一步:安装依赖npm install -S file-saver xlsxnpm install -D script-loader二、项目中新建一个文件夹:(excel—名字任取) 里面放置两个文件Blob.js和 Export2Excel.js,文件 在这里。三、在.vue文件中,写这两个方法:其中list是表格的...

2018-05-17 19:11:51 1394

原创 Webpack 3.X - 4.X 升级记录

Webpack 3.X - 4.X 升级记录先升级 webpack-cli首先:执行命令npm install webpack-cli -D或者npm install -g yarnyarn add webpack-cli -D启动服务出现的问题问题1:compilation.mainTemplate.applyPluginsWaterfall is not a ...

2018-02-28 18:29:33 24117 7

原创 Vue 实现6位数密码(iOS WebView卡顿优化)

在ios系统,原生 webview 嵌套H5页面使用时,编写完成的6位数输入密码,输入密码卡顿问题的解决方案:如下图:原因是因为,CSS 这块 造成的。简单来说,style left 为负数的时候出现的,android 目测不会出现此问题input[type=tel] { opacity: 0; z-index: -1; position: absolu...

2018-02-25 18:10:13 1274

原创 Vue 记录 Cannot read property '_withTask' of undefined

如果在Vue使用中报这个错,那一定是你 的引用找不到才会导致,比如说,你的@click事件,如下:<button @click="AAA" />其实,你的 AAA 方法并不存在,编译一开始没啥毛病,等你执行数据的时候,各种问题,如果页面数据量过大的时候,问题很难定位到哪里!解决方法:先写方法,后调用!...

2018-02-08 22:11:13 19248 2

原创 H5 Mock Server 汇总

什么是Mock Server数据?简单来讲,就是API (也就是服务器接口)没有写好前提下,前端无法进行调试,Mock Server 就是用来模拟Api接口返回JSON数据的服务!下面介绍 3 种 mock处理,同时也有很多第三方的,比如(jsonServer + mockJS、webpack + lorem-ipsum等等):1、MockJSmockJS官网 或者 Mo

2018-01-09 18:42:43 579

原创 Web markdown 使用

本想学习下 markdown 使用及其编写,可能是关键字查找不对,费劲半天没怎么查到结果也有很多 markdown 使用工具,但不是特别合适,下面介绍两个觉得不错的 web markdown 编写工具:1、https://stackedit.io/editor2、http://pandao.github.io/editor.md

2017-12-27 16:46:00 267

原创 Vue 组件与组件间的交互

父组件 更改 子组件的 状态 ;子组件 更改 父组件的 状态一开始使用的是 JS 的引用类型进行子父组件进行交互,比如:示例1:let str = { name:"张三"}console.log(str);str.name = "李四";console.log(str);示例2:父组件与子组件互通(使用 JS 引用类型,修改同一块内存地址,子父组件同时变化)<template>

2017-12-09 21:48:00 944

原创 H5 图像识别

识别对比1、百度识别发现百度的图片搜索识别率不是特别,下面为测试图片跟测试后的结果:测试图片:下面为测试后的结果:2、采用 tesseract.js 后结果H5 图像识别 (采用Tesseract.js 进行识别)简单的文案之类的,识别的还算可以,但是稍微复杂点的,准确率就不是那么好了,在学习中。。。安装<script src='https://cdn.rawgit.com/naptha/tess

2017-12-02 22:26:31 5000 2

原创 H5 语音合成播报功能

采用的 SpeechSynthesisUtterance实现语音播报功能,参考资料: ONE、TWO实现效果图:语法介绍1、speechSynthesis.getVoices()getVoices()的方法SpeechSynthesis接口返回的列表SpeechSynthesisVoice对象代表当前设备上所有可用的声音。2、speechSynthesis.cancel()cancel()的方法Sp

2017-11-27 20:18:57 11457 19

原创 window 下 bat 多条件判断

==多条件判断:(1)==chcp 65001@echo off choice /C dme /M "defrag,mem,end"if errorlevel 3 goto endif errorlevel 2 goto mem if errotlevel 1 goto defrag:defrag echo AAApausegoto end:mem echo BBBpausego

2017-11-19 16:35:37 21193

翻译 性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大,剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer==(可视化视图查看器)== 介绍1:webpack-bundle-analyzer(可视化)==将捆绑内容表示为方便的交互式可缩放树形图如下效果图:模块功能:意识到你的文件打包压缩后中真正的内容找出哪些模块组成最大

2017-11-16 15:28:24 25208

原创 实战:Webpack 的 require 动态变量

1、问题描述:完全使用变量 let test = './less/Test.css'require(test);//报错 Uncaught Error: Cannot find module "."let test2 = 'Test'require("./less/"+test2 + ".css");//报错 Uncaught Error: Cannot find module "./le

2017-11-09 17:55:38 7850 2

转载 动态调试JS脚本文件:(JS源映射 - sourceURL)与 debugger

问题描述:当你以动态的方式加载 JS 文件的时候(就是动态加载JS脚本),你就会发现,调试这个加载后的动态JS太过于费劲了,很难调试,那么,以下方案帮你搞定!解决方式1:sourceURL(源映射)—> //@ sourceURL=b.js 关键代码: //@ sourceURL=b.js (要调试当前文件的全名)PS:@符号和 sourceURL间必须有空格,否则达不到效果。例如:

2017-10-25 21:06:06 6389 3

原创 外部访问 Vue 中的 methods方法及其属性

根据你未实现的功能,选择合适的例子。外部访问Vue的 methods 如下:例如1:var vm = new Vue({ el: '#app', data: { medd: 2, index: 1 }, methods: { add: function() { return vm.medd + v

2017-10-20 18:13:48 4839

翻译 Html页面与页面间的交互

HTML 页面与页面间的交互分别为:window.parent 与 window.opener两者简单介绍:1、window.opener 是 window.open 打开的子页面调用父页面对象window.opener 只是对弹出窗口的母窗口的一个引用。比如:a.html中,通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中,就可以通过window.opene

2017-10-19 15:05:58 2886

原创 webpack3.x文件配置

webpack3.x 配置webpack3.x 主配置webpack.config.js文件,每个模块的详细信息都有一定的注释,如果有不对的地方,还请指教!大纲: 1、创建package.json文件 2、创建.babelrc文件 3、创建webpack.config文件目前3个文件即可,下面具体介绍:一、基础配置1、首先全局安装webpack 的基础配置, npm i

2017-10-18 20:51:48 4143

原创 使用 Gradle 创建 Java Web 项目整理

使用 Gradle 创建 Java Web 项目1、安装gradle1、官网下载gradle 下载 Gradle2、解压,然后加入环境变量,在patah 中加入:例如:D:\baiYuTool\gradle-4.0\bin;即可!3、配置完成之后,在 dos命令窗口 ,输入: gradle -v,看看是否安装成功!例如:--------------------------------------

2017-07-01 19:52:59 7204

原创 Vue2.0 多 Tab切换组件

Vue2.0 多 Tab切换组件简单封装,满足自己简单的功能,可以直接拿去使用!首先上效果图:功能简单介绍:1、支持tab切换2、支持tab定位3、支持tab自动化仿React多Tab实现,总之可以正常使用满足日常需求,1、使用方法:==index.vue文件==<TabItems> <div name="买入" class="first"> <Content :isCont

2017-06-20 13:25:04 17066 5

原创 JS 实现复制粘贴功能

JS 实现复制粘贴功能目前没有做过多的测试,只是测试了几个手机,介绍:支持情况(1)移动端:chrome(版本 58.0.3029.96 (64-bit))、猎豹(V6.0.114.14559)、QQ浏览器(Chromium53.022785.104 \ IE11.0.9600.18665)、火狐(版本 53.02)(2)App端苹果6(版本:10.3.1)、华为 (版本:6.0.1)

2017-05-24 16:11:27 18404 4

原创 Java 操作excel表格 - JXL(Java excel api)

Java 操作excel表格Java 操作 Excel 最常用的就是JXL(Java excel api)和POI,用起来挺简单的,不过相应的其功能也并非很强大,够用就行!首先,下载jxl.jar 文件,点我下载其次,将jxl.jar导入项目操作步骤:鼠标选中项目右击 =》 最后一项(Properties) => 选择第三项(Java Build Path) => 选择第三项(Libraries)=

2017-05-22 18:57:36 4048

原创 CSS 资料总结

1、H5表单禁止复制、粘贴的方法 (1)、HTML //禁止复制: <input type=text value="fdg" size=50 onselectstart="return false"> //禁止粘贴: <input type=text value="fdg" size=50 onpaste="return false"> (2)、CSS //禁止用户 长按

2017-05-11 16:31:16 297

转载 Python 记录

Python 记录文件操作:os.mknod("test.txt") 创建空文件fp = open("test.txt",w) 直接打开一个文件,如果文件不存在则创建文件关于open 模式:w 以写方式打开,a 以追加模式打开 (从 EOF 开始, 必要时创建新文件)r+ 以读写模式打开w+ 以读写模式打开 (参见 w )a+

2017-05-09 17:50:55 180

原创 React Native 路由使用总结

React Native 路由因 React Native 版本设计到0.44之后,原先的 RN 路由完全失效了,首先我先附上原先路由写法,下面为原先路由代码:import React, { Component } from 'react';import { Provider } from 'react-redux';import { StatusBarIOS,Platform } from '

2017-05-09 14:30:32 15264 2

原创 React Native 路由使用总结

React Native 路由因 React Native 版本设计到0.44之后,原先的 RN 路由完全失效了,首先我先附上原先路由写法,下面为原先路由代码:import React, { Component } from 'react';import { Provider } from 'react-redux';import { StatusBarIOS,Platform } from '

2017-05-09 11:45:44 1556

转载 React-Native 在android不支持gif图 -- 解决方案!(转)

解决方案:只需要在android/app/build.gradle中的dependencies字段中添加:compile 'com.facebook.fresco:animated-gif:0.13.0'然后重新跑一下react-native run-android命令就可以了!如下图所示:转载地址:http://www.cnblogs.com/zhiyingzhou/p/6076204.html

2017-05-04 22:41:32 1867

原创 Vue2.0 之 vue Cannot read property '__ob__' of undefined 异常(back报错)

Vue2.0 之 back键报错 (异常:vue Cannot read property ‘ob’ of undefined)这个原因是因为我在本页面循环了组件的原因,例如:虽然在这个页面子组件页面不报任何异常,但是我back返回上一个页面的时候,就会报 ==vue Cannot read property ‘_ob_’ of undefined==异常, 一直以为是上一页面的子组件的问题造成

2017-05-02 23:31:15 9582 4

原创 Vue2.0 之 自带浏览器里无法打开(兼容处理) - 解决方案

Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多首先,别急,请看下面的推荐方案:1、找个android真机测试下(版本为4.4),真机联调测试(如果不知道怎么联调,那么请看这里:Android真机 - 联调chrome调试)2、如果报 报错 vuex requires a Promise polyfill in this browser.那么,就是兼容性不够好,请看下面的解决方

2017-04-19 11:31:40 26324 2

原创 Vue2.0 实战 之 上啦加载下拉刷新

# Vue 2.0 实现 上啦加载下拉刷新目前也有很多很多实现的方式,但是个人认为,第三方的包还是蛮不小的,所以决定弄个小的公共vue插件-上啦加载下拉刷新功能,目前没有压塑前文件大小仅仅4-5k左右的样子,实现的效果图,仿 app 系统的上啦加载下拉刷新功能==下拉刷新====上啦加载更多====以及暂无数据==这里是我的,展示图,下面为代码:...

2017-04-13 18:31:20 53554 56

原创 react 指令封装 - validator校验

react 指令封装 - validator校验React validator 封装因form表单校验,可以引入针对于form表单的校验,但是个人嫌弃其他文件的校验方式引用文件比较大,所以自己封装了个简单的检验方式,而react又没有指令这个概念,所以个人仿照vue 的指令,简单的封装 了一个 validator 的检验方式。优点:1、体积小,未压缩前3k,简单实现了非空校验跟正则校验。2、相对

2017-04-03 22:49:09 5990 8

提示
确定要删除当前文章?
取消 删除