内容正在载入中,请稍后……
公告
搜索
统计
其他
10 Jan.2023

Vue ElementUI el-tree组件鼠标双击选择事件 不指定

作者: 我就是个世界   分类:技术&学习 » JavaScript/EXT   出处:本站原创            | |
el-tree组件本身是不支持双击事件的,但是项目里有个需求需要双击来执行,查看官方文档可知
Highslide JS

html代码:

  <el-tree
          class="tree"
          :data="nodeData"
          :props="defaultProps"    
          @node-click="handleNodeClick"
        >
  </el-tree>

注意一下,nodeData中每一项都需要一个唯一值,用来区分两次的操作,我这里用的是id

js代码:

data(){
return {
    nodeCount:0,
    preNodeId:null,
    curNodeId:null,
    nodeTimer:null
}
}
methods:{
    handleNodeClick(data,node,prop) {
      console.log(data,node,prop);
      this.nodeCount++
      if( this.preNodeId && this.nodeCount >= 2){
        this.curNodeId = data.id
        this.nodeCount = 0
        if(this.curNodeId == this.preNodeId){//第一次点击的节点和第二次点击的节点id相同
          console.log('双击,执行代码写在这里');
          this.curNodeId = null
          this.preNodeId = null      
          return
        }
      }
      this.preNodeId = data.id
      this.nodeTimer = setTimeout(() => { //300ms内没有第二次点击就把第一次点击的清空
        this.preNodeId  = null
        this.nodeCount = 0
      },300)  
    },
}

因为用了id,所以在快速点击两个不同的节点时,也不会触发双击事件,兼容性比较好。
分享到QQ空间
最后编辑: 我就是个世界 编辑于January 10, 2023 19:21
时间:19:21 评论(0) 引用(0) 阅读(1318) Tags: ,
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情