Vue问题收集

Vue处理问题收集：

问题场景：做文档库功能，新建文件夹编辑文件名时blur出现调用两次的情况

---

1. Vue blur和keyup事件重复调用

blur点赞重复提交
实现思路1~3
1.@input设置blur=true开关变量，允许调用
2.@blur使用blur判断是否调用事件
3.@blur和@keyup 触发函数设置blur=false关闭函数入口

Vue输入框同时绑定了blur和其他事件，避免同时触发两次事件
做的项目有个需求，弹窗里面有个表单，里面的输入框按回车和失焦都可以触发某一事件，如果同时绑定就会出现按回车之后，在关闭弹窗或点击其他位置都会触发blur的事件，解决方法：

页面结构：

blur是data里面的一个变量，初始值是true，@blur在blur为true的时候才能触发。

js代码：

// An highlighted block
export default {
  data() {
    return {
      blur:true,
      },
  },
  methods: {
  //func函数是用来解决用户enter之后再输入内容blur失效的问题
    func(){
      this.blur=true;
    },
    //blur触发的事件
    getTestInfoBlur(){
      this.getTestInfo();
    },
    //enter触发的事件，触发之后把blur设置为false，避免重复触发
     getTestInfoEnter(){
      this.blur=false;
      this.getTestInfo();
    },
    //你自己的代码
    getTestInfo() {
      ...
    },
};

————————————————
版权声明：本文为CSDN博主「YUUULINNN」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39439394/article/details/103782014

---

学习时间：

提示：这里可以添加计划学习的时间
2021/06/24

---

总结：

原生js解决办法
1、 使用one函数绑定事件，ajax调用请求成功或者失败后在重新绑定one函数
2、 写一个秒表记录器（变量），三秒内只能调用一次方法，三秒后才可以进入方法逻辑
3、 针对重复查询情况：preSearchName记录上一次的查询数据，如果数据和当前值相同则不调用请求

问题场景：做文档库功能，新建文件夹编辑文件名时blur出现调用两次的情况

---

2. OnContextMenu 自定义功能菜单和浏览器默认右键菜单冲突

1.问题情况，自定义功能菜单和默认右键菜单同时出现

2.实现效果
备注：空白处右键自定义功能菜单，动态新增对象”文件夹“和”文件“不会被全局对象生效。

3.解决办法：οncοntextmenu=“return false;”
备注：除了容器div需要设置，内部新增对象”文件夹"和“文件”都需要设置。此处div代码实现空包出不出现右键菜单；”文件夹“和”文件“设置，保证动态添加对象也能生效。

原文链接：https://blog.csdn.net/zhouminit/article/details/51322789?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242

未解决，此处只记录
可以对页面已经存在的对象生效，后续新增加的对象不可用。
缺点，vue使用全局页面，激活后所有页面都会生效

document.oncontextmenu = function(){
    　　return false;
}

原文链接：https://www.cnblogs.com/rachelch/p/8135883.html

学习时间：

提示：这里可以添加计划学习的时间
2021/06/24

---

总结：

尝试解决办法记录：全局事件未能给编辑中。新增加的对象触发事件需要绑定在对象中。