<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Uncle_long的博客]]></title><description><![CDATA[心大自然大]]></description><link>https://blog.youkuaiyun.com/Uncle_long</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Uncle_long]]></copyright><item><title><![CDATA[VUE-CLI3全局引入less的变量]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/103243216</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/103243216</guid><author>Uncle_long</author><pubDate>Mon, 25 Nov 2019 18:32:44 +0800</pubDate><description><![CDATA[在使用Vue开发的过程中，通常会用到一些样式的全局变量，如果在每个组件中引入就太繁琐了，维护性也不好，因此全局引入是个不错的想法。下面以less为例，记录一下全局引入less变量的步骤：

1、首先安装依赖

在项目根目录的命令行工具里，执行以下命令。


			1
			
			
			npm i style-resources-loader vue-cli-plugin-style-resou...]]></description><category></category></item><item><title><![CDATA[Element UI 的el-input同时绑定@keyup.enter.native和@blur冲突]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/103187819</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/103187819</guid><author>Uncle_long</author><pubDate>Thu, 21 Nov 2019 17:45:28 +0800</pubDate><description><![CDATA[问题： el-input框同时绑定键盘事件和blur事件，造成两次提交

Before:

keyup事件触发后，blur同样会被触发，造成两次提交handleInputConfirm方法。


&lt;div class="keyword-content"&gt;
    &lt;el-input
            class="input-new-tag"
            v-i...]]></description><category></category></item><item><title><![CDATA[reduce计算数组中每个元素出现的次数]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/102836776</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/102836776</guid><author>Uncle_long</author><pubDate>Thu, 31 Oct 2019 14:13:20 +0800</pubDate><description><![CDATA[let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=&gt;{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(name...]]></description><category></category></item><item><title><![CDATA[使用require.context实现前端工程自动化]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/102783071</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/102783071</guid><author>Uncle_long</author><pubDate>Mon, 28 Oct 2019 16:14:30 +0800</pubDate><description><![CDATA[require.context是什么

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

什么时候需要用到require.context

如果有以下情况,可以考虑使...]]></description><category></category></item><item><title><![CDATA[Vue Drag and Drop]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/102745248</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/102745248</guid><author>Uncle_long</author><pubDate>Fri, 25 Oct 2019 16:19:50 +0800</pubDate><description><![CDATA[1.设置 div 元素允许拖拽

draggable="true"

2.设置元素拖拽开始事件

@dragstart="drag(item.data)"


&lt;div style="border:1px solid green;" draggable="true" @dragstart="dragstart($event, item.data)" @dragend="dragend"&gt...]]></description><category></category></item><item><title><![CDATA[es6 Set去重]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/102684845</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/102684845</guid><author>Uncle_long</author><pubDate>Tue, 22 Oct 2019 16:12:58 +0800</pubDate><description><![CDATA[var arr = [1,2,3,4,2,3];

var arr1 = new Set(arr);

arr = [...arr1]

//[1,2,3,4]
]]></description><category></category></item><item><title><![CDATA[vue-cli3实现分环境打包步骤（给不同的环境配置相对应的打包命令）]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/102664476</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/102664476</guid><author>Uncle_long</author><pubDate>Mon, 21 Oct 2019 15:17:14 +0800</pubDate><description><![CDATA[在vue-cli3的项目中，

npm runserve时会把process.env.NODE_ENV设置为‘development’；

npm run build时会把process.env.NODE_ENV设置为‘production’；

此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。



头疼的是打包时线上环境可能分多种...]]></description><category></category></item><item><title><![CDATA[JavaScript 利用reduce 去掉对象数组中key值相同的对象 和 去重]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/102467716</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/102467716</guid><author>Uncle_long</author><pubDate>Wed, 09 Oct 2019 18:53:08 +0800</pubDate><description><![CDATA[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) =&gt; {
 obj[next.id]...]]></description><category></category></item><item><title><![CDATA[改变页面鼠标样式（为一个可爱的小图标）]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/100073775</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/100073775</guid><author>Uncle_long</author><pubDate>Mon, 26 Aug 2019 11:11:02 +0800</pubDate><description><![CDATA[css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以
前面url是自定义鼠标格式，图像的绝对路径地址，后面的参数是css标准的cursor样式


* {
    cursor: url(https://images2015.cnblogs.com/blog/961272/201607/961272-20160719145928310-8060720...]]></description><category></category></item><item><title><![CDATA[axios 上传显示进度]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/97130746</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/97130746</guid><author>Uncle_long</author><pubDate>Wed, 24 Jul 2019 14:31:12 +0800</pubDate><description><![CDATA[使用onUploadProgress实现


let self = this
this.axios.put(this.uploadUrl, this.files[0], {
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  transformRequest: [function (data) {
    return d...]]></description><category></category></item><item><title><![CDATA[NodeJs/Vue项目中对process.env的使用]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/89519829</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/89519829</guid><author>Uncle_long</author><pubDate>Thu, 25 Apr 2019 17:03:15 +0800</pubDate><description><![CDATA[NODE_ENV获取环境变量


let env = app.get('env')
let env = process.env.NODE_ENV
//默认 NODE_ENV 为环境变量名称
//可自行在 process.env 对象下定义需要使用的变量,在项目中可以根据
//不同的 env 值设置 defaultUrl 或者其他值


在webpack 打包的项目/Node JS项目中，可以安装 ...]]></description><category></category></item><item><title><![CDATA[vue中自定义触屏事件，点击、滑动、左滑、右滑、下滑、上滑、长按]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/88812164</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/88812164</guid><author>Uncle_long</author><pubDate>Tue, 26 Mar 2019 08:50:06 +0800</pubDate><description><![CDATA[主要思路为，首先监听触屏事件touchstart这样可以获取用户点击屏幕的位置，然后监听
touchend与touchmove事件这样可以获取用户触屏结束后的位置，
这样就可以计算出用户在屏幕上滑动的方向。最后通过vue的自定义事件，将事件注册为全局的事件。、
这样整个页面都可以使用触屏事件了。
具体的代码为

function vueTouch(el,binding,type){//触屏函数
...]]></description><category></category></item><item><title><![CDATA[JS简单实现自定义右键菜单]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/88292954</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/88292954</guid><author>Uncle_long</author><pubDate>Thu, 07 Mar 2019 11:24:34 +0800</pubDate><description><![CDATA[首先，我们要用css和html做一个自定义右键菜单。


&amp;lt;!--自定义右键菜单html代码--&amp;gt;
&amp;lt;div id=&quot;menu&quot;&amp;gt;
&amp;lt;div class=&quot;menu&quot;&amp;gt;功能1&amp;lt;/div&amp;gt;
&amp;lt;div class=&quot;menu&quot;&amp;gt;功能2&amp;lt;/div&amp;gt;
&amp;lt;div class=&q]]></description><category></category></item><item><title><![CDATA[javascript中call()、apply()、bind()的用法]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/87913755</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/87913755</guid><author>Uncle_long</author><pubDate>Mon, 25 Feb 2019 11:21:09 +0800</pubDate><description><![CDATA[先看明白下面：

　　例1



  obj.objAge;  //17

  obj.myFun()  //小张年龄undefined
　　例2
　

　shows()  //盲僧　

 

比较一下这两者this 的差别，第一个打印里面的this 指向obj，第二个全局声明的shows()函数   this 是window ；

 

1，call()、apply()、bind() 都是用来重...]]></description><category></category></item><item><title><![CDATA[轻量级JavaScript(JS) HSLA颜色选择器]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/87370556</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/87370556</guid><author>Uncle_long</author><pubDate>Fri, 15 Feb 2019 16:46:39 +0800</pubDate><description><![CDATA[https://www.jianshu.com/p/0c38853c41fb]]></description><category></category></item><item><title><![CDATA[Vue项目中出现Loading chunk {n} failed问题的解决方法]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/86703732</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/86703732</guid><author>Uncle_long</author><pubDate>Wed, 30 Jan 2019 15:19:40 +0800</pubDate><description><![CDATA[由于项目里面用到了vue-router，vue-router的错误处理函数 onError 是不是能够捕获该错误呢？我们来看一下官方文档的说明:



当在渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。 完全符合我们场景，所以在onError方法中我们实现如下代码：


router.onError((error) =&amp;gt; {
  const pattern = /Loading ...]]></description><category></category></item><item><title><![CDATA[Vue中定义全局函数]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/86577039</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/86577039</guid><author>Uncle_long</author><pubDate>Mon, 21 Jan 2019 16:11:59 +0800</pubDate><description><![CDATA[方法一:
	//在mian.js中写入函数

Vue.prototype.changeData = function (){
  alert('执行成功');
}



//在所有组件里可调用函数


this.changeData();


方法二:
	// 写好自己需要的base.js文件

exports.install = function (Vue, options) {
    Vue...]]></description><category></category></item><item><title><![CDATA[es6中class类的全方面理解]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/86230072</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/86230072</guid><author>Uncle_long</author><pubDate>Thu, 10 Jan 2019 14:09:45 +0800</pubDate><description><![CDATA[传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，很有一种独树一帜的感脚！非常容易让人困惑！
如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。构造函数示例：


//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）
functi...]]></description><category></category></item><item><title><![CDATA[less计算宽高]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/85162705</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/85162705</guid><author>Uncle_long</author><pubDate>Fri, 21 Dec 2018 15:21:59 +0800</pubDate><description><![CDATA[在css中有函数calc（）可以动态地计算不同比例的高度或宽度，比如

    height: calc(100% - 30px);

在css中表达正常，在less中出错，因为 less 本身就有 ‘减’ 这个操作，所以就违背了原意，所以在 less 中，要写成：

    height: ~&quot;calc(100% - 30px)&quot;;

若要需要按照某个比例固定高度可以用

    min-hei...]]></description><category></category></item><item><title><![CDATA[vue数组中对象属性变化页面不渲染问题]]></title><link>https://blog.youkuaiyun.com/Uncle_long/article/details/85162652</link><guid>https://blog.youkuaiyun.com/Uncle_long/article/details/85162652</guid><author>Uncle_long</author><pubDate>Fri, 21 Dec 2018 15:19:24 +0800</pubDate><description><![CDATA[
			// Vue.set

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

			example1.items.splice(indexOfItem, 1, newValue)
			
		]]></description><category></category></item></channel></rss>