Vue练习四十一：05_06_自定义右键菜单(有bug待修正)

Demo 在线地址：
https://sx00xs.github.io/test/41/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）

<template>
    <div>
        <p>自定义右键菜单，请在页面点击右键查看效果。</p>
        <ul class="menu" v-show="menuShow" :style="styleObject">
            <li v-for="item in lists" :key="item.mes" :class="{active:item.show}"
            @mouseover="handleOver(item)"
            @mouseout="handleOut(item)"
            >
                <em :class="item.cls"></em>
                <a href="#">{{item.mes}}</a>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'Nave',
    data(){
        return{
            menuShow:false,            
            lists:[
                {
                    cls:'cut',
                    mes:'剪切',
                    show:false
                },
                {
                    cls:'copy',
                    mes:'复制',
                    show:false
                },
                {
                    cls:'paste',
                    mes:'粘贴',
                    show:false
                }
            ],
            styleObject:{
                top:'',
                left:''
            }
        }
    },
    methods:{
        handleOver(item){
            item.show=true;
        },
        handleOut(item){
            item.show=false;
        },
        handleDocContextmenu(event){
            this.menuShow=true;
            this.styleObject.top=event.clientY + 'px';
            this.styleObject.left=event.clientX + 'px';
            event.preventDefault()
        },
        handleDocClick(){
            this.show=false;
        }
    },
    mounted(){
        document.addEventListener('contextmenu',this.handleDocContextmenu);
        document.addEventListener('click',this.handleDocClick);
    }
}
</script>