vue监听指定按钮加点击事件,vue监听指定按钮加点击事件

vue监听指定按钮加点击事件,vue监听指定按钮加点击事件,vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

本文主要介绍vue双击事件2.0的事件监控(点击-双击-鼠标事件)和事件修改器操作,有很好的参考价值。希望对你有帮助。来和边肖一起看看吧。

Vue 事件处理方法

您可以使用v-on指令来监听DOM事件,并在被触发时运行一些JavaScript代码。

v-on:click 单击事件

button class= BTN BTN-info v-on:click= add(1)/button

危险按钮: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:mousemovemouseout 鼠标事件

div class= canvas @ mouseout= update

{{ x }} - {{ y }}

/div

新Vue({

艾尔:。vue-app ,

数据:{

年龄:25,

x:0,

y:0

},

方法:{

添加:功能(公司){

this.age=inc

},

减法:函数(dec){

this . age-=dec;

},

更新:函数(事件){

//console.log(事件);

this . x=event . offsetx;

this . y=event . offsety;

}

}

});

但是很多事件处理逻辑会比较复杂,所以直接用v-on指令写JavaScript代码不可行。因此,v-on也可以接收需要调用的方法名。

Vue.js 事件修饰符

在事件处理程序中,虽然我们在方法中很容易实现这一点,但更好的方式是方法只有纯数据逻辑,而不是处理DOM事件细节。

为了解决这个问题,Vue.js为v-on提供了事件修改器。如前所述,修饰符由点号开头的指令后缀表示。停止。预防。捕获。自己。一次。消极的

!-阻止事件扩散-

p v-on:mousemove.stop Stop /p

!-点击事件只会被触发一次-

button class= BTN BTN-info v-on:click . once= add(1)/button

!-点击A链接弹出提示内容,不再重新加载页面-

pa v-on:click . prevent= alert() href= http://blog . 023 xs . cn rel= external no follow blog.023xs.cn/a/p

注意:使用修饰语时,顺序很重要;相应的代码将以相同的顺序生成。因此,使用v-on:click.prevent.self会阻止所有的点击,而v-on:click.self.prevent只会阻止对元素本身的点击。

Vue 按键修饰符

在监控键盘事件时,我们经常需要检查常见的键值。Vue允许在监听键盘事件时为v-on添加按键修饰符:

!-当用户输入内容时,按下回车键将触发事件-

input v-on:keyup . enter= Email type= text class= form-control placeholder= Email

!-当用户输入内容时,按Delete或Backspace键将触发事件-

input v-on:keyup . delete= Email type= text class= form-control placeholder= Email

全部的按键别名:

。进入。标签。删除(捕捉“删除”和“退格”键)。转义字符。空间。向上。向下。左边的。正确

很难记住所有的键码,所以Vue为最常用的键提供了别名。当然,您也可以通过全局config.keyCodes对象自定义键修饰符别名。

补充知识:

vue给同一元素绑定单击click和双击事件dblclick,执行不同逻辑

在做项目的过程中,要求是点击孔位,点击弹出的对话框查看产品总数,双击弹出的对话框查看详情。起初,直接单击和dblclick被写在标记中,但无论如何,单击事件总是被执行。

解决方法:用定时器模拟大致时间的双击事件。

html部分代码:

div class=网格内容

el按钮

v-for=(item,index) in items :key=index

@click=storageCount(item.id)

@ dblclick . native= storage detail(item . id)

class=内嵌单元格

:class=colors[item.status]

{{item.id}}/el-button

/div。native主要用于监听组件根元素的原生事件,主要用于向自定义组件添加原生事件。

的官方解释。native修饰符是:有时,您可能希望在组件的根元素上侦听本机事件。您可以使用v-on修改器。本地人。

js部分代码

脚本

从“”导入desDialog。/dialog ;

从“”导入detailDialog。/detail dialog ;

var time=null//此处定义的时间为空

导出默认值{

名称:存储表,

组件:{

desDialog,

详细对话

},

道具:[providerid],

data() {

返回{

颜色:[space , isBuy],

showDialog: false,

showDialogT: false

};

},

方法:{

//单击事件函数

存储帐户(id) {

清除超时(时间);//首先清除计时器

time=setTimeout(()={

this.showDialog=!this.showDialog

const obj={ };

obj.cutname=id

obj。提供rid=this。提供rid

这个100美元商店。dispatch( GetStorageCount ,obj);

}, 300);//大概时间300毫秒

},

//双击事件函数,清除计时器,直接处理逻辑

存储详细信息(id) {

清除超时(时间);//清除

this.showDialogT=!this.showDialogT

const obj={ };

obj.cutname=id

obj。提供rid=this。提供rid

这个100美元商店。dispatch( GetStorageDetail ,obj);

},

close() {

this.showDialog=false

},

壁橱(){

this.showDialogT=false

}

}

};

/脚本

以上这篇某视频剪辑软件双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

vue监听指定按钮加点击事件,vue监听指定按钮加点击事件