vue 鼠标右击

三155

已于 2022-10-25 16:13:26 修改

阅读量1.2k

点赞数 2

文章标签： vue.js javascript 前端

于 2022-05-17 19:18:44 首次发布

本文链接：https://blog.csdn.net/beloved_jodie/article/details/124749332

版权

鼠标右击事件

@contextmenu.stop  //  阻止事件冒泡
@contextmenu.prevent  //  阻止原生事件触发
@node-contextmenu  // el-tree 中右击事件
@click.right // 右击事件


                <div class="head-container" @contextmenu.stop.prevent="">
                    <el-tree
                        :data="deptOptions"
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        ref="tree"
                        default-expand-all
                        @node-click="handleNodeClick"
                        @node-contextmenu="handleNodeClickRight"
                    />
                </div>
            <div @contextmenu.stop.prevent="">
                <span @click.right="handleNodeClickRight">123</span>
            </div>
                
  methods: {
    // 节点单击事件
    handleNodeClick (data) {
      console.log(data)
    },
    // 节点右击事件
    handleNodeClickRight (e) {
      console.log(e)
    }
  }