vue2 添加enter按钮事件

最新推荐文章于 2024-08-08 16:26:24 发布

走_开

最新推荐文章于 2024-08-08 16:26:24 发布

阅读量2.8k

点赞数

分类专栏： vue2 web前端文章标签： vue2 enter键事件

本文链接：https://blog.csdn.net/believet93/article/details/94391963

版权

本文介绍了在Vue2中如何处理Enter键事件。对于原生的input元素，可以使用`@keyup.enter`来监听Enter键；而对于Element-UI的el-input组件，由于其进行了封装，需要使用`@keyup.enter.native`才能触发相应事件。

摘要由CSDN通过智能技术生成

1、原生的input，使用 @keyup.enter；原生的按钮也使用@keyup.enter；

2、element-ui的el-input，使用 @keyup.enter.native；因为element-ui把input进行了封装，原事件就不起作用了。

<input type="text" placeholder="手机号" v-model="phoneNumber" @keyup.enter="login"></input>
<el-input type="password" placeholder="密码" v-model="pwd" @keyup.enter.native="login"></el-input>
<button class="login" v-on:click="login" @keyup.enter="login">登录</button>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        phoneNumber: '',
        pwd: '',
      }
    },

    methods: {
      login() {

      },


      keyupEnter() {
        document.onkeydown = e =>{
            let body = d