54 lines
1.6 KiB
HTML
54 lines
1.6 KiB
HTML
<div id="breadcrumb" class="border-bottom white-bg breadcrumb" v-if="breadCrumbs.length > 0 && indexPage == '1'">
|
|
|
|
<ul class="nav nav-tabs">
|
|
<!-- 每个 tab -->
|
|
<li class="nav-item" v-for="(item,index) in breadCrumbs" @contextmenu="_onRightClick($event, index)">
|
|
<!-- 👈 绑定右键事件 -->
|
|
|
|
<span class="nav-link nav-link-breadcrumb" v-bind:class="{'active':item.active=='1'}" aria-current="page"
|
|
@click="_changeSmallTab(item)">
|
|
{{item.pageName}}
|
|
<i class="fa fa-remove margin-left-sm" @click.stop="_deleteSmallTab(item)" v-show="item.showClose"></i>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- ✅ 右键菜单区域 -->
|
|
<div v-if="contextMenu.visible" class="context-menu"
|
|
:style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }">
|
|
<ul>
|
|
<li @click="_closeAllTabs">关闭全部菜单</li>
|
|
<li @click="_closeLeftTabs">关闭左侧菜单</li>
|
|
<li @click="_closeRightTabs">关闭右侧菜单</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.context-menu {
|
|
position: fixed;
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
z-index: 9999;
|
|
width: 150px;
|
|
}
|
|
|
|
.context-menu ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.context-menu li {
|
|
padding: 6px 16px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.context-menu li:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
</style> |