Uncle_long的博客

在使用Vue开发的过程中，通常会用到一些样式的全局变量，如果在每个组件中引入就太繁琐了，维护性也不好，因此全局引入是个不错的想法。下面以less为例，记录一下全局引入less变量的步骤：1、首先安装依赖在项目根目录的命令行工具里，执行以下命令。 1 npm i style-resources-loader vue-cli-plugin-style-resou...

问题： el-input框同时绑定键盘事件和blur事件，造成两次提交Before:keyup事件触发后，blur同样会被触发，造成两次提交handleInputConfirm方法。<div class="keyword-content"> <el-input class="input-new-tag" v-i...

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];let nameNum = names.reduce((pre,cur)=>{ if(cur in pre){ pre[cur]++ }else{ pre[cur] = 1 } return pre},{})console.log(name...

require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块什么时候需要用到require.context如果有以下情况,可以考虑使...

1.设置 div 元素允许拖拽draggable="true"2.设置元素拖拽开始事件@dragstart="drag(item.data)"<div style="border:1px solid green;" draggable="true" @dragstart="dragstart($event, item.data)" @dragend="dragend"&gt...

var arr = [1,2,3,4,2,3];var arr1 = new Set(arr);arr = [...arr1]//[1,2,3,4]

方法一: //在mian.js中写入函数Vue.prototype.changeData = function (){ alert('执行成功');}//在所有组件里可调用函数this.changeData();方法二: // 写好自己需要的base.js文件exports.install = function (Vue, options) { Vue...

// Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)

find()该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的元素：const myArr=[1,2,3,4,5,6];var v=myArr.find...

主要思路为，首先监听触屏事件touchstart这样可以获取用户点击屏幕的位置，然后监听touchend与touchmove事件这样可以获取用户触屏结束后的位置，这样就可以计算出用户在屏幕上滑动的方向。最后通过vue的自定义事件，将事件注册为全局的事件。、这样整个页面都可以使用触屏事件了。具体的代码为function vueTouch(el,binding,type){//触屏函数...

准备工作1.在微信开放平台https://open.weixin.qq.com/注册成为开发者。2.在“管理中心”中创建一个移动应用，需“应用名称、简介、及28*28和108*108的PNG图片各一张，且大小不超过300k”,点击下一步，需“应用官网地址，应用签名及包名”等信息，然后即可提交审核。 说明： 应用签名：可在微信开发平台的资源中心》》资源下载》》中下载“签名生成工具”，用户...

https://www.jianshu.com/p/0c38853c41fb

由于项目里面用到了vue-router，vue-router的错误处理函数 onError 是不是能够捕获该错误呢？我们来看一下官方文档的说明:当在渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。 完全符合我们场景，所以在onError方法中我们实现如下代码：router.onError((error) =&gt; { const pattern = /Loading ...

先看明白下面：　　例1  obj.objAge;  //17  obj.myFun()  //小张年龄undefined　　例2　　shows()  //盲僧　 比较一下这两者this 的差别，第一个打印里面的this 指向obj，第二个全局声明的shows()函数   this 是window ； 1，call()、apply()、bind() 都是用来重...

首先，我们要用css和html做一个自定义右键菜单。&lt;!--自定义右键菜单html代码--&gt;&lt;div id="menu"&gt;&lt;div class="menu"&gt;功能1&lt;/div&gt;&lt;div class="menu"&gt;功能2&lt;/div&gt;&lt;div class=&q

使用onUploadProgress实现let self = thisthis.axios.put(this.uploadUrl, this.files[0], { headers: { 'Content-Type': 'multipart/form-data' }, transformRequest: [function (data) { return d...

letarr = [ {"weight":10,"id":1}, {"weight":20,"id":2}, {"weight":30,"id":2}, {"weight":40,"id":4}, {"weight":50,"id":5}];letobj = {}arr = arr.reduce((item, next) => { obj[next.id]...

前端工作中轮播图是必不可少的，最近一个项目需要在vue项目中插入轮播图，很多条数据显示n个，自动向上滚动，无缝连接，以前用过很多次swiper轮播插件，所以立马上手，以为手到擒来，结果。。。异步获取数据后初始化swipernew Vue({                el: "#networkWarningCounts",                data: {             ...

滚动到第一行：this.$refs.table.bodyWrapper.scrollTop =0;滚动到最后一行：this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight;

技术胖 http://jspang.com/2017/09/16/webpack3-2/ 

在开始学习webpack时 webpack src/entry.js dist/bundle.js报错发现是因为webpack版本太高 用的最新的4.17.0解决办法：webpack src/entry.js dist/bundle.js中间加一个--outputwebpack src/entry.js --output dist/bundle.js...

纵观ECharts图表实例化的API，主要有一下几个相关的实例化方法：1、setOption(Object option,{boolean = true} notMerge)参数：1）、Object类型的参数 option，表示图表数据结构 ，形如：  1.var option  = {2.                title: {3.                    text: "我...

在vue中使用clipboard.js 时候发现一个问题，如果移动端不是input或者button，则复制不成功，使用步骤如下1. 引入clipboard.js[html] view plain copynpm install clipboard --save  2. 在需要使用的组件中import[javascript] view plain copyimport Clipboard from ...

1、对于普通数组（数组元素为数字或者字符串），深拷贝很简单，拷贝之后两个数组指针指向的存储地址不同，从而完成深拷贝var _test = [1,2,3];//原数组var _testCopy = [].concat(_test);//拷贝数组_testCopy[0]=4;console.log(_test);// [1,2,3]console.log(_testCopy);//[4,2,3]2、对...

jquery用习惯了，用width()就能获取元素的宽度，但有些时候用js获取元素宽度获取不到，document.getElementById("id").style.width，原因：1.元素未设置宽度值2.元素设置了宽度值，但，设置在内联或外联样式表中，而非内嵌式的。虽然这种方式获取不到元素宽度，但是可以设置宽度 document.getElementById("id").style.widt...

挑选数据 .pluck 或者 .map前面我们已经看到了很多用_.pluck来挑选数据的例子var collection = [ { name: 'Virginia', age: 45 }, { name: 'Debra', age: 34 }, { name: 'Jerry', age: 55 }, { name: 'Earl', age:...

1._.forEach(collection, [iteratee=_.identity], [thisArg])  遍历_.forEach([22,33,11,55],function (value) {//若一个参数，返回的便是其value值 console.log(value);//22 33 11 55 }); _.forEach([22,33,11,55],f...

1. chunk   英 [tʃʌŋk]    顾名思义，是对数组进行分块的方法    用法： _.chunk(array,number)  根据number对array进行均等的分块，如果array不能被number平分，则会留下一个余下的块。_.chunk(['a','b','c','d'],-1);//当 size&lt;=1的时候，都是按1等分&gt; ['a','b','c','...

在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，...

https://view.officeapps.live.com/op/view.aspx?src=你的文件地址

不逼逼，直接看方法1.2345天气预报插件 iframe 链接 http://tianqi.2345.com/plugin/2.百度天气接口$.ajax({    url:"http://api.map.baidu.com/telematics/v3/weather?location=北京&amp;output=json&amp;ak=H7W5CxI0BPzKtwGcBHmpGPAz50xP1Qj...

一、什么是前端性能优化（what）？     从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。 二、为什么要做前端性能优化（why）？在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，导致网站访问速度...

["1", "2", "3"].map(parseInt)得到什么？答案是：[1, NaN, NaN].原因：parseInt接收的是两个参数，map传递的是3个参数。map函数定义：arr.map(callback[,thisArg]);callback原数组中的元素经过该方法后返回一个新的元素。currentValue      callback的第一个参数，数...

在formdata中传递复杂参数时，很头疼，期望是一个样子，结果到了后台又是另一个样子，介绍几个基本的formdata格式传递一个普通的对象obj:{name:'testname',age:'testage'}需要写成这个样子‘obj[name]’:'testname'‘obj[age]’:'testage'传递一个数组arr:['name','age','sex']需要写成这个...

js中的this指向十分重要，了解js中this指向是每一个学习js的人必学的知识点，今天没事，正好总结了js中this的常见用法，喜欢的可以看看：全局作用域或者普通函数中this指向全局对象window。//直接打印console.log(this) //window//function声明函数function bar () {console.log(this)}bar() //win...

文件多次上传有两种情况：1. 上传前的多次选择2. 上传成功后，再次选择 其实API上，已经有了介绍了，不知道为什么有同学还是不知道如何做，我来抛砖引玉吧。配置项：duplicate {Boolean} [可选] [默认值：undefined] 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.将dupliacate设置为true,  允许文件多次上传其实有了这个配置就可以了，不...

npm install X:会把X包安装到node_modules目录中不会修改package.json之后运行npm install命令时，不会自动安装Xnpm install X –save:会把X包安装到node_modules目录中会在package.json的dependencies属性下添加X之后运行npm install命令时，会自动安装X到node_modules目录中之后运行np...

1.实现点击按钮，复制文本框中的的内容 1 &lt;script type="text/javascript"&gt; 2 function copyUrl2() 3 { 4 var Url2=document.getElementById("biao1"); 5 Url2.select(); // 选择对象 6 document.execCommand("Copy"); // 执行浏览...

解决办法一/*解决思路: 增加若干个对应的闭包域空间(这里采用的是匿名函数),专门用来存储原先需要引用的内容(下标),不过只限于基本类型(基本类型值传递,对象类型引用传递) */for(var i = 0;i&lt;arr.length;i++){ //声明一个匿名函数,若传进来的是基本类型则为值传递,故不会对实参产生影响, //该函数对象有一个本地私有变量arg(...

最近公司项目要把一些项目信息在地图上显示，所以请教公司GIS同事并研究，使ArcGIS API for JavaScript能够本地化部署。1.首先需要下载ArcGIS API for JavaScript，解压放到js文件夹；2.修改dojo.js和init.js里面的baseurl，想用相对路径可以，都设置成/js/arcgis_js_api/library/4.5/dojo；3.在html文...