VUE项目，点击回车键实现登录功能

登录界面的登录功能可以通过点击Button实现判断、跳转主界面，但为了用户体验，一般要求点击"回车键"也可以执行登录功能，这个就需要绑定监听事件，代码如下：

第一步，先正常设置个 按钮点击登录事件login() ；

<el-button type="primary" v-on:click="login()">登录</el-button>

第二步，先在 <script> 中配置正常的点击按钮登录功能 login() ，然后在后面的 keyDown(e){} 监听按键点击事件， 绑定回车键 和 登录功能login()， 配置mouted() 绑定监听事件， 配置destroyed() 销毁事件。

​
<script>
export default {
    methods: {
    // 登录按钮监听事件
    login () {      
      // 跳转路由到主页面
      this.$router.replace('/home')
        
    },
    // 监听回车键执行事件
    keyDown (e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode === 13) {
        this.login() // 需要执行的方法方法
      }
    }
  },
  // 绑定监听事件
  mounted () {
    window.addEventListener('keydown', this.keyDown)
  },
  // 销毁事件
  destroyed () {
    window.removeEventListener('keydown', this.keyDown, false)
  }
}
</script>

​