登录界面的登录功能可以通过点击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>