“使用Vue.js实现原生HTML右键点击弹出菜单的详细代码示例“（详细代码）

效果展示：

1.话不多说直接上代码

     1.1 点击首页触发,里面的样式自行编写，通过tabs-menu DOM注入右键事件

<div class="tabs-menu">
	<div v-for="(item, index) in editableTabs" 
      style="height: 100%" :key="item.name"
	  :class="item.closable ? 'tabsItemSelect':'tabsItem'">
	  <span> {{item.title}}</span>
	</div>
</div>

     1.2 弹窗页面

<!-- 右键功能 -->
			<div v-if="contextMenuVisible">
				<ul :style="{left:menuLeft +'px',top:menuTop+'px'}" class="contextmenu">
					<li>
						<el-button type="text" @click="tabrefresh()" size="mini" icon="el-icon-refresh">刷新</el-button>
					</li>
					<li>
						<el-button type="text" @click="tabreClose()" size="mini" icon="el-icon-refresh">关闭</el-button>
					</li>
					<li>
						<el-button type="text" @click="tabCloseAll()" size="mini" icon="el-icon-error">关闭所有</el-button>
					</li>
					<li>
						<el-button type="text" @click="tabCloseOther()" size="mini"
							icon="el-icon-circle-close">关闭其他</el-button>
					</li>
				</ul>
			</div>

    1.3 样式

.contextmenu {
				width: 100px;
				margin: 0;
				border: 1px solid #ccc;
				background: #fff;
				z-index: 3000;
				position: absolute;
				list-style-type: none;
				padding: 5px 0;
				border-radius: 4px;
				font-size: 14px;
				color: #333;
				box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
			}

			.contextmenu li {
				margin: 0;
				padding: 0px 5px;
			}

			.contextmenu li:hover {
				background: #f2f2f2;
				cursor: pointer;
			}

			.contextmenu li button {
				color: #2c3e50;
			}




		.tabs-menu {
				flex: 1;
				height: 39px;
				display: flex;
				align-items: center;
				cursor: pointer;

				overflow-x: auto;
				white-space: nowrap;
			}

			.tabs-menu::-webkit-scrollbar {
				display: none;
			}

 2.js变量和函数和事件

     2.1 定义

	activeIndex: '1',
							editableTabsValue: '2',
							menuParentList: [],
							contextMenuVisible: false,
							closeindex: "",
							menuLeft: 0,
							menuTop: 0,
							menuList: [],
							openSelectName: "",
							editableTabs: [{
								title: '首页',
								name: '1',
								closable: true,
								url: ''
							}],

     2.2 添加右键事件

mounted() {
			let tab_top_dom = document.getElementsByClassName('tabs-menu');
			tab_top_dom[0].oncontextmenu = this.openContextMenu;
		 },

    2.3 打开和关闭事件

watch: {
						contextMenuVisible() {
							if (this.contextMenuVisible) {
								document.body.addEventListener("click", this.closeMenu);
							} else {
								document.body.removeEventListener("click", this.closeMenu);
							}
						},

					},

	                   openContextMenu(e) {
							e.preventDefault();
							this.contextMenuVisible = true;
							this.menuLeft = e.clientX;
							this.menuTop = e.clientY + 20;
							this.openSelectName = e.target.innerText;

						},
						openContextMenu1(e) {
							if (e.srcElement.id != '') {
								this.contextMenuVisible = true;
								this.closeindex = e.srcElement.id.split("-")[1];
							} else {
								this.contextMenuVisible = false;
							}
						},
						closeMenu() {
							this.contextMenuVisible = false;
						},

 3.程序员必备站点：

天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/