vue右键菜单

内容

    <div v-if="show"
         class="menu_style" 
         :style="{top:y+'px',left:x+'px'}">
        <ul>
            <!-- 分别传递事件给父元素调用 -->
            <li @click="()=>{$emit('open')}">打开</li>
            <li @click="()=>{$emit('update')}">编辑</li>
            <li @click="()=>{$emit('del')}">删除</li>
        </ul>
    </div>

    export default{
        name:'right_menu',
        props:{
            x:{
                type:[Number],
                default:0
            },
            y:{
                type:[Number],
                default:0
            },
            showMenu:{
                type:[Boolean],
                default:false
            }
        },
        data(){
            return {
                show:false,
            }
        },
        methods:{
            // 点击别处时隐藏目录，并传递一个关闭事件
            closeMenu(e){
                this.show = false;
                this.$emit("close",false)
            },
        },
        mounted(){
            // 监听body上的点击
            document.querySelector("body").addEventListener("click",this.closeMenu)
        },
        beforeDestroy(){
            // 移除监听
            document.querySelector("body").removeEventListener("click",this.closeMenu)
        },
        watch:{
            // 监听，保持显示状态与父元素一致
            showMenu(val){
                this.show = val;
            }
        },
    }


    .menu_style{
        position: absolute;
        width: 150px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 2px 2px 14px #d0d0d0;
    }
    .menu_style>ul>li{
        text-indent: 25px;
        height: 38px;
        line-height: 38px;
        border-bottom: 1px dashed #f0f0f0;
        cursor: pointer;
    }
    .menu_style>ul>li:hover{
        background: #E0EEFF;
    }





    <div class="main" >
       <ul>
    <li class="role_list" 
        v-for="(item,index) in 10" 
        :key="index"
      @contextmenu.prevent="(e)=>{
            x_index = e.layerX;
            y_index = e.layerY;
            ctrlId = index;
            showMenu = true;
        }">
        <p>{{index}}</p>
    </li>
</ul>

#<rightmenu
                :x="x_index"
                :y="y_index" 
                :showMenu="showMenu"
                @close="closeMenu"
                @open="openDetail"
                @del="delAttr"
                @update="updateArr"
 
></rightmenu>
</div>
    



import rightmenu from './component/rightmenu'
export default {
 data(){
   return {
                x_index:0,
                y_index:0,
                ctrlId:'',
                showMenu:false,
                role:[],
   }
 },
 methods:{
    rightShow(item) {
            this.isPersoncontextMenus = true;
            let menu = document.getElementById("msgRightMenu");
            var e = e || window.event;
            var marginWidths = 332;
            var marginHeight = 55;
            //鼠标点的坐标
            var oX = e.clientX - marginWidths;
            var oY = e.clientY - marginHeight;
            if(oX>423){
                oX = 423;
            }
            //菜单出现后的位置
            menu.style.display = "block";
            menu.style.left = oX + "px";
            menu.style.top = oY + "px";
            //阻止浏览器默认事件
            return false;//一般点击右键会出现浏览器默认的右键菜单，写了这句代码就可以阻止该默认事件
 
 }

 rightClick(e){
        // <!--这里只能拿到坐标，但拿不到点击对应的id-->
        console.log(e)
    },

              //关闭回调  
             closeMenu(state){
                console.log('关闭')
                this.showMenu = state;
            },
            //打开详情回调            
            openDetail(){
                console.log('编辑')
            },
            //删除回调          
            delAttr(){
                console.log('删除')
            },
            //编辑回调          
            updateArr(){
                console.log('编辑')
            },
},
components:{
  rightmenu
}
}



.main{
  width:300px;
  height:30px;
  background:red;

  .role_list{
     width:300px;
     background:skyblue;
  }
}