- 博客(81)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 VUE-CLI3全局引入less的变量
在使用Vue开发的过程中，通常会用到一些样式的全局变量，如果在每个组件中引入就太繁琐了，维护性也不好，因此全局引入是个不错的想法。下面以less为例，记录一下全局引入less变量的步骤：1、首先安装依赖在项目根目录的命令行工具里，执行以下命令。 1 npm i style-resources-loader vue-cli-plugin-style-resou...
2019-11-25 18:32:44
449
转载 Element UI 的el-input同时绑定@keyup.enter.native和@blur冲突
问题： el-input框同时绑定键盘事件和blur事件，造成两次提交Before:keyup事件触发后，blur同样会被触发，造成两次提交handleInputConfirm方法。<div class="keyword-content"> <el-input class="input-new-tag" v-i...
2019-11-21 17:45:28
3487
原创 reduce计算数组中每个元素出现的次数
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...
2019-10-31 14:13:20
845
转载 使用require.context实现前端工程自动化
require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块什么时候需要用到require.context如果有以下情况,可以考虑使...
2019-10-28 16:14:30
269
转载 Vue Drag and Drop
1.设置 div 元素允许拖拽draggable="true"2.设置元素拖拽开始事件@dragstart="drag(item.data)"<div style="border:1px solid green;" draggable="true" @dragstart="dragstart($event, item.data)" @dragend="dragend">...
2019-10-25 16:19:50
581
原创 es6 Set去重
var arr = [1,2,3,4,2,3];var arr1 = new Set(arr);arr = [...arr1]//[1,2,3,4]
2019-10-22 16:12:58
385
转载 vue-cli3实现分环境打包步骤（给不同的环境配置相对应的打包命令）
在vue-cli3的项目中，npm runserve时会把process.env.NODE_ENV设置为‘development’；npm run build时会把process.env.NODE_ENV设置为‘production’；此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。头疼的是打包时线上环境可能分多种...
2019-10-21 15:17:14
716
原创 JavaScript 利用reduce 去掉对象数组中key值相同的对象 和 去重
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]...
2019-10-09 18:53:08
2146
转载 改变页面鼠标样式（为一个可爱的小图标）
css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以前面url是自定义鼠标格式，图像的绝对路径地址，后面的参数是css标准的cursor样式* { cursor: url(https://images2015.cnblogs.com/blog/961272/201607/961272-20160719145928310-8060720...
2019-08-26 11:11:02
2467
1
转载 axios 上传显示进度
使用onUploadProgress实现let self = thisthis.axios.put(this.uploadUrl, this.files[0], { headers: { 'Content-Type': 'multipart/form-data' }, transformRequest: [function (data) { return d...
2019-07-24 14:31:12
794
转载 NodeJs/Vue项目中对process.env的使用
NODE_ENV获取环境变量let env = app.get('env')let env = process.env.NODE_ENV//默认 NODE_ENV 为环境变量名称//可自行在 process.env 对象下定义需要使用的变量,在项目中可以根据//不同的 env 值设置 defaultUrl 或者其他值在webpack 打包的项目/Node JS项目中，可以安装 ...
2019-04-25 17:03:15
1621
转载 vue中自定义触屏事件，点击、滑动、左滑、右滑、下滑、上滑、长按
主要思路为，首先监听触屏事件touchstart这样可以获取用户点击屏幕的位置，然后监听touchend与touchmove事件这样可以获取用户触屏结束后的位置，这样就可以计算出用户在屏幕上滑动的方向。最后通过vue的自定义事件，将事件注册为全局的事件。、这样整个页面都可以使用触屏事件了。具体的代码为function vueTouch(el,binding,type){//触屏函数...
2019-03-26 08:50:06
6231
1
转载 JS简单实现自定义右键菜单
首先，我们要用css和html做一个自定义右键菜单。<!--自定义右键菜单html代码--><div id="menu"><div class="menu">功能1</div><div class="menu">功能2</div><div class=&q
2019-03-07 11:24:34
1135
原创 javascript中call()、apply()、bind()的用法
先看明白下面： 例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows() //盲僧 比较一下这两者this 的差别，第一个打印里面的this 指向obj，第二个全局声明的shows()函数 this 是window ； 1，call()、apply()、bind() 都是用来重...
2019-02-25 11:21:09
242
转载 Vue项目中出现Loading chunk {n} failed问题的解决方法
由于项目里面用到了vue-router，vue-router的错误处理函数 onError 是不是能够捕获该错误呢？我们来看一下官方文档的说明:当在渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。 完全符合我们场景，所以在onError方法中我们实现如下代码：router.onError((error) => { const pattern = /Loading ...
2019-01-30 15:19:40
16794
6
原创 Vue中定义全局函数
方法一: //在mian.js中写入函数Vue.prototype.changeData = function (){ alert('执行成功');}//在所有组件里可调用函数this.changeData();方法二: // 写好自己需要的base.js文件exports.install = function (Vue, options) { Vue...
2019-01-21 16:11:59
728
转载 es6中class类的全方面理解
传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，很有一种独树一帜的感脚！非常容易让人困惑！如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。构造函数示例：//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）functi...
2019-01-10 14:09:45
503
转载 less计算宽高
在css中有函数calc（）可以动态地计算不同比例的高度或宽度，比如 height: calc(100% - 30px);在css中表达正常，在less中出错，因为 less 本身就有 ‘减’ 这个操作，所以就违背了原意，所以在 less 中，要写成： height: ~"calc(100% - 30px)";若要需要按照某个比例固定高度可以用 min-hei...
2018-12-21 15:21:59
3946
原创 vue数组中对象属性变化页面不渲染问题
// Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)
2018-12-21 15:19:24
2082
转载 element-ui 解决 table 里包含表单验证的问题！
https://www.cnblogs.com/Kummy/p/9470393.html
2018-12-20 19:50:14
4158
转载 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
转载 第三方微信接入登录流程整理
准备工作1.在微信开放平台https://open.weixin.qq.com/注册成为开发者。2.在“管理中心”中创建一个移动应用，需“应用名称、简介、及28*28和108*108的PNG图片各一张，且大小不超过300k”,点击下一步，需“应用官网地址，应用签名及包名”等信息，然后即可提交审核。 说明： 应用签名：可在微信开发平台的资源中心》》资源下载》》中下载“签名生成工具”，用户...
2018-09-13 15:48:51
736
转载 element ui table scrollTop 滚动到行头或行尾
滚动到第一行：this.$refs.table.bodyWrapper.scrollTop =0;滚动到最后一行：this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight;
2018-09-13 10:25:05
3176
原创 CSS3技巧：fit-content水平居中
<div class="navbar center"> <ul> <li><a href="/">首页</a></li> <li><a href="/">关于我们</a>&
2018-09-11 11:05:22
987
原创 webpack src/entry.js dist/bundle.js报错
在开始学习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...
2018-08-22 13:44:50
1110
转载 如何免费快速的搭建个人网站
http://blog.youkuaiyun.com/u012487644/article/details/78678506
2018-08-16 14:24:26
547
转载 ["1", "2", "3"].map(parseInt)
["1", "2", "3"].map(parseInt)得到什么？答案是：[1, NaN, NaN].原因：parseInt接收的是两个参数，map传递的是3个参数。map函数定义：arr.map(callback[,thisArg]);callback原数组中的元素经过该方法后返回一个新的元素。currentValue callback的第一个参数，数...
2018-08-14 10:42:47
758
2
转载 前端开发的历史和趋势
什么是前端 前端：针对浏览器的开发，代码在浏览器运行 后端：针对服务器的开发，代码在服务器运行 前后端不分的时代互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。 后端收到浏览器的请求 生成静态页面 发送到浏览器 后端 MVC 的开发模式那时的网站开发，采用的是后端 MVC 模式。 Model（模型层）：提供/保存数据...
2018-08-08 15:42:47
484
转载 前端性能优化
一、什么是前端性能优化（what）？ 从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。 二、为什么要做前端性能优化（why）？在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，导致网站访问速度...
2018-08-07 15:03:58
183
转载 转换formdata参数格式
在formdata中传递复杂参数时，很头疼，期望是一个样子，结果到了后台又是另一个样子，介绍几个基本的formdata格式传递一个普通的对象obj:{name:'testname',age:'testage'}需要写成这个样子‘obj[name]’:'testname'‘obj[age]’:'testage'传递一个数组arr:['name','age','sex']需要写成这个...
2018-07-30 15:23:07
8941
转载 关于vue使用Element组件时v-for循环里的表单项验证的方法
这篇文章主要介绍了vue使用Element组件时v-for循环里的表单项验证方法，内容挺不错的，现在分享给大家，也给大家做个参考。 标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API...
2018-07-27 14:35:47
4657
转载 Leaflet调用谷歌地图、天地图、智图地图、高德题图一键搞定（转）
Leaflet调用各种地图的功能十分复杂，幸好有leaflet.ChineseTmsProviders这个插件，这四种地图直接就可以加载进来，十分方便。下面是我做的例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>
2018-07-17 15:52:24
4954
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
转载 js中的this指向
js中的this指向十分重要，了解js中this指向是每一个学习js的人必学的知识点，今天没事，正好总结了js中this的常见用法，喜欢的可以看看：全局作用域或者普通函数中this指向全局对象window。//直接打印console.log(this) //window//function声明函数function bar () {console.log(this)}bar() //win...
2018-06-20 09:42:55
221
原创 前台js实现附件比如word或者pdf的预览
https://view.officeapps.live.com/op/view.aspx?src=你的文件地址
2018-06-11 16:09:27
7040
1
转载 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
转载 WebUploader 解决文件多次上传和删除上传文件的问题
文件多次上传有两种情况：1. 上传前的多次选择2. 上传成功后，再次选择 其实API上，已经有了介绍了，不知道为什么有同学还是不知道如何做，我来抛砖引玉吧。配置项：duplicate {Boolean} [可选] [默认值：undefined] 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.将dupliacate设置为true, 允许文件多次上传其实有了这个配置就可以了，不...
2018-06-01 10:18:54
5542
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人