美文网首页
vue项目中 layer.open绑定Enter事件,并解决无限

vue项目中 layer.open绑定Enter事件,并解决无限

作者: 麦田_426 | 来源:发表于2024-05-27 17:49 被阅读0次

需求

项目改为vue 但是并不是前后端完全分离的。
所以弹窗还是使用之前的layer,其中弹窗的确定和取消按钮是自己写的,不是layer自带的。 所以在进行绑定Enter键的时候比较费劲
记下来解决方法。

layer.open({
                    type: 1,
                    title: '',
                    area: ‘’ ,
                    content: ‘’,
                    success: (layero, index)=> {
                      /*enter 键确定 start*/
                      setTimeout(() => {
                          document.activeElement.blur(); //释放焦点
                      });
                      this.enterConfrim = (event) => {
                        if(event.keyCode === 13){
                          this.btnsure_com(this.formDataCm);
                          //document.removeEventListener('keydown', this.enterConfrim); //如果只想调用一次就别注销
                          return false;
                        }
                      }
                      document.addEventListener('keydown', this.enterConfrim);
                      /**/
                    },
                    end: ()=> {
                      document.removeEventListener('keydown', this.enterConfrim);
                    }
                });

其中释放焦点,会解决一直按Enter键无限弹出的问题。

相关文章

网友评论

      本文标题:vue项目中 layer.open绑定Enter事件,并解决无限

      本文链接:https://www.haomeiwen.com/subject/ulthqjtx.html