场景
Cesium中双击飞到对应图层位置
方案
方法1
参考：https://blog.csdn.net/q469731241/article/details/107356605/
<el-tree
ref="tree"
node-key="id"
:data="treeData"
:expand-on-click-node="false"
@node-click="handleNodeClick">
</el-tree>
<script>
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);
}
}
</script>
类似写法参考：https://www.lihuyong.com/archives/1383
<el-tree
:data="data"
node-key="id"
:props="defaultProps">
<span slot-scope="{node, data}">
<span @dblclick="clkDb()" @click="clk()">{{data.label}}</span>
</span>
</el-tree>
<script>
let debounceTimer;
export default {
data() {
return {
data: [],
timer: null
}
},
methods: {
// 对同一元素添加单击@click和双击@dblclick事件时，双击事件执行之前单击事件总会执行两次，于是用函数去抖对此方法进行了修改
clk() {
debounceTimer = this.timer;
if (debounceTimer) {
window.clearTimeout(debounceTimer);
this.timer = null;
}
this.timer = window.setTimeout(() => {
console.log("click");
}, 300);
},
clkDb() {
debounceTimer = this.timer;
if (debounceTimer) {
window.clearTimeout(debounceTimer);
this.timer = null;
}
console.log("db click");
}
}
}
</script>
方法2 封装的思想可以借鉴
https://github.com/ravenq/ravenq.github.io/blob/master/blog.md/el-tree-dblclick.md
参见原文：https://blog.csdn.net/my___dream/article/details/104571980
目前 element-ui 的 tree 控件不支持双击事件，在后台管理系统时经常需要双击事件。
如果在 element-ui 源码上直接添加双击事件是很简单的，我已经在 github 上提交了 issue: #17448 和 PR。
但是等待官方更新都很慢，项目急着需要，而且官方不一定采纳你的 PR。
那么只有两个解决方案，一种比较土，直接 clone 一个官方版本，直接改，自己编译，自己使用，这样有一个很明显的缺点，很难跟进官方的版本。
因此这里主要介绍另外一种方法：非侵入式的封装。
首先引入 elment-ui 的 tree
import Tree from 'element-ui'
Tree.name = 'extend-base-el-tree' // 改名
Vue.use(Tree) // 注册
这里我对原生 element-ui 的 tree 进行了改名，为了是在使用在分装的树组件读可以直接使用 `````。如果以后官方采纳了 PR 直接删除再分装的代码就好了，不需要修改应用代码。
然后，创建一个自己的 el-tree.vue 文件
<template>
<extend-base-el-tree v-bind="$attrs" @node-click="hdlClick" />
</template>
<script>
import debounce from 'lodash.debounce'
export default {
inheritAttrs: false,
data() {
return {
clickCount: 0
}
},
methods: {
hdlClick() {
const args = arguments
// 发送单击事件
this.$emit('nod-click', ...args)
// 发送双击事件
this.clickCount++
const fnEmitDblClick = debounce(() => {
if (this.clickCount > 1) {
this.$emit('node-dblclick', ...args)
}
this.clickCount = 0
}, 500)
fnEmitDblClick()
}
}
}
</script>
在封装的组件需要引入原生组件的所有属性，因此使用 Vue 的 v-bind="$attrs" 方法，绑定所有属性。
在组件里监听单击事件，使用 lodash 的 debounce 方法，判定在 500 毫秒内点击数大于 1 则发送双击事件。
还有一个细节，发送事件的时候会有很多参数，我们不必一个个的定义在发送，可以使用 js 的 arguments 特性，在用一个结构赋值 ...args 转发所有参数即可。
最后，因为 Vue 的事件是使用 $emit 方法发送的，因此 $attrs 只能绑定属性，事件需要在封装的组件中监听在转发，就像单击事件一样。
这只是一个临时解决方案，你可根据使用到的事件进行转发，也可以一次性把原生 Tree 的事件都转发出去。
最后的最后，只需要全局注册我们自己的封装过的树组件就可以了
import ElTree from './your/path/to/your/el-tree.vue'
Vue.component('el-tree', ElTree)
在你的代码中可以直接使用 `` 并且支持双击事件了。
<template>
<el-tree @node-dblclick="hdlDblclick" />
</template>
<script>
export default {
methods: {
hdlDblclick() {
console.log('tree node dblclick event.')
}
}
}
</script>