首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

vue监听Enter事件

2018年11月08日 发布 阅读(1400) 作者:Jerman

vue项目中,如何监听enter事件?
以登录页面为例:

1、监听每一个input输入框

使用vue的@keyup.enter="login", 如果使用的了element-uimint-ui,则使用@keyup.enter.native="login"

  1. <div class="g-input">
  2. <!-- user -->
  3. <mt-field label=" " v-model.trim="loginForm.username" placeholder="请输入用户名" class="login-user" @keyup.enter.native="login"></mt-field>
  4. <!-- password -->
  5. <mt-field label=" " v-model="loginForm.password" placeholder="请输入密码" :type="passwordType" class="login-pwd" @keyup.enter.native="login">
  6. <div :class="toggleClass" @click="togglePassword"></div>
  7. </mt-field>
  8. <mt-field label="验证码" v-model.trim="loginForm.code" placeholder="输入验证码" @keyup.enter.native="login">
  9. <img :src="captcha" height="35px" width="80px" @click="getCode" style="margin-left:10px;">
  10. </mt-field>
  11. </div>
  12. <mt-button type="default" size="large" @click.native="login" class="login-btn login-btn-submit" v-text="loading" :style="loadingStyle"></mt-button>

@keyup.enter有一个缺点就是,使用的当前元素必须要获得focus焦点,如果没有获取到焦点,绑定的就会失效。

所以如果要应用在<button>按钮上就比较尴尬了

2.直接使用document.addEventListener监听keyup事件

该方法当然在任何元素上都是有效的,也不管是否有focus。但要注意的是,跳出当前组件时一定要销毁它。

  1. mounted() {
  2. // 绑定enter事件
  3. this.enterKeyup();
  4. },
  5. destroyed() {
  6. // 销毁enter事件
  7. this.enterKeyupDestroyed();
  8. },
  9. methods: {
  10. enterKey(event) {
  11. const componentName = this.$options.name;
  12. if (componentName == "Login") {
  13. const code = event.keyCode
  14. ? event.keyCode
  15. : event.which
  16. ? event.which
  17. : event.charCode;
  18. if (code == 13) {
  19. this.login();
  20. }
  21. }
  22. },
  23. enterKeyupDestroyed() {
  24. document.removeEventListener("keyup", this.enterKey);
  25. },
  26. enterKeyup() {
  27. document.addEventListener("keyup", this.enterKey);
  28. },
  29. // 登录
  30. login() {}
  31. }
版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •