90 lines
3.5 KiB
Vue
90 lines
3.5 KiB
Vue
<template>
|
||
<div class="aa-tabs-enh" v-click-outside="hideMenu">
|
||
<div class="aa-tabs-enh-bar" @contextmenu="onBarContext" @dragover.prevent @drop="onDrop">
|
||
<div
|
||
v-for="t in tabs"
|
||
:key="t.id"
|
||
class="aa-tabs-enh-tab"
|
||
:class="{ 'is-active': t.id === activeId }"
|
||
draggable="true"
|
||
:data-id="t.id"
|
||
@click="activeId = t.id"
|
||
@dragstart="dragId = t.id"
|
||
@contextmenu="onTabContext($event, t.id)"
|
||
>
|
||
<span v-if="t.dirty" class="aa-dot"></span>
|
||
<span class="aa-tabs-enh-text">{{ t.title }}</span>
|
||
<span class="aa-tabs-enh-close" @click.stop="closeTab(t.id)">×</span>
|
||
</div>
|
||
</div>
|
||
<div class="aa-tabs-enh-panel">{{ activeTab ? activeTab.title + '：' + activeTab.desc : '请选择页签' }}</div>
|
||
<div v-if="menu" class="aa-tabs-enh-menu" :style="{ left: menu.x + 'px', top: menu.y + 'px' }" @click.stop>
|
||
<div @click="menuAct('close')">关闭</div>
|
||
<div @click="menuAct('other')">关闭其他</div>
|
||
<div @click="menuAct('all')">关闭全部</div>
|
||
</div>
|
||
<p class="aa-tabs-enh-hint">拖拽标签可排序；右键标签打开菜单；带 ● 表示未保存。</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'AaEnhancedTabNav',
|
||
directives: {
|
||
clickOutside: {
|
||
bind(el, binding) { el.__doc = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener('click', el.__doc); },
|
||
unbind(el) { document.removeEventListener('click', el.__doc); }
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
tabs: [
|
||
{ id: 'u', title: '用户管理', dirty: false, desc: '用户列表与权限配置。' },
|
||
{ id: 'r', title: '角色管理', dirty: true, desc: '角色权限分配（有未保存修改）。' },
|
||
{ id: 'm', title: '菜单管理', dirty: false, desc: '导航菜单树形配置。' },
|
||
{ id: 'p', title: '参数配置', dirty: true, desc: '系统参数键值对管理。' },
|
||
{ id: 'l', title: '日志查询', dirty: false, desc: '操作日志检索与导出。' }
|
||
],
|
||
activeId: 'u',
|
||
dragId: null,
|
||
menu: null,
|
||
menuId: ''
|
||
};
|
||
},
|
||
computed: {
|
||
activeTab() {
|
||
return this.tabs.filter((t) => t.id === this.activeId)[0] || null;
|
||
}
|
||
},
|
||
methods: {
|
||
closeTab(id) {
|
||
if (this.tabs.length <= 1) return;
|
||
const idx = this.tabs.findIndex((t) => t.id === id);
|
||
this.tabs.splice(idx, 1);
|
||
if (this.activeId === id) this.activeId = this.tabs[Math.max(0, idx - 1)].id;
|
||
},
|
||
onTabContext(e, id) { e.preventDefault(); this.menu = { x: e.clientX, y: e.clientY }; this.menuId = id; },
|
||
onBarContext(e) { if (e.target.closest('.aa-tabs-enh-tab')) e.preventDefault(); },
|
||
menuAct(act) {
|
||
if (act === 'close') this.closeTab(this.menuId);
|
||
else if (act === 'other') this.tabs = this.tabs.filter((t) => t.id === this.menuId);
|
||
else if (act === 'all') this.tabs = [];
|
||
this.activeId = this.tabs.length ? this.menuId : '';
|
||
this.hideMenu();
|
||
},
|
||
hideMenu() { this.menu = null; },
|
||
onDrop(e) {
|
||
const id = e.target.closest('.aa-tabs-enh-tab') && e.target.closest('.aa-tabs-enh-tab').dataset.id;
|
||
if (!id || !this.dragId) return;
|
||
const from = this.tabs.findIndex((t) => t.id === this.dragId);
|
||
const to = this.tabs.findIndex((t) => t.id === id);
|
||
if (from < 0 || to < 0 || from === to) return;
|
||
const moved = this.tabs.splice(from, 1)[0];
|
||
this.tabs.splice(to, 0, moved);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style src="./EnhancedTabNav.css"></style>
|