快捷導(dǎo)航

vue雙擊事件2.0事件監(jiān)聽(點擊-雙擊-鼠標事件)和事件修飾符操作

更新時間：2020年07月27日 11:51:41 作者：qq_42221334

這篇文章主要介紹了vue雙擊事件2.0事件監(jiān)聽(點擊-雙擊-鼠標事件)和事件修飾符操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

Vue 事件處理方法

可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。

v-on:click 單擊事件

<button class=" btn btn-info" v-on:click="add(1)"> + + </button>

<button class=" btn btn-danger " v-on:click="subtract(1)"> - - </button>

v-on:dblclick 雙擊事件

<button class=" btn btn-info" @dblclick="add(5)"> + + </button>
<button class=" btn btn-danger " @dblclick="subtract(5)"> - - </button>

v-on:mousemove\mouseout 鼠標事件

<div class="canvas" @mouseout ="update">
  {{ x }} - {{ y }}
</div>
new Vue({
el:".vue-app",
 data:{
  age: 25,
 x:0,
 y:0
 },
 methods:{
 add:function(inc){
  this.age += inc;
 },
 subtract:function(dec){
  this.age -= dec ;
 },
 update:function(event){
 // console.log(event);
  this.x = event.offsetX;
  this.y = event.offsetY;
 }
 }
});

然而許多事件處理邏輯會更為復(fù)雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調(diào)用的方法名稱。

Vue.js 事件修飾符

在事件處理程序中盡管我們可以在方法中輕松實現(xiàn)這點，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細節(jié)。

為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。

.stop

.prevent

.capture

.self

.once

.passive

<!-- 阻止事件繼續(xù)傳播 -->
<p v-on:mousemove.stop> Stop </p>
 
<!-- 點擊事件將只會觸發(fā)一次 -->
<button class=" btn btn-info" v-on:click.once="add(1)"> + + </button>
 
 <!--點擊 A 鏈接彈出提示內(nèi)容，不再重載頁面 -->
<p><a v-on:click.prevent ="alert() "  rel="external nofollow" >blog.023xs.cn</a></p>

注意事項：使用修飾符時，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

Vue 按鍵修飾符

在監(jiān)聽鍵盤事件時，我們經(jīng)常需要檢查常見的鍵值。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符：

<!-- 用戶輸入內(nèi)容時，按下Enter 鍵才會觸發(fā)事件 -->
<input v-on:keyup.enter="Email" type="text" class="form-control" placeholder="Email">
 
<!-- 用戶輸入內(nèi)容時，按下刪除”或“退格”鍵 鍵才會觸發(fā)事件 -->
<input v-on:keyup.delete="Email" type="text" class="form-control" placeholder="Email">

全部的按鍵別名：

.enter

.tab

.delete (捕獲“刪除”和“退格”鍵)

.esc

.space

.up

.down

.left

.right

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名，當(dāng)然也可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名。

補充知識：vue給同一元素綁定單擊click和雙擊事件dblclick，執(zhí)行不同邏輯

在做項目過程中，需求是點擊孔位單擊彈出對話框查看產(chǎn)品總數(shù)，雙擊彈出對話框查看詳情。一開始直接click和dblclick寫在標簽里面，但是不管怎么樣，總是執(zhí)行單擊事件

解決辦法：利用計時器，在大概時間模擬雙擊事件

html部分代碼：

 <div class="grid-content">
 <el-button 
　　　　v-for="(item,index) in items" :key="index" 
　　 @click="storageCount(item.id)" 
　　 @dblclick.native="storageDetail(item.id)" 
　　　 class="inline-cell" 
　　 :class="colors[item.status]">
   {{item.id}}</el-button>
 </div>

.native主要用于監(jiān)聽組件根元素的原生事件,主要是給自定義的組件添加原生事件。

官方對.native修飾符的解釋為：有時候，你可能想在某個組件的根元素上監(jiān)聽一個原生事件?？梢允褂?v-on 的修飾符 .native

js部分代碼

<script>
import desDialog from './dialog';
import detailDialog from './detailDialog';
var time = null; // 在這里定義time 為null 
export default {
 name: 'storeTable',
 components: {
 desDialog,
 detailDialog
 },
 props: ['providerid'],
 data() {
 return {
  colors: ['space', 'isBuy'],
  showDialog: false,
  showDialogT: false
 };
 },
 methods: {
　　// 單擊事件函數(shù)
 storageCount(id) {
  clearTimeout(time); //首先清除計時器
  time = setTimeout(() => {
  this.showDialog = !this.showDialog; 
  const obj = {};
  obj.cutname = id;
  obj.providerid = this.providerid;
  this.$store.dispatch('GetStorageCount', obj);
  }, 300); //大概時間300ms
 },
　　// 雙擊事件函數(shù)，清除計時器，直接處理邏輯
 storageDetail(id) {
  clearTimeout(time); //清除
  this.showDialogT = !this.showDialogT;
  const obj = {};
  obj.cutname = id;
  obj.providerid = this.providerid;
  this.$store.dispatch('GetStorageDetail', obj);
 },
 close() {
  this.showDialog = false;
 },
 closeT() {
  this.showDialogT = false;
 }
 }
};
</script>

以上這篇vue雙擊事件2.0事件監(jiān)聽(點擊-雙擊-鼠標事件)和事件修飾符操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: