vue按鍵修飾符@keyup.enter.native(點擊Enter鍵)


Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符:

<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

應用場景:

1、當我們在登錄頁面中,輸完密碼后,點擊enter鍵就可以發起登錄請求

<!-- 登錄表單區 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
        <el-form-item prop="username">
          <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password" type="password" @keyup.enter.native="handlelogin"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button :loading="loading" type="primary" @click="handlelogin">登錄</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>

2、在搜索時,當我們在搜索框中輸入內容后,點擊enter就發起搜索

      <el-form-item label="社會信用代碼:">
        <el-input v-model.trim="listQuery.entityNo" style="width: 160px;" size="small" clearable @keyup.enter.native="getList"/>
      </el-form-item>
      <el-form-item label="">
        <el-button class="el-button el-button--primary el-button--small" type="primary" icon="el-icon-search" @click="buttonSearch" >查詢</el-button>
        <el-button type="primary" size="small" icon="el-icon-edit" @click="resetForm()">重置</el-button>
      </el-form-item>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM