Vue 事件處理方法

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

v-on:click 單擊事件

+ +

- -

v-on:dblclick 雙擊事件

+ +

- -

v-on:mousemove\mouseout 鼠標(biāo)事件

{{ x }} - {{ y }}

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

Stop

+ +

blog.023xs.cn

注意事項(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í)添加按鍵修飾符：

全部的按鍵別名：

.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部分代碼：

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

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

官方對(duì).native修飾符的解釋為：有時(shí)候，你可能想在某個(gè)組件的根元素上監(jiān)聽一個(gè)原生事件。可以使用 v-on 的修飾符 .native

js部分代碼

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;

}

}

};

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

總結(jié)

以上是生活随笔為你收集整理的vue判断是否双击_vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。