zoukankan      html  css  js  c++  java
  • vue按键修饰符@keyup.enter.native

    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=" 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>
  • 相关阅读:
    Python统计后台数据
    jemter上传到服务器进行压测
    Python的文件读写
    Git中的Stash Changes和UnStash Changes用法
    算法集锦
    各种排序介绍
    SQLServerDAL的引用找不到
    抽象是什么?
    自己写的js分页
    动手写代码
  • 原文地址:https://www.cnblogs.com/zwh0910/p/15587520.html
Copyright © 2011-2022 走看看