• 自定义右键菜单显示


    <--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;
                });
  • 相关阅读:
    SpringMVC(5)数据绑定-2
    SpringMVC(4)数据绑定-1
    SpringMVC(3)URL请求到Action的映射规则
    SpringMVC(2)经典的HelloWorld实现
    SpringMVC(1)流程框架总体介绍
    Mysql数据库导入命令Source详解
    fastjson的使用问题
    json序列化(javaBean转Json细节处理)
    spark变量使用broadcast、accumulator
    Scala:Object与Class的区别
  • 原文地址:https://www.cnblogs.com/hill-foryou/p/9896094.html
Copyright © 2020-2023  润新知