elementui的el-input按回车键后执行方法,且阻止回车触发页面刷新问题以及解决办法

elementui的el-input按回车键后执行方法
当el-input标签放入el-form标签中时：
1.只有一个el-input标签
2.只有一个el-input标签和一个el-button标签

以上两种情况会触发form表单默认提交刷新事件

解决方法：

在el-form中增加 @submit.native.prevent

若想增加回车后触发事件：
el-input增加 @keyup.enter.native

<el-form :model="findPwdForm" ref="PwdForm" @submit.native.prevent>
          <el-form-item
            prop="userName"
            label="用户名"
            :rules="[{required: true, message: '请输入用户名', trigger: 'blur'}]"
          >
            <el-input
              type="text"
              v-model="findPwdForm.userName"
              placeholder="请输入用户名" @keyup.enter.native="onNext"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="onCancel()">取消</el-button>
            <el-button type="primary" @click="onNext">确定</el-button>
          </el-form-item>
 </el-form>



@submit.native.prevent 是阻止回车触发页面刷新

@keyup.enter.native 是增加回车后触发事件
https://blog.csdn.net/Vanilla1119/article/details/90692746?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522ffb92ca98f1f432ef8dd2ea5cc764c49%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=ffb92ca98f1f432ef8dd2ea5cc764c49&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-5-90692746-null-null.142^v102^pc_search_result_base7&utm_term=el-input%E6%8C%89%E4%B8%8B%E5%9B%9E%E8%BD%A6%E6%97%B6%E8%A7%A6%E5%8F%91&spm=1018.2226.3001.4187

相关补充
1.事件冒泡
事件冒泡（Event Bubbling）是事件处理的一种机制，它描述了事件从最具体的元素（如一个按钮或链接）开始，然后逐级向上转播至不那么具体的节点的过程。


在事件冒泡过程中，当一个事件在一个元素上触发时，该事件会首先在这个元素上触发。如果这个元素的父元素也注册了事件处理器来处理相同的事件，那么这个事件也会在这个父元素上触发。这个过程会一直持续到事件到达文档的根节点为止。例如，假设有一个包含多个子元素的div元素，每个子元素都有自己的点击事件处理器。当用户点击其中一个子元素时，不仅该子元素的事件处理器会被调用，而且其所有祖先元素（包括div元素）的事件处理器也会被调用，因为事件会“冒泡”到它们那里。


事件冒泡允许在较高的层次上处理事件，从而避免在每个元素上都设置事件处理器，这样可以减少代码的重复，并且使得事件处理更加模块化和可维护。在JavaScript中，可以使用event.stopPropagation()方法来阻止事件继续向上冒泡到父元素。


2.Vue中@事件名.stop、@事件名.prevent
以下事件名就使用 “click” 事件演示，可以是@keydown、@keyup、@click、@submit、@wheel、@select、@focus、@mouseout等等均可以
（1） @click.stop

<!-- 经典的冒泡问题：
 如下： 父元素中添加了一个click事件，
 其下面的子元素中也添加了click事件，
 此时， 点击子元素获取子元素的点击事件，
 但却触发的是父元素的事件：
-->  
<view class="footer-box" @click="clickCard">
 <view @click="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
 <view @click="footerClick('评论')"><text class="footer-box__item">评论</text></view>
 <view @click="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>


<!-- 使用@click.stop：阻止事件冒泡方法来解决这个问题： -->
<view class="footer-box" @click="clickCard">
 <view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
 <view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>
 <view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>




（2）@click.prevent



<!-- @click.prevent：阻止事件的默认行为，
 例如： 在代码里写入一个a标签，
 点击会跳转到目标链接网页中 -->
<view class="example-body">
 <a href="http://www.baidu.com">百度</a>
</view>
<!--  若不想让它跳转但还想使用a标签的话，
 此时就需要使用@click.prevent方法： -->
<view class="example-body">
 <a href="http://www.baidu.com" @click.prevent='notLink'>百度</a>
</view>






（3）@click.后面的属性连续使用：如同时要阻止冒泡和默认行为





<!-- 本例点击<a>标签时，
 如果既要阻止冒泡，又要阻止百度的跳转，
 <a>标签的点击事件可以这么写: @click.prevent.stop  先阻止默认行为再阻止冒泡
   或者：@click.stop.prevent  先阻止冒泡再阻止默认行为
-->
<view class="footer-box" @click="clickCard">
 <a href="http://www.baidu.com" @click.prevent.stop='clickCard'>
 百度
 </a>
</view>
<!-- 如此就实现了只有<a>标签的click有效果，且不跳转到百度网页 -->





3.在Vue中阻止表单提交有几个方法，
使用.prevent修饰符，
使用@submit.native.prevent事件监听，
在方法中调用event.preventDefault()。
（1）使用.prevent修饰符
Vue提供了事件修饰符.prevent，可以直接在模板中使用，阻止表单的默认提交行为。
@submit.prevent：在submit事件上使用.prevent修饰符，阻止默认的表单提交行为。这种方法最简单，适合初学者和简单项目。


（2）使用@submit.native.prevent事件监听
在某些情况下，你可能会在组件上监听原生事件，可以使用.native修饰符配合.prevent来阻止默认行为。
@submit.native.prevent：在自定义组件上监听原生提交事件，并使用.prevent修饰符阻止默认行为。


（3）在方法中调用event.preventDefault()
如果需要更复杂的逻辑，可以在提交处理函数中手动调用event.preventDefault()来阻止表单提交。这种方法提供了更多的灵活性。
event.preventDefault()：手动调用此方法来阻止默认的表单提交行为。



<template>
  <form @submit="handleSubmit">
    <!-- 表单内容 -->
    <button type="submit">提交</button>
  </form>
</template>
<script>
export default {
  methods: {
    handleSubmit(event) {
      event.preventDefault(); // 阻止表单提交
      // 处理表单提交逻辑
      console.log('表单提交被阻止');
    }
  }
}
</script>



（4）三者方法比较
方法 适用场景 优点 缺点
.prevent修饰符 简单表单提交 简洁易用 灵活性较低
@submit.native.prevent 组件内部使用，需要监听原生事件 适用于组件开发 需要理解原生事件
event.preventDefault()方法 需要复杂逻辑处理或条件阻止表单提交 提供更高的灵活性和控制权 代码稍显复杂


————————————————


                            
                        
原文链接：https://blog.csdn.net/ZwaterZ/article/details/144881135