当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue ElementUI el-tree 组件鼠标双击事件

Vue ElementUI el-tree 组件鼠标双击事件

2020年07月17日  | 移动技术网IT编程  | 我要评论

目前 element-ui 的 tree 控件不支持双击事件，但是这个时候有个需求,需要双击事件.
没办法,只能自己写一个咯,记录下自己写的方法

简单引用,添加@node-click事件

	<el-tree
            ref="tree"
            node-key="id"
            :data="treeData"
            :expand-on-click-node="false"
            @node-click="handleNodeClick">
    </el-tree>

在handleNodeClick事件中处理双击事件

data() {
    return {
    	//定义点击次数,默认0次
        treeClickCount: 0,
    }
},
methods: {
	//节点点击事件
	handleNodeClick(data, node) {
		//记录点击次数
		this.treeClickCount++;
		//单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件
		if (this.treeClickCount >= 2) {
			return;
		}
		//计时器,计算300毫秒为单位,可自行修改
		this.timer = window.setTimeout(() => {
			if (this.treeClickCount == 1) {
				//把次数归零
				this.treeClickCount = 0;
				//单击事件处理
				this.console('单击事件,可在此处理对应逻辑')
				
			} else if (this.treeClickCount > 1) {
				//把次数归零
				this.treeClickCount = 0;
				//双击事件
				this.console('双击事件,可在此处理对应逻辑')
			}
		}, 300);
	
	}
}

结束

本文地址：https://blog.csdn.net/q469731241/article/details/107356605

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网