Vue自定义元素身上的右键事件

在制作网页时,我们经常需要自定义右键事件,实现我们想要的功能,这里我手写了一个基于Vue的鼠标右键自定义事件,与大家共同分享。

template内容:
在自己想要改变鼠标右键事件的dom中(这里以div#demo为例)加入一个ul,模拟鼠标右键后的弹框。prevent属性可以消除右键默认事件。

<template>
    <div>
        <div id="demo" @contextmenu.prevent="openMenu($event)">
            <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" style="background:red;position:fixed">
                <li>历史记录1li>
                <li>历史记录2li>
                <li>历史记录3li>
                <li>历史记录4li>
            ul>
        div>
    div>
template>

model层:
跟踪鼠标点击位置控制ul所在的位置,同时在自己的dom上右键点击ul显示,点击body后ul隐藏

export default {
    data() {
        return {
            visible: false,
            top: 0,
            left: 0
        }
    },
    methods: {
        openMenu(e) {
            console.log(e.clientX);
            console.log(e.clientY);
            
            this.left = e.clientX
            this.top = e.clientY

            this.visible = true

        },
        closeMenu() {
            this.visible = false
        }
    },
    watch: {
        visible(value) {
            if (value) {
                document.body.addEventListener('click', this.closeMenu)
            } else {
                document.body.removeEventListener('click', this.closeMenu)
            }
        }
    }
}

style:
这块比较简略,就是给div随便给点样式,这块根据需要改成自己右键点击dom的样式

#demo {
    width: 50px;
    height: 50px;
    background: pink;
}

Vue自定义元素身上的右键事件_第1张图片
注:

  • 可以在li元素上添加点击后的事件。
  • ul不一定需要写在dom内,写在dom里面方便我们查看该ul属于哪个dom上的事件,因为ul已经脱离文本流,相对鼠标位置定位。fixed相对浏览器可视区移动。

你可能感兴趣的:(Vue)