![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
红色枫叶520
这个作者很懒,什么都没留下…
展开
-
请求头太大 --max-http-header-size=size
原创 2021-02-24 14:38:31 · 3089 阅读 · 0 评论 -
require.context前端自动导入文件方法
require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入,但是如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.co.原创 2020-05-28 18:24:41 · 681 阅读 · 0 评论 -
优雅的使用VUE---「全局组件注册」
组件是我们非常常用的东西,很多人使用组件都是通过一个一个文件去引用和注册。如果一个组件在整个项目里面的使用次数较多,每一次使用都需要引用并注册,就会显得特别麻烦当们在项目需要重复多次使用该组件,会导致出现很多重复的引入和注册代码,既繁琐又不雅观。因此我们可以通过一个全局的Js文件来管理,将需要多次使用的组件进行全局注册创建全局.js文件管理全局组件// 1 - globalComponent.jsimport Vue from 'vue' // 引入vue// 处理首字母大写 abc =.原创 2020-05-28 18:19:47 · 211 阅读 · 0 评论 -
优雅的使用VUE----「拯救繁乱的template」
很多人在写组件的时候,会依赖脚手架中的标签,其实template也存在一定的缺陷,例如:template里存在一值多判断过多使用template会使代码冗余,杂乱VUE给我们提供了一个render函数,我们可以通过这个函数巧妙的解决template造成的问题// 父组件引入<template> <div> <h1>I am Home</h1> <!-- 按钮根据value显示不同类型的button -->原创 2020-05-28 17:57:24 · 459 阅读 · 0 评论 -
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) { ...原创 2020-04-22 17:40:40 · 2373 阅读 · 1 评论 -
css文本步不换行的情况
一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行。解决方法(以IE,chrome,FF为测试浏览器):word-break...原创 2020-04-17 15:32:15 · 567 阅读 · 0 评论 -
高德地图获取精确定位信息
function loadmap(){ let that = this this.$vux.loading.show({ text: '获取定位信息...' }) //初始化地图对象,加载地图 var map = new AMap.Map('containers', { res...原创 2020-02-10 14:50:00 · 1008 阅读 · 0 评论 -
ios底部流出空隙
&::after {display: block;content: “”;height: env(safe-area-inset-bottom);}原创 2020-01-09 15:15:24 · 239 阅读 · 0 评论 -
四种常见的 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...原创 2019-11-08 16:01:57 · 3484 阅读 · 0 评论 -
vue组件添加事件@click.native
1,给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件2,等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit(“click”.fn)<Item @click.native = "shijian()"></Item>.native作用:[给组件绑定原生事件]例子:如果使用route...原创 2019-10-28 10:21:04 · 957 阅读 · 1 评论 -
用axios.all处理并发请求
如果我们需用在两个接口同时完成后,然后在执行一些逻辑,我们可以使用axios.all处理并发请求,如下所示:function getUserAccount() { return axios.get('/user/12345');}function getUserPermissions() { return axios.get('/user/12345/permissions');...原创 2019-10-24 15:28:23 · 403 阅读 · 0 评论 -
void 0和undefined区别
为什么有的编程规范要求用 void 0 代替 undefined?-voidvoid是JavaScript的一个操作符,而void 0会返回undefined,实验出真知,可以在浏览器试验一下console.log(void 0) // undefinedconsole.log(void 0 === undefined) // true原因MDN上了解一下undefined的定义...原创 2019-10-24 10:23:54 · 635 阅读 · 0 评论 -
判断在ios系统中打开微信浏览器
function isWeiXinAndIos() {// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息,这个属性可以用来判断浏览器类型let ua = “” + window.navigator.userAgent.toLowerCase();// 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是I...原创 2019-10-24 10:05:57 · 881 阅读 · 0 评论 -
利用clipboard进行复制粘贴
首先引入模板:npm install clipboard --save然后在需要引用的组件中进行引用:import Clipboard from 'cipboard'安装clipboard完成,可以开始写代码了,示例代码:<template> <p id="msg"> copy message </p> //设置id,用以后面获取数据 &...原创 2019-10-22 17:08:48 · 1385 阅读 · 0 评论 -
判断是否是手机打开网页
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...原创 2019-10-22 16:02:43 · 327 阅读 · 0 评论 -
判断富文本字节个数
str.replace(/</?[^>]>/g,’’).replace(/[ | ]\n/g,’\n’).replace(/\n[\s| | ]*\r/g,’\n’).replace(/ /ig,’’).length原创 2019-10-22 14:25:50 · 743 阅读 · 0 评论 -
vue中使用qrcode动态生成二维码并下载,并解决多次生成二维码的问题
vue页面npmnpm install qrcodejs2import在所需页面导入import QRCode from ‘qrcodejs2’use生成二维码qrcode (url) { // 一定要加上document.getElementById("qrcode").innerHTML = "";,否则每点击一次按钮就会多一个二维码 docum...原创 2019-08-15 17:36:18 · 5092 阅读 · 1 评论 -
图片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...原创 2019-08-15 17:38:48 · 2901 阅读 · 0 评论 -
在全局引入公共组件
import modules from "./module";// 引入自定义公共组件Object.keys(modules).forEach(key => { const name = key.replace(/(\w)/, v => v.toUpperCase()); // 首字母大写 Vue.component(`${name}`, modules[key]);})...原创 2019-08-22 10:07:08 · 726 阅读 · 1 评论 -
上传图片至服务器并返回
getObjectURL(event) { var files = event.target.files; if (!/\/(?:jpeg|png|gif)/i.test(files[0].type)) return; if (files && files.length > 0) { // 获取目前上传的文件 ...原创 2019-08-22 10:28:56 · 529 阅读 · 0 评论 -
解决input上传文件选择同一文件change事件不生效
原创 2019-09-04 13:13:34 · 1604 阅读 · 0 评论 -
如何提高 webpack 构建 Vue 项目的速度
执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了。在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间。所以,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库,这样既可大大缩短构建时间利用 webpack 的插件 DllPlugin 和 DllReferencePlugin如...原创 2019-08-19 14:39:13 · 444 阅读 · 0 评论