Enter 键执行事件

注: 文章摘自:lx_1024 - CSDN

如果是原生的 input，使用 @keyup.enter 就可以，若是使用了element-ui，则要加上 native 限制符，因为 element-ui 把 input 进行了封装，原事件就不起作用了，代码如下：

• 原生

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">

• element-ui 框架

<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

键盘事件好像对 input 框支持比较好，其他的元素多少会有点问题，或者直接无效，究其原因是其他的元素没有获取焦点或者没有键盘事件

如果是没有键盘事件使用 css 把 input 框绝对定位到需要绑定键盘事件的元素之上并且把
input 框设置为透明，把该 input 框与原来要绑定键盘事件的元素进行绑定，以达到效果

• html

<div class="container">
    <input class="item opa" @keyup="deleteDiv">
    <div class="item">div内容</div>
    <span click="DeleteDiv">X</span>
</div>

• css

div.container {
    position: relative;
}
.item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
}
.opa {
     opacity: 0;
     z-index: 5;
}
span {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}

• js

methods: {
    deleteDiv() {
      alert("delete");
    }
}