Jayin

ElementUI:el-input监听回车键事件

Jayin Taung's photo
Jayin Taung

需求：在 el-form 中的 el-input 里，实现输入文字然后按回车键来添加输入内容到列表中。

一般会这么写：

    <el-form label-width="120px" label-position="top">
      <el-form-item label="输入标签">
        <!-- 主要看这里 -->
        <el-input v-model="input_text" placeholder="输入后按回车确认" @keyup.enter="inputEnter"/>
      </el-form-item>
      <el-form-item label="已选择" v-if="selectedTagList.length > 0">
        <el-tag v-for="item in selectedTagList" :key="item" type="success" effect="dark" size="large"
                class="recent-tag">
          {{ item }}
        </el-tag>
      </el-form-item>
      <el-form-item label="最近标签">
        <el-tag v-for="item in tagList" :key="item.id" @click="addTag(item.name)" type="success" effect="plain"
                size="large" class="recent-tag">
          {{ item.name }}
        </el-tag>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-top: 6px;" type="primary" @click="handleConfirm">确认</el-button>
      </el-form-item>
    </el-form>

在上面示例中，按回车会触发 form 的 submit 事件，让页面立即刷新，不符合需求。只需要在 el-form 中禁止触发sumit即可

<el-form  @submit.native.prevent="">
      ....
</el-form>
Vue.jselementui