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:mousemove\mouseout 鼠标事件

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事件监听(点击-双击-鼠标事件)和事件修饰符操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: