随手记录常见问题（二）

Q1：为了实现鉴权功能，在header请求头加入自定义的字段，与后端在本地联调没有问题。布到线上后端无法获取header头的字段，浏览器里network里显示header有自定义字段

A：是因为Nginx的问题，对于nginx来说，默认是过滤掉自定义的含有下划线name。。。

  需要在conf的http段添加：

underscores_in_headers on;

#该属性默认为off，表示如果header name中包含下划线，则忽略掉、

使其支持header name定义中包含下划线。

或者改掉自定义的名字让其符合要求。

Q2: 计算属性和过滤器的区别

A: 计算属性
1、计算属性适合用在单个属性的计算；
2、计算属性只能在单个vue实例中使用；
3、计算属性不能接收参数，只能使用data中定义的变量进行计算；
4、计算属性有缓存机制，可减少调用次数；
5、计算属性相当于定义一个变量

过滤器
1、过滤器适合多个同样计算方法的属性的计算；
2、过滤器可以定义为全局过滤器，在多个vue实例中使用；
3、过滤器可以接收多个参数进行计算；
4、过滤器没有缓存机制，每调用一次都会计算一次；
5、过滤器相当于定义一个特殊的方法

Q3: dragenter、dragleave频繁触发问题

做一个拖动上传到文件夹的功能时遇到的问题，拖动到指定区域时加遮罩，取消/离开时取消遮罩，结果疯狂触发dragenter,dragleave.

A: （原因）如果绑定事件的容器，包含子节点，那么你的子节点都会触发dragenter，而你的dragleave，触发的是上次移入的那个节点。

（解决方法）把最后一次移入的节点，记录下来，然后每次触发后，做比较，移入和移出元素相同才触发。 

参考链接：所谓dragenter和dragleave的“失效”问题

let elemetnNode=""//最后一次节点 解决子节点重复enter leave问题
let doc = document.getElementById('drop-area');
// 防止触发浏览器自动下载行为
doc.addEventListener("dragenter",function(e){
      elemetnNode = e.target; // 记录
      document.getElementById('drop-bg').style.display = 'block'
      e.stopPropagation();
      e.preventDefault();
 })
doc.addEventListener("dragleave",function(e){
   if(e.target === elemetnNode) { /*关键判断*/
      document.getElementById('drop-bg').style.display = 'none'
   }
      e.stopPropagation();
      e.preventDefault();
})
doc.addEventListener("dragover",function(e){
      e.stopPropagation();
      e.preventDefault();
})
doc.addEventListener("drop",function(e){
      e.stopPropagation();
      e.preventDefault();
      document.getElementById('drop-bg').style.display = 'none'
})

 

标签：常见问题,随手,dragenter,记录,drop,计算,过滤器,dragleave,属性
来源： https://www.cnblogs.com/xinxinzh/p/15661509.html