vue 中定義鍵盤迴車事件

• 在vue中 , 如果使用的是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，則要加上native限制符，因爲element-ui把input進行了封裝，原事件就不起作用了，代碼如下：

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

• 在使用此鍵盤事件對input框支持比較好，其他的元素多少會有點問題，或者直接無效，究其原因是其他的元素沒有獲取焦點或者沒有鍵盤事件。
• 比較簡單的解決方式如下 , 如果是沒有鍵盤事件使用css把input框絕對定位到需要綁定鍵盤事件的元素之上並且把input框設置爲透明，把該input框與原來要綁定鍵盤事件的元素進行綁定，達到效果；
• vue中

  <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");
    }
  }