自定义右键菜单显示

 

<--html 代码-->

<div class="search_platforms" ref="search_platform">
    XXX
    XXX

</div>

<ul class="platform_Menu" ref="platform_Menu" v-show="platform_Menu_show">
      <li @click="copy_platform">复制</li>
</ul>

 

 

//js代码

            var container_OffsetTop=function( elem ){
                let top = elem.offsetTop;
                let parent = elem.offsetParent;
                while(parent){
                    top += parent.offsetTop;
                    parent = parent.offsetParent;
                }
                return top;
            };
            var container_OffsetLeft=function( elem ){
                let left = elem.offsetLeft;
                let parent = elem.offsetParent;
                while( parent){
                    left += parent.offsetLeft;
                    parent = parent.offsetParent;
                }
                return left;
            };

            // 平台输入框里右键点击事件
            var _this = this;
            var pcontainer = this.$refs.search_platform;
            pcontainer.oncontextmenu = function(e){
                
                _this.platform_Menu_show = true;
                var container_Top = container_OffsetTop(pcontainer);
                var container_Left = container_OffsetLeft(pcontainer);

                var mouseX = e.pageX;
                var mouseY = e.pageY;

                e.preventDefault();
                // console.log(123)
                console.log(_this.$refs)
                // _this.$refs.platform_Menu.style.top = event.pageY + "px";
                // _this.$refs.platform_Menu.style.left = event.pageX + "px";
                _this.$refs.platform_Menu.style.top =  mouseY - container_Top + "px";
                _this.$refs.platform_Menu.style.left = mouseX  - container_Left + "px";

                console.log(e.pageX,e.pageY)

            }
            // 浏览器页面 Menu click消失
            document.addEventListener("click", (event) => {
                _this.platform_Menu_show = false;
            });