vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作


Posted in Javascript onJuly 27, 2020

Vue 事件处理方法

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 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;
 }
 }
});

然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

Vue.js 事件修饰符

在事件处理程序中尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

.stop

.prevent

.capture

.self

.once

.passive

<!-- 阻止事件继续传播 -->
<p v-on:mousemove.stop> Stop </p>
 
<!-- 点击事件将只会触发一次 -->
<button class=" btn btn-info" v-on:click.once="add(1)"> + + </button>
 
 <!--点击 A 链接弹出提示内容,不再重载页面 -->
<p><a v-on:click.prevent ="alert() " href="http://blog.023xs.cn" rel="external nofollow" >blog.023xs.cn</a></p>

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

Vue 按键修饰符

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

<!-- 用户输入内容时,按下Enter 键才会触发事件 -->
<input v-on:keyup.enter="Email" type="text" class="form-control" placeholder="Email">
 
<!-- 用户输入内容时,按下删除”或“退格”键 键才会触发事件 -->
<input v-on:keyup.delete="Email" type="text" class="form-control" placeholder="Email">

全部的按键别名:

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

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

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

在做项目过程中,需求是点击孔位单击弹出对话框查看产品总数,双击弹出对话框查看详情。一开始直接click和dblclick写在标签里面,但是不管怎么样,总是执行单击事件

解决办法:利用计时器,在大概时间模拟双击事件

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主要用于监听组件根元素的原生事件,主要是给自定义的组件添加原生事件。

官方对.native修饰符的解释为:有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 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: {
// 单击事件函数
 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
 },

// 双击事件函数,清除计时器,直接处理逻辑
 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事件监听(点击-双击-鼠标事件)和事件修饰符操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
浅谈javascript的分号的使用
May 12 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
Vue中render方法的使用详解
Jan 26 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
vue键盘事件点击事件加native操作
Jul 27 #Javascript
Element Cascader 级联选择器的使用示例
Jul 27 #Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 #Javascript
Element Rate 评分的使用方法
Jul 27 #Javascript
Element InputNumber计数器的使用方法
Jul 27 #Javascript
基于Vue中的父子传值问题解决
Jul 27 #Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 #Javascript
You might like
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
微信API接口大全
2015/04/15 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
python实现无证书加密解密实例
2014/10/27 Python
python统计日志ip访问数的方法
2015/07/06 Python
Python3生成手写体数字方法
2018/01/30 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
python机器人运动范围问题的解答
2019/04/29 Python
Python何时应该使用Lambda函数
2019/07/02 Python
postman传递当前时间戳实例详解
2019/09/14 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
python实现图像全景拼接
2020/03/27 Python
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
银行实习生的自我评价
2013/12/09 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
企业宗旨标语
2014/06/10 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
合作协议书模板
2014/10/10 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
师范生教育见习总结
2015/06/23 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技