vue.js同一元素实现单击click和双击事件dblclick,执行不同功能

做项目的时候,总是会遇见一个元素或者按钮在不同的需求下,需要做不同的功能处理。

在这里我们以table表为例,我这里是用的vue.js和element做的前端

如图所示:(可以单击姓名或者双击姓名)

功能需求:单击姓名弹出模态框查看信息,双击姓名跳转到另一界面实现别的操作。

在HTML代码中加上点击事件:click是单击事件,dblclick是双击事件

然后再js中写上自己的方法就可以了:

1       methods: {
 2        //单击姓名行绑定 3         clickselect: function (row) { 4            //写你需要执行的功能代码 5             6         }, 7         //双击姓名行绑定 8         dblclickselect: function (row) { 9             //写你需要执行的功能代码10         },11 }

创作不易,如若转载,请备明出处,谢谢!

https://www.cnblogs.com/yifeixue/p/13804205.html

(0)

相关推荐

  • Vue.js 获得兄弟元素,子元素,父元素(DOM操作)

    e.target 是你当前点击的元素 e.currentTarget 是你绑定事件的元素 e.currentTarget.previousElementSibling.innerHTML 获得点击元素 ...

  • 7个实用的 Vue.js 工具和库

    前端技术优选 昨天 以下文章来源于前端迷社区 ,作者小迷妹 大家好,我是为前端娱乐圈操碎了心的小迷妹,正宗前端开发一枚,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效 ...

  • vue.js的安装

    公司要开始分配给我做前后端分离项目了555555555555 让我一个java的去了解vue并且还要会搭建=-= 莫得办法那么就开始必不可少的安装环节吧: 第一步! 安装node.js: 首先进入官网 ...

  • .net core3.1 webapi + vue.js + axios实现跨域

    我所要讲述的是,基于.net core3.1环境下的webapi项目,如何去使用axios对接前端的vue项目 既然谈到axios,这里贴出axios的官方文档地址: http://www.axios ...

  • vue使用fastclick解决移动端 click 300ms延迟

    安装fastclick npm install fastclick --save main.js 中 //导入 import FastClick from 'fastclick' //挂载到body上 ...

  • Vue.js权威指南

    一.遇见Vue.js 1.MVP,从MVC演化而来,Controller/Presenter负责逻辑的处理,完全把View和Model进行了分享,主要的程序逻辑在Presenter里实现,与具体的Vi ...

  • 揭秘 Vue.js 九个性能优化技巧

    这篇文章主要参考了 Vue.js 核心成员 Guillaume Chau 在 19 年美国的 Vue conf 分享的主题:9 Performance secrets revealed,分享中提到了九 ...

  • 邂逅Vue.js – 初始及安装

    邂逅Vue.js中要学习的内容大纲: 1.初识Vue.js (1)为什么学习Vue.js (2)简单认识一下Vue.js 2.Vuejs安装方式 (1)CDN引入 (2)下载和引入 (3)NPM安装管 ...

  • Vue.js开发移动端经验总结

    相对于PC端来说,移动端设备分辨率百花齐放,千奇百怪,对于每一个开发者来说,移动端适配是我们进行移动端开发第一个需要面对的问题. 在移动端我们经常可以在head标签中看到这段代码: <meta  ...