篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue使用element-ui的el-input监听不了键盘事件解决相关的知识,希望对你有一定的参考价值。
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>