vue3 +elementPlus 实现回车Enter登录

简介: vue3 +elementPlus 实现回车Enter登录

1、submit() 为登录事件,@keydown.enter="keyDown()"为用户按下enter键触发的事件

<el-button @click="submit()" @keydown.enter="keyDown()">登录</el-button>


2、keyDown()

//点击回车键登录
const keyDown = (e) => {
  if (e.keyCode == 13 || e.keyCode == 100) {
    submit()
  }
}


3、在onMounted()绑定监听事件

onMounted(() => {
  //绑定监听事件
  window.addEventListener('keydown', keyDown)
});


4.在onUnmounted()绑定销毁事件

onUnmounted(() => {
  //销毁事件
  window.removeEventListener('keydown', keyDown, false)
});
相关文章
|
1天前
|
前端开发 JavaScript API
vue3服务端渲染警告解决----DefinePlugin
vue3服务端渲染警告解决----DefinePlugin
6 0
|
1天前
|
JavaScript 前端开发 算法
Vue3与Vue2:对比分析与迁移指南
Vue3与Vue2:对比分析与迁移指南
|
1天前
vue3封装面包屑
vue3封装面包屑
6 0
|
1天前
|
JavaScript Go
VUE3+vite项目中动态引入组件和异步组件
VUE3+vite项目中动态引入组件和异步组件
|
1天前
|
JavaScript 前端开发 API
在VUE3的setup函数中如何引用
在VUE3的setup函数中如何引用
|
1天前
|
JavaScript 定位技术 API
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
|
1天前
|
JavaScript 安全 API
vue3注册添加全局实例属性的方法,如何在setup函数中调用
vue3注册添加全局实例属性的方法,如何在setup函数中调用
|
2天前
|
JavaScript API 开发者
Vue3自定义hooks
Vue3自定义hooks
6 0
|
2天前
|
JavaScript 编译器
Vue3之事件
Vue3之事件
4 0
|
2天前
|
JavaScript
Vue3之Props组件数据传递
Vue3之Props组件数据传递
6 0