前端小技巧
关注
分享
扫一扫
文章平均质量分 91
Uncle_long
这个作者很懒，什么都没留下…
展开
-
es6数组方法find()、findIndex()与filter()的总结
find()该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的元素：const myArr=[1,2,3,4,5,6];var v=myArr.find...转载 2018-11-23 14:30:00 · 498 阅读 · 0 评论 -
Vue 不能检测变动数组的情况
当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue当你修改数组的长度时，例如： vm.items.length = newLength 为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果， 同时也将触发状态更新：// Vue.setVue.set(example1.items...原创 2018-05-28 15:21:00 · 421 阅读 · 0 评论 -
vue 使用clipboard实现复制功能
在vue中使用clipboard.js 时候发现一个问题，如果移动端不是input或者button，则复制不成功，使用步骤如下1. 引入clipboard.js[html] view plain copynpm install clipboard --save 2. 在需要使用的组件中import[javascript] view plain copyimport Clipboard from ...转载 2018-06-04 14:20:07 · 2279 阅读 · 0 评论 -
对象数组的深拷贝和对象的深拷贝
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、对...原创 2018-05-16 18:44:55 · 933 阅读 · 2 评论 -
解决vue-cli element-ui打包报错Unexpected token: operator (>)
1.问题描述我vue-cli写了项目，界面都是用element-ui写的，打包时报错：ERROR in assets/js/0.498ce690b229694d8858.js from UglifyJsUnexpected token: operator (>) [./~/element-ui/src/mixins/emitter.js:2,0][assets/js/0.498ce690b...转载 2018-05-16 14:36:26 · 6754 阅读 · 0 评论 -
js style.width获取不到元素的宽度
jquery用习惯了，用width()就能获取元素的宽度，但有些时候用js获取元素宽度获取不到，document.getElementById("id").style.width，原因：1.元素未设置宽度值2.元素设置了宽度值，但，设置在内联或外联样式表中，而非内嵌式的。虽然这种方式获取不到元素宽度，但是可以设置宽度 document.getElementById("id").style.widt...原创 2018-05-25 14:39:16 · 2351 阅读 · 0 评论 -
Vue中利用swiper实现自动轮播功能
前端工作中轮播图是必不可少的，最近一个项目需要在vue项目中插入轮播图，很多条数据显示n个，自动向上滚动，无缝连接，以前用过很多次swiper轮播插件，所以立马上手，以为手到擒来，结果。。。异步获取数据后初始化swipernew Vue({ el: "#networkWarningCounts", data: { ...原创 2018-05-25 11:52:04 · 2765 阅读 · 0 评论 -
lodash 常用方法
挑选数据 .pluck 或者 .map前面我们已经看到了很多用_.pluck来挑选数据的例子var collection = [ { name: 'Virginia', age: 45 }, { name: 'Debra', age: 34 }, { name: 'Jerry', age: 55 }, { name: 'Earl', age:...转载 2018-05-18 17:17:09 · 897 阅读 · 0 评论 -
echarts 常用方法 初始化和销毁
纵观ECharts图表实例化的API，主要有一下几个相关的实例化方法：1、setOption(Object option,{boolean = true} notMerge)参数：1）、Object类型的参数 option，表示图表数据结构 ，形如： 1.var option = {2. title: {3. text: "我...转载 2018-05-28 15:41:05 · 58322 阅读 · 0 评论 -
前台js实现附件比如word或者pdf的预览
https://view.officeapps.live.com/op/view.aspx?src=你的文件地址原创 2018-06-11 16:09:27 · 7047 阅读 · 1 评论 -
转换formdata参数格式
在formdata中传递复杂参数时，很头疼，期望是一个样子，结果到了后台又是另一个样子，介绍几个基本的formdata格式传递一个普通的对象obj:{name:'testname',age:'testage'}需要写成这个样子‘obj[name]’:'testname'‘obj[age]’:'testage'传递一个数组arr:['name','age','sex']需要写成这个...转载 2018-07-30 15:23:07 · 8943 阅读 · 4 评论 -
Leaflet调用谷歌地图、天地图、智图地图、高德题图一键搞定（转）
Leaflet调用各种地图的功能十分复杂，幸好有leaflet.ChineseTmsProviders这个插件，这四种地图直接就可以加载进来，十分方便。下面是我做的例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>转载 2018-07-17 15:52:24 · 4959 阅读 · 5 评论 -
chrome 浏览器记住密码后input黄色背景处理方法(两种)
使用chrome浏览器选择记住密码的账号，输入框会自动加上黄色的背景，有些设计输入框是透明背景的，需要去除掉这个黄色的背景；方法1：阴影覆盖? 1 2 3 input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !importa...原创 2018-06-25 10:03:03 · 1014 阅读 · 0 评论 -
WebUploader 解决文件多次上传和删除上传文件的问题
文件多次上传有两种情况：1. 上传前的多次选择2. 上传成功后，再次选择 其实API上，已经有了介绍了，不知道为什么有同学还是不知道如何做，我来抛砖引玉吧。配置项：duplicate {Boolean} [可选] [默认值：undefined] 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.将dupliacate设置为true, 允许文件多次上传其实有了这个配置就可以了，不...转载 2018-06-01 10:18:54 · 5596 阅读 · 0 评论 -
npm install、npm install --save与npm install --save-dev区别（转）
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...转载 2018-05-31 15:25:12 · 2114 阅读 · 0 评论 -
JS 点击复制Copy
1.实现点击按钮，复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl2() 3 { 4 var Url2=document.getElementById("biao1"); 5 Url2.select(); // 选择对象 6 document.execCommand("Copy"); // 执行浏览...转载 2018-05-30 14:22:44 · 298 阅读 · 0 评论 -
JavaScript闭包 取for循环i 【转】
解决办法一/*解决思路: 增加若干个对应的闭包域空间(这里采用的是匿名函数),专门用来存储原先需要引用的内容(下标),不过只限于基本类型(基本类型值传递,对象类型引用传递) */for(var i = 0;i<arr.length;i++){ //声明一个匿名函数,若传进来的是基本类型则为值传递,故不会对实参产生影响, //该函数对象有一个本地私有变量arg(...转载 2018-05-30 09:17:58 · 341 阅读 · 0 评论 -
js 获取天气预报
不逼逼，直接看方法1.2345天气预报插件 iframe 链接 http://tianqi.2345.com/plugin/2.百度天气接口$.ajax({ url:"http://api.map.baidu.com/telematics/v3/weather?location=北京&output=json&ak=H7W5CxI0BPzKtwGcBHmpGPAz50xP1Qj...原创 2018-05-24 17:06:28 · 5313 阅读 · 0 评论 -
lodash 对象+循环遍历+排序
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...原创 2018-05-18 16:16:46 · 5656 阅读 · 0 评论 -
lodash学习笔记之Array方法
1. chunk 英 [tʃʌŋk] 顾名思义，是对数组进行分块的方法 用法： _.chunk(array,number) 根据number对array进行均等的分块，如果array不能被number平分，则会留下一个余下的块。_.chunk(['a','b','c','d'],-1);//当 size<=1的时候，都是按1等分> ['a','b','c','...转载 2018-05-18 15:10:11 · 491 阅读 · 0 评论 -
css3 实现根据ul中li的个数设置li的宽度
<style> li{ width:100%; } li:first-child:nth-last-child(2), li:first-child:nth-last-child(2){ width:50%; } li:first-child:nth-last-child(3), li:first-child...原创 2018-05-11 08:56:41 · 3455 阅读 · 0 评论 -
如何通过cmd和nodejs开一个本地服务器
如何通过cmd开一个本地服务器1.首先你要下载安装node.js http://nodejs.cn/download/ 并且根据提示安装在自己的电脑上即可2.打开cmd管理员窗口输入npm -v 检测node.js是否安装成功：如上图所示检测到我的电脑已经安装了node.js而且版本是3.8.93.接着在命令行输入 npm install http-server转载 2017-09-01 19:00:53 · 1578 阅读 · 0 评论 -
js屏蔽掉调试时写的console.log
这属于代码级别的修改，重写console.log(），下面贴代码，有详细的注释：12345678910111213141516171819202122232425262转载 2017-09-01 11:23:52 · 4915 阅读 · 0 评论 -
history.go(-1)和history.back()的区别
简单的说就是：go(-1): 返回上一页，原页面表单中的内容会丢失；back(-1): 返回上一页，原页表表单中的内容会保留，一般还是back(-1)用的多;back()后退并刷新.原创 2017-09-18 16:42:58 · 842 阅读 · 0 评论 -
前端ajax返回乱码小笔记
一般这种情况 是因为后台需要确认是否需要加密 beforeSend: function (request) { request.setRequestHeader("EncryptType", "NONE"); },原创 2017-09-18 15:30:27 · 579 阅读 · 0 评论 -
浏览器隐藏滚动条的小技巧
html { -ms-overflow-style:none; overflow:-moz-scrollbars-none;}html::-webkit-scrollbar{width:0px}原创 2017-09-26 14:30:24 · 1678 阅读 · 0 评论 -
汇总前端最最常用的JS代码片段-你值得收藏
原始出处，可拷贝：http://www.w3cfuns.com/notes/25068/1d0d350a974d879e63f1115cf80a3288.html摘自：http://www.loveqiao.com/archives/768 http://www.cnblogs.com/hupan508/p/5337948.htmlhtml5选择器//参数均接收一个合法的转载 2017-09-26 10:50:38 · 314 阅读 · 0 评论 -
Flex 布局教程：语法篇
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo，也可以参考。以下内容主要参考了下面两转载 2017-08-31 16:13:50 · 322 阅读 · 0 评论 -
ajax方法 小笔记
function CallAjax(url, data, callBack) {//请求数据 jQuery.ajax({ type: "post", async: true, url: url, data: data, cache: false, success: function原创 2017-08-30 14:14:22 · 315 阅读 · 0 评论 -
JavaScript判断object/json 是否为空
JavaScript判断object/json 是否为空，可以使用jQuery的isEmptyObject()方法。此方法如下[javascript] view plain copyfunction isEmptyObject(e) { var t; for (t in e) retu转载 2017-09-11 16:37:13 · 625 阅读 · 0 评论 -
浅谈js中多并发的一些处理方法
经常在写代码的时候碰到这样的场景：页面初始化时显示loading页，同时启动多个ajax并发请求获取数据，当每个ajax请求返回时结束loading。举个例子，一个下订单的页面，要查询常用地址信息、商品信息、地市信息…而这些请求都是异步的，希望等到所有数据加载完成后再允许用户操作。要实现这个场景容易碰到的一个问题就是多并发怎么控制？下面是一些解决方法和思路：并行改为串行转载 2017-09-28 10:05:43 · 4396 阅读 · 0 评论 -
vue 修饰符sync
在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，...转载 2018-05-17 10:03:44 · 820 阅读 · 0 评论 -
什么是dom模板？什么是字符串模板？两者有什么关系？
dom模板就是原先就写在页面上的，能被浏览器识别的 html 结构，会在一加载就被浏览器渲染，所以要遵循 html 结构和标签命名，不然是不会被浏览器解析的，也就获取不到内容了，接着js获取 dom 节点的内容，就形成了 dom 模板。字符串模板可能原先放在服务器上啊，script标签里，js 的字符串里，原先不参与页面渲染的一串字符，所以呢 它可以不在乎 html 结构和标签命名，只要你最后根据...转载 2018-03-21 15:14:07 · 2725 阅读 · 0 评论 -
jsonp解决跨域
function jsonp(url, arg, fn) { // 1.动态创建script标签，设置src属性 var srpt = document.createElement('script') // srpt.src = '' // u...转载 2018-03-20 09:21:55 · 178 阅读 · 0 评论 -
web页面上可视化展示JSON数据的方法
0 引言最近需要做一个接口管理的功能，需要在前端页面展示从接口获取到的json数据，我上网查了一些资料，发现有 jquery的一个插件可以使用:jQuery.json-viewer 。页面展示的效果很好，但是需要安装npm包来实现。那么有没有不用安装npm包又能实现同样功能的方法呢？我继续搜索，终于发现了一个非常简单的方法：1实现方法方法其实很简单，直接上代码： html代码如下：<pre&...转载 2018-03-19 17:26:06 · 5060 阅读 · 1 评论 -
小马的git使用记
小马刚当上程序员，有一天老大说，咱们团队要使用git了。大家准备一下。 结果第二天就让用git管理代码。听领导说，我们线上分三个分支 master主分支，其实就是首次部署代码的时候用一下，线上正式环境的分支是release分支。然后我们测试用的分支是develop 分支。领导要求我们在 develop 上做好测试，然后发布到release分支上，然后上生产。首先必须安装转载 2017-12-04 10:05:18 · 278 阅读 · 0 评论 -
JS合并两个数组的方法
我们在项目过程中，有时候会遇到需要将两个数组合并成为一个的情况。 比如：12var a = [1,2,3];var b = [4,5,6]; 有两个数组a、b，需求是将两个数组合并成一个。方法如下： 1、concat js的Array对象提供了转载 2017-10-12 13:42:13 · 696 阅读 · 0 评论 -
vue如何给v-for循环的标签添加背景图片
v-bind:style="{ 'background-image': 'url(' + item.PlaceImgUrl + ')','background-repeat':'no-repeat','background-size':'cover' }"原创 2017-10-12 09:39:24 · 14348 阅读 · 4 评论 -
ajax+lazyload.js，如何只让新加载出来的元素lazyload
现在在做一个滚动无限加载+图片淡入懒加载的图片列表效果，基本上效果是实现了，但是有一个问题，就是每当加载出新图片之后，因为ajax成功返回数据后为了让新图片有懒加载效果，所以又执行了一次懒加载（如下代码），但这样却导致之前的旧图片（全部class="lazy"的图片）也重新执行了一次lazyload，致使现在每加载一次新数据，页面中的全部图片都淡入闪现一次，每加载一次就全都闪一次，体验很不原创 2017-10-11 11:09:06 · 813 阅读 · 0 评论 -
【移动端】iOS下setTimeout无法触发focus事件的解决方案
开篇总结：其实目前无法解决这个bug。这两天做项目遇到了这个case，项目需求是打开页面的时候，input元素自动弹起键盘。由于各种方面的考虑，我们希望通过setTimeout延时200毫秒让input元素focus，demo代码如下：doctype html>html lang="en">head> meta charset="UTF-8"> title>转载 2017-08-30 14:00:32 · 5105 阅读 · 1 评论