天天看點

vue使用element-ui時監聽登入界面全局鍵盤回車事件

方法一

<el-form-item prop="account">
        
<el-input v-on:keyup.enter.native="handleSubmit2()" style="color: #ffffff" type="text" v-model="ruleForm.account" auto-complete="off" placeholder="賬号"></el-input>

</el-form-item>
           

如果用了element-ui的話要在後面加上native,不然被包裹不能讀取到,這種寫法隻能在滑鼠點選輸入框的時候按回車才有用

方法二

在export default裡面添加鈎子函數

export default {
  created() {
    var _self = this

    document.onkeydown = function(e) {
      var key = window.event.keyCode

      if (key === 13) {
        _self.handleSubmit2()
      }
    }
  },
  beforeDestroy() {
    document.onkeydown = function(e) {
      var key = window.event.keyCode

      if (key === 13) {

      }
    }
  },
           

如果隻有created函數的話那麼在其他界面按回車會依然調用函數,造成錯誤的頁面跳轉,是以要離開這個界面是要取消。

這樣寫就可以實作在該頁面鍵盤回車實作登入