鼠标右键弹出框
<template>
<div class="conversation-item-menu box-shadow1">
<span class="menu-item operation-text" @click.stop="openNewPage"
>打开新页面</span
>
</div>
</template>
<script>
export default {
name: 'MouseRightClick',
data() {
return {}
},
computed: {},
methods: {
openNewPage() {
this.$emit('openNewPage') // 打开新页面
this.$emit('hiddenMouse') // 关闭菜单
},
},
}
</script>
<style scoped lang="less">
.conversation-item-menu {
padding: 5px;
border-radius: 5px;
}
.box-shadow1 {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.menu-item {
display: block;
margin-top: 5px;
}
.operation-text {
cursor: pointer;
padding: 2px 4px;
border-radius: 3px;
color: #7e7e7e;
transition: all 0.5s ease-in;
}
.operation-text:hover {
background-color: #e9eaec;
}
</style>
<!-- 鼠标右键菜单 -->
<div class="menu-mouse" v-if="isShowMenu" :style="{'left': menuLeft + 'px', 'top': menuTop + 'px'}">
<MouseRightClick
@hiddenMouse="hiddenMouse"
@openNewPage="openNewPage"
/>
</div>
.menu-mouse {
position: fixed;
z-index: 1004;
background-color: #fff;
border-radius: 5px;
}
mounted() {
document.addEventListener('click',e => {
this.hiddenMouse()//点击其他区域关闭
})
},
<duv @contextmenu.prevent.stop="showMouse($event,it)"> </div>
// 鼠标右键菜单关闭事件
hiddenMouse(){
this.isShowMenu = false
this.conversation = {}
},
showMouse(e,item) {
this.conversation = item
this.isShowMenu = true
this.menuLeft = e.pageX
this.menuTop = e.pageY
},
openNewPage(){
let routeUrl = this.$router.resolve({
path: this.conversation.to,
})
window.open(routeUrl.href, '_blank')
}
标签:菜单,鼠标,自定义,conversation,item,右键,5px From: https://www.cnblogs.com/Privatexaio/p/17096334.html