码迷,mamicode.com
首页 > 其他好文 > 详细

vue使用element-ui的el-input监听不了键盘事件解决

时间:2020-07-13 09:36:07      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:cli   直接   click   bsp   ring   word   pos   and   hold   

 

vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,情况如下:

直接使用标签:

  <input placeholder="账号" @keyup.enter="doLogin"></input>

element-ui: 

  <el-input v-model="name" placeholder="账号" @keyup.enter.native="doLogin"></el-input>

如果你使用了form表单 使用 @keyup.enter.native="doLogin" , 

两个el-input 键盘事件有效, 如: 

<el-form>
  <el-form-item prop="username">
    <el-input name="username" type="text" autoComplete="on" placeholder="邮箱" />
  </el-form-item>
  <el-form-item prop="password">
    <el-input name="password" type="password" @keyup.enter.native="handleLogin"  autoComplete="on" placeholder="密码"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary"  @click.native.prevent="handleLogin">登录</el-button>
  </el-form-item>
</el-form>

如果只有一个el-input , 则无效, 需加上@submit.native.prevent才有效,阻值冒泡,默认事件,  如: 

<el-form  @submit.native.prevent>
  <el-form-item>
    <el-input  placeholder="请输入内容" @keyup.enter.native="submitImage"></el-input>
  </el-form-item>
</el-form>
 

vue使用element-ui的el-input监听不了键盘事件解决

标签:cli   直接   click   bsp   ring   word   pos   and   hold   

原文地址:https://www.cnblogs.com/xiaoliu66007/p/13291497.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!