• 自定义右键菜单显示


    <--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;
                });
  • 相关阅读:
    Nosql database
    NoSQL
    nodejs and db
    Nodejs and json
    Nodejs异步
    HTTP-304 NOT Modified
    Origin null is not allowed by Access-Control-Allow-Origin
    nodejs MVC
    solr 亿万级数据查询性能測试
    iOS8 对开发人员来说意味着什么?
  • 原文地址:https://www.cnblogs.com/hill-foryou/p/9896094.html
Copyright © 2020-2023  润新知