懒人请直接移步下方【解决方案】
【举个栗子】:
<el-input @keyup.enter = "clickEnter" />
在这个输入框中按下回车是不会执行clickEnter
方法的。
【问题原因】
查阅源码可见,element-ui是封装式的组件库。部分<el-input>
源码如下:
<template>
<div :class="[type === 'textarea' ? 'el-textarea' : 'el-input',
inputSize ? 'el-input--' + inputSize : '',
{
'is-disabled': disabled,
...
}
]"
@mouseenter="hovering = true" @mouseleave="hovering = false"
>
<template v-if="type !== 'textarea'">
<!-- 前置元素 -->
<div class="el-input-group__prepend" v-if="$slots.prepend" tabindex="0">
<slot name="prepend"></slot>
</div>
<input
:tabindex="tabindex"
v-if="type !== 'textarea'"
...
>
只截取了开头的小部分代码,但也能看出这是个封装式组件,所以无法直接对其使用原生的键盘事件。
【解决方案】
加上修饰符.native
即可
<el-input @keyup.enter.native = "clickEnter" />
【实际应用】
<el-autocomplete
class="inline-input"
v-model="searchText"
:fetch-suggestions="querySearch"
placeholder="请输入产品型号或资质名称"
:trigger-on-focus="false"
@select="handleSelect"
prefix-icon="el-icon-search"
@keyup.enter.native="handleSearch"
>
<el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
</el-autocomplete>