zoukankan      html  css  js  c++  java
  • 自定义右键菜单显示

    <--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;
                });
  • 相关阅读:
    打印机常识
    网络禁用和启用,及禁止软件软件访问网络
    局域网高级共享改写
    电脑桌面搬家
    电脑硬件的基本组装
    c#中Linq查询语句
    c#中Lamdba匿名函数查询语句
    C#中静态和非静态的区别
    c#中的面向对象
    Laravel 表单验证规则:required、present、filled 和 nullable
  • 原文地址:https://www.cnblogs.com/hill-foryou/p/9896094.html
Copyright © 2011-2022 走看看