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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
jquery实现pager控件示例
Apr 09 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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使用glob函数遍历文件和目录详解
2016/09/23 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
python万年历实现代码 含运行结果
2017/05/20 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
谈谈python中GUI的选择
2018/03/01 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
市场营销专科应届生求职信
2013/11/24 职场文书
优良学风班总结材料
2014/02/08 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2016春节慰问信范文
2015/03/25 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js