快捷導(dǎo)航

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

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

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

Vue 事件處理方法

可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 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 鼠標(biāo)事件

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

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

Vue.js 事件修飾符

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

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

.stop

.prevent

.capture

.self

.once

.passive

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

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

Vue 按鍵修飾符

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

<!-- 用戶輸入內(nèi)容時(shí)，按下Enter 鍵才會(huì)觸發(fā)事件 -->
<input v-on:keyup.enter="Email" type="text" class="form-control" placeholder="Email">
 
<!-- 用戶輸入內(nèi)容時(shí)，按下刪除”或“退格”鍵 鍵才會(huì)觸發(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 對(duì)象自定義按鍵修飾符別名。

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

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

解決辦法：利用計(jì)時(shí)器，在大概時(shí)間模擬雙擊事件

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)聽組件根元素的原生事件,主要是給自定義的組件添加原生事件。

官方對(duì).native修飾符的解釋為：有時(shí)候，你可能想在某個(gè)組件的根元素上監(jiān)聽一個(gè)原生事件。可以使用 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); //首先清除計(jì)時(shí)器
  time = setTimeout(() => {
  this.showDialog = !this.showDialog; 
  const obj = {};
  obj.cutname = id;
  obj.providerid = this.providerid;
  this.$store.dispatch('GetStorageCount', obj);
  }, 300); //大概時(shí)間300ms
 },
　　// 雙擊事件函數(shù)，清除計(jì)時(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)聽(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: