vue 给页面添加enter回车事件 - 代码篇

版权声明：本文为博主原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/88394001

vue 如何给页面添加enter回车事件？

---

主要代码：

 	@keyup.enter.native="ajaxLoginApi()"   
 	

---

代码示例：

	<el-form ref="form" :model="form" :label-position="labelPosition" label-suffix=":" label-width="100px" status-icon>
     	   <el-form-item label="手机号码">
                <el-input v-model="form.username" size="mini" @keyup.enter.native="ajaxLoginApi()"></el-input>
           </el-form-item>
           <div class="tips"></div>
           <el-form-item label="密码">
                <el-input type="password" v-model="form.pwd" size="mini" clearable  @keyup.enter.native="ajaxLoginApi()"></el-input>
           </el-form-item>
           <div class="tips"></div>
           <div class="tips"></div>
           <div style="margin-top: 10px;margin-left：0">
             <el-button type="primary" @click="ajaxLoginApi" size="medium">确认登录</el-button>
             <el-button type="" plain size="medium" @click="linkTo('#/register')">立即注册</el-button>
           </div>
     </el-form>

---

效果图截图：

除了按钮提交，还能在表单校验无误之后，键盘enter回车提交！

---

以上就是关于 ” vue 给页面添加enter回车事件 - 代码篇 “ 的全部内容。