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;
                });
  • 相关阅读:
    vue-router 滚动行为封装示例
    HTML5 History 模式 后端ngnix配置
    vue-router 嵌套命名视图
    npm 源管理 nrm
    windows系统git使用zip命令报错解决方法
    vue v-html 动态内容样式无效解决方法
    vue 项目打包 本地预览
    Vue 项目环境变量
    Oracle中的统计信息
    宽表和窄表的区别---字段
  • 原文地址:https://www.cnblogs.com/hill-foryou/p/9896094.html
Copyright © 2011-2022 走看看