vue中如何实现右键菜单？

以下代码示例可以参考使用：

<template>
	<div @contextmenu.prevent>
		<div class="bigWrapper">
			<div class="wrapper" v-for="(item, index) in list" :key="index" @click="clickMenu" @contextmenu.prevent="openRightMenu($event, item)">
				<div class="contentBox">
					{{ item.date }}---{{ item.wheather }}
				</div>
			</div>
		</div>

		<!-- 右键菜单 -->
		<!-- 写法一： -->
		<ul class="u-contextmenu" v-show="rightClickObj.visible" :style="{ left: rightClickObj.left + 'px', top: rightClickObj.top + 'px' }">
			<li @click="operateMenu(currentListItem, 'edit')">
				<i class="icon_menu_reset"></i>
				<span>编辑</span>
			</li>
			<li @click="operateMenu(currentListItem, 'delete')">
				<i class="icon_menu_delete"></i>
				<span>删除</span>
			</li>
		</ul>
		<br>
		
		<!-- 写法二： -->
		<!-- <ul class="u-contextmenu" v-show="rightClickObj.visible" :style="{ left: rightClickObj.left + 'px', top: rightClickObj.top + 'px' }">
			<li v-for="(item, index) in menuList" :key="index" @click="operateMenu2(item, index)">
				<i :class="item.iconClass"></i>
				<span>{{ item.text }}</span>
			</li>
		</ul> -->
	</div>
</template>

<script>
export default {
	name: 'rightMenu',
	data() {
		return {
			content: '我是方框中内容',
			list: [
				{ date: '星期一', wheather: '晴天' },
				{ date: '星期二', wheather: '暴雨' },
				{ date: '星期三', wheather: '多云' },
				{ date: '星期四', wheather: '下雪' },
				{ date: '星期五', wheather: '雷阵雨' },
				{ date: '星期六', wheather: '龙卷风' },
				{ date: '星期日', wheather: '沙尘暴' },
			],
			menuList: [
				{ text: '编辑', iconClass: 'icon_menu_reset' },
				{ text: '删除', iconClass: 'icon_menu_delete' }
			],
			rightClickObj: {
				visible: false,
				top: 0,
				left: 0
			},
			currentListItem: {}
		}
	},
	watch: {
		// 右键菜单显隐
    "rightClickObj.visible"(value) {
      if (value) {
        document.body.addEventListener('click', this.closeRightMenu)
      } else {
        document.body.removeEventListener('click', this.closeRightMenu)
      }
    },
	},
	methods: {
		clickMenu(e) {
			console.log('左键点击', e);
		},
		// 右键点击
		openRightMenu(e, item) {
			this.currentListItem = item
			console.log('右键点击', item.date);
			const bodyWidth = document.documentElement.clientWidth
			const maxLeft = bodyWidth - 200
			var x = e.pageX <= maxLeft ? e.pageX : maxLeft
			var y = e.pageY
			this.rightClickObj.left = x
			this.rightClickObj.top = y
			this.rightClickObj.visible = true
		},
		// 右键菜单隐藏
		closeRightMenu() {
			this.rightClickObj.visible = false
		},
		// 右键菜单项操作
		operateMenu(item, type) {
			switch(type) {
				case 'edit': 
					console.log('编辑', item.date, item.wheather);
					item.wheather = '变成晴天啦'
					break;
				case 'delete': 
					console.log('删除', item.date, item.wheather);
					this.list.splice(0,1)
				break;
			}
		},
		operateMenu2(item, index) {
			switch(index) {
				case 0:
					console.log('编辑编辑000', this.currentListItem);
					break;
				case 1:
					console.log('删除删除111', this.currentListItem);
			}
		}
	}
}
</script>

<style lang="less" scoped>
.bigWrapper {
	display: flex;
}
.wrapper {
	width: 160px;
	height: 100px;
	border: 1px solid aqua;
	cursor: pointer;
	margin-right: 20px;
}
</style>