红色枫叶的博客

原创 【无标题】

1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

原创 请求头太大 --max-http-header-size=size

原创 require.context前端自动导入文件方法

require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入,但是如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.co.

原创 优雅的使用VUE---「全局组件注册」

组件是我们非常常用的东西，很多人使用组件都是通过一个一个文件去引用和注册。如果一个组件在整个项目里面的使用次数较多，每一次使用都需要引用并注册，就会显得特别麻烦当们在项目需要重复多次使用该组件，会导致出现很多重复的引入和注册代码，既繁琐又不雅观。因此我们可以通过一个全局的Js文件来管理，将需要多次使用的组件进行全局注册创建全局.js文件管理全局组件// 1 - globalComponent.jsimport Vue from 'vue' // 引入vue// 处理首字母大写 abc =.

原创 优雅的使用VUE---[高精度全局权限处理]

权限的控制由前端处理的场景很多，例如根据后台返回内容，判断该人是否对此功能有权限，进而去修改元素v-if / v-show，这种情况下，当这个功能在多处地方出现，就会导致我们做很多很多不必要的重复代码，如果判断条件繁琐的情况，更加冗余，代码量也会增加很多。因此我们可以造一个小车轮，挂在全局上对权限进行处理实战 - 处理某按钮显示权限问题这种场景出现几率极高，尤其是处理含有多种角色的项目，如果这一类型的权限判断有多次处理，每一次出现都经历判断的话，代码将会异常难看且冗余，因此我们可以通过全局权限判断来.

原创 优雅的使用VUE----「拯救繁乱的template」

很多人在写组件的时候，会依赖脚手架中的标签，其实template也存在一定的缺陷，例如：template里存在一值多判断过多使用template会使代码冗余，杂乱VUE给我们提供了一个render函数，我们可以通过这个函数巧妙的解决template造成的问题// 父组件引入<template> <div> <h1>I am Home</h1> <!-- 按钮根据value显示不同类型的button -->

原创 dom-to-image生成图片并下载

下载必要的js库npm install dom-to-image引用库import domtoimage from ‘dom-to-image’;①生成png的图片插入的到当前页面var node = document.getElementById('my-node');domtoimage.toPng(node) .then(function (dataUrl) { ...

原创 css文本步不换行的情况

一般情况下，元素拥有默认的white-space:normal（自动换行，PS：不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，不换行。解决方法（以IE，chrome,FF为测试浏览器）：word-break...

原创 高德地图获取精确定位信息

function loadmap(){ let that = this this.$vux.loading.show({ text: '获取定位信息...' }) //初始化地图对象，加载地图 var map = new AMap.Map('containers', { res...

原创 ios底部流出空隙

&::after {display: block;content: “”;height: env(safe-area-inset-bottom);}

原创 四种常见的 POST 提交数据方式对应的content-type取值

application/x-www-form-urlencodedapplication/jsonmultipart/form-datatext/xml详细解释:1.Content-Type: application/x-www-form-urlencoded;charset=utf-8 最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctyp...

原创 vue组件添加事件@click.native

1，给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn)<Item @click.native = "shijian()"></Item>.native作用：[给组件绑定原生事件]例子：如果使用route...

原创 用axios.all处理并发请求

如果我们需用在两个接口同时完成后，然后在执行一些逻辑,我们可以使用axios.all处理并发请求，如下所示：function getUserAccount() { return axios.get('/user/12345');}function getUserPermissions() { return axios.get('/user/12345/permissions');...

原创 void 0和undefined区别

为什么有的编程规范要求用 void 0 代替 undefined？-voidvoid是JavaScript的一个操作符，而void 0会返回undefined，实验出真知，可以在浏览器试验一下console.log(void 0) // undefinedconsole.log(void 0 === undefined) // true原因MDN上了解一下undefined的定义...

原创 判断在ios系统中打开微信浏览器

function isWeiXinAndIos() {// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型let ua = “” + window.navigator.userAgent.toLowerCase();// 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是I...

原创 利用clipboard进行复制粘贴

首先引入模板：npm install clipboard --save然后在需要引用的组件中进行引用：import Clipboard from 'cipboard'安装clipboard完成，可以开始写代码了，示例代码：<template> <p id="msg"> copy message </p> //设置id,用以后面获取数据 &...

原创 判断是否是手机打开网页

export const isMobile = () => { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Win...

原创 判断富文本字节个数

str.replace(/</?[^>]>/g,’’).replace(/[ | ]\n/g,’\n’).replace(/\n[\s| | ]*\r/g,’\n’).replace(/ /ig,’’).length

原创 vscode好用的插件

css peek打开VSCODE编辑器，点击左侧菜单最下方的四方形的菜单按钮。在打开的扩展程序市场内搜索CSS Peek。在CSS Peek详细页面点击【Install】按钮安装扩展程序。安装完成后打开HTML文件，按住CTRL键同时移到鼠标到要查看样式的类上就可以看到该类的定义了。跳转到样式的定义，按住CTRL键同时点击样式类的名称或者在类的名称上按F12键即可跳转到样式的定义。C...

原创 解决input上传文件选择同一文件change事件不生效

原创 上传图片至服务器并返回

getObjectURL(event) { var files = event.target.files; if (!/\/(?:jpeg|png|gif)/i.test(files[0].type)) return; if (files && files.length > 0) { // 获取目前上传的文件 ...

原创 在全局引入公共组件

import modules from "./module";// 引入自定义公共组件Object.keys(modules).forEach(key => { const name = key.replace(/(\w)/, v => v.toUpperCase()); // 首字母大写 Vue.component(`${name}`, modules[key]);})...

原创 如何提高 webpack 构建 Vue 项目的速度

执行 npm run build 构建项目的时候极其慢，然后就引起我的注意了。在项目中，引入了比较多的第三方库，导致项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了不少时间。所以，把这些不常变动的第三方库都提取出来，下次 build 的时候不再构建这些库，这样既可大大缩短构建时间利用 webpack 的插件 DllPlugin 和 DllReferencePlugin如...

原创 将错误文件代码提交到svn版本库，如何撤销之前更改，上传服务器

SVN版本库拉取1.新建一个文件夹，从SVN版本库拉去错误提交之前的版本2. 将代码工作区代码备份一份3. 将拉取下来的代码替换工作区的代码4. 提交commit到svn版本库5. 将之前备份的代码还原至工作区...

原创 图片url,base64,blob,file互转

dataURLtoFile (dataURI, type) { // btoa和atob是window对象的两个函数，其中btoa是binary to ascii，用于将binary的数据用ascii码表示，即Base64的编码过程，而atob则是ascii to binary，用于将ascii码解析成binary数据 let binary = atob(dataURI...

原创 vue中使用qrcode动态生成二维码并下载，并解决多次生成二维码的问题

vue页面npmnpm install qrcodejs2import在所需页面导入import QRCode from ‘qrcodejs2’use生成二维码qrcode (url) { // 一定要加上document.getElementById("qrcode").innerHTML = "";，否则每点击一次按钮就会多一个二维码 docum...

原创 jQuery animate() 方法允许您创建自定义的动画。

jQuery animate() 方法允许您创建自定义的动画。语法：$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。下面的例子演示 ani...

转载 JS常用的五大事件 onclick nochanger onload onsubmit onblur

JS事件一、什么是事件？事件是电脑输入设备与页面交互的响应。我们称之为事件。常用的事件：onload加载完成事件onclick单击事件onblur失去焦点事件onchange内容发生改变事件 经常用于select下拉列表选中后的内容发生改变时候触发onsubmit表单提交事件 经常用来在表单提交的时候验证所有表单项是否合法。二、事件的注册又分为静态注册和动态注册两种：静态注册事...

转载 onchange() 事件

onchange 事件会在域的内容改变时发生。onchange 事件也可用于单选框与复选框改变后触发的事件。支持该事件的 HTML 标签, , 支持该事件的 JavaScript 对象： fileUpload, select, text, textarea在本例中，我们将在用户改变输入域内容时执行 JavaScript 代码：&lt;html&gt;&lt;head&gt;&l...

原创 省份城市实现二级联动效果

&lt;script&gt;var citys = new Array(); //一个二维数组，用于存储省市，依次对应 citys[1]=new Array("济南","青岛","烟台","济宁","德州","莱芜"); citys[2]=new Array("安庆","阜阳","合

转载 createTextNode和innerHTML

一、createTextNode 例如:var element = document.createElement("div");element.className = "message";var textNode = document.createTextNode("&lt;Strong&gt;Hello&lt;/Strong&gt;");element.appendChild(te...

转载 return 、break和continue的区别和作用

1.return关键字并不是专门用于跳出循环的，return的功能是结束一个方法。 一旦在循环体内执行到一个return语句，return语句将会结束该方法，循环自然也随之结束。与continue和break不同的是，return直接结束整个方法，不管这个return处于多少层循环之内。for (int i = 0; i &lt; 3 ; i++ ){　　　　　　System.out.prin...

转载 表单form中的submit事件

onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。但是onclick比onsubmit更早的被触发。提交过程1、用户点击按钮 —-&gt;2、触发onclick事件 —-&gt;3、onclick返回true或未...

转载 总结oninput、onchange与onpropertychange事件的使用方法和差别

前端页面开发的非常多情况下都须要实时监听文本框输入，比方腾讯微博编写140字的微博时输入框hu9i动态显示还能够输入的字数。过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现，可是这存在着一些不好的用户体验。比方onchange事件仅仅在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效；而onkeydown/onkeypress/onkey...