vuejs鍵盤事件不生效解決方式

我是個小掛件發表於2019-01-10
VueJS事件

筆者yy:哭泣，為什麼不可以設定自己看，我只是做個筆記，好羞澀啊

問題

<el-button type="success" @click.enter="gomain()">登入</el-button>
程式碼如上，在click修飾符，新增發現無效，後來查閱資料才發現要元素處於focus時才可以觸發，如果按鈕沒有被選擇，Enter按鈕時沒有用的，所以可以把監聽事件綁在document上

解決方法

  //新增監聽回車按鍵
created() {  
    var _this = this;
    document.addEventListener("keydown", _this.watchEnter);
  },  
  destroyed() {
    //移除監聽回車按鍵
    var _this = this;
    document.removeEventListener("keydown", _this.watchEnter);
  },
  methods:{
    //監聽回車按鈕事件
    watchEnter(e) {
      var keyNum = window.event ? e.keyCode : e.which; //獲取被按下的鍵值
      //判斷如果使用者按下了Enter鍵（keycody=13）
      if (keyNum == 13) {
        按下回車按鈕要做的事
      }
    },
  }
複製程式碼

相關文章