在网页端 鼠标右键是默认的网页操作，右键查看源代码等；如何阻止这个默认动作，去自定义右键关闭按钮；
利用html5的contextmenu事件阻止默认行为并定义自己右键功能；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>vue source conde test</title>
<style>
.context-wrap {
background-color: #f0f;
height: 100px;
}
.contextmenu {
background-color: #f00;
color: #fff;
height: 100px;
}
</style>
<script src="./vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="vuetest">
<div class="context-wrap" @contextmenu.prevent="openMenu()">
Click mouse right to trigger my custom actives
</div>
<div class="contextmenu" v-if="rightClick">
click-right to show
</div>
</div>
<script>
var app = new Vue({
el: '#vuetest',
data: {
rightClick: false
},
watch: {},
computed: {},
methods: {
openMenu() {
this.rightClick = true
window.setTimeout(() => {
this.rightClick = false
}, 2000)
}
}
})
</script>
</body>
</html>