142 lines
4.8 KiB
JavaScript
142 lines
4.8 KiB
JavaScript
(function (vc) {
|
|
var vm = new Vue({
|
|
el: '#breadcrumb',
|
|
data: {
|
|
breadCrumbs: [],
|
|
indexPage: 1,
|
|
homeTab: {
|
|
name: "首页",
|
|
url: "",
|
|
isHome: true
|
|
},
|
|
contextMenu: {
|
|
visible: false,
|
|
x: 0,
|
|
y: 0,
|
|
currentIndex: -1
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this._ensureHomeTab();
|
|
this._freshBreadCrumbByUrl();
|
|
|
|
// 监听框架初始化事件
|
|
document.addEventListener('initVcFrameworkFinish', (e) => {
|
|
this._ensureHomeTab();
|
|
this._freshBreadCrumbByUrl();
|
|
}, false);
|
|
|
|
// 点击页面其他区域关闭右键菜单
|
|
document.addEventListener('click', () => {
|
|
this.contextMenu.visible = false;
|
|
});
|
|
},
|
|
methods: {
|
|
/** 确保首页 tab 始终存在 */
|
|
_ensureHomeTab: function () {
|
|
let tabs = vc.getTabFromLocal?.() || [];
|
|
const hasHome = tabs.some(t => t.url === this.homeTab.url);
|
|
if (!hasHome) {
|
|
tabs.unshift(this.homeTab);
|
|
window.sessionStorage.setItem('vcTab', JSON.stringify(tabs));
|
|
}
|
|
},
|
|
|
|
/** 刷新多页签显示 */
|
|
_freshBreadCrumbByUrl: function () {
|
|
let tabs = vc.getTabFromLocal?.() || [];
|
|
if (!Array.isArray(tabs) || tabs.length === 0) {
|
|
this._ensureHomeTab();
|
|
tabs = vc.getTabFromLocal();
|
|
}
|
|
|
|
const _curPath = (location.hash || '').split('?')[0];
|
|
|
|
this.breadCrumbs = tabs.map((item, index) => {
|
|
const _path = (item.url || '').split('?')[0];
|
|
return {
|
|
href: item.url || '',
|
|
pageName: item.name || '未命名页面',
|
|
active: _path === _curPath ? '1' : '0',
|
|
showClose: !item.isHome
|
|
};
|
|
});
|
|
},
|
|
|
|
/** 点击切换 tab */
|
|
_changeSmallTab: function (_item) {
|
|
vcFramework.isCallBack = false;
|
|
vc.jumpToPage(vc.getUrl() + _item.href);
|
|
},
|
|
|
|
/** 删除 tab */
|
|
_deleteSmallTab: function (_item) {
|
|
if (_item.isHome) return;
|
|
|
|
vcFramework.isCallBack = false;
|
|
_item.url = _item.href;
|
|
vc.deleteTabToLocal(_item);
|
|
|
|
if (_item.active == '0') {
|
|
this._freshBreadCrumbByUrl();
|
|
return;
|
|
}
|
|
|
|
let _tabs = vc.getTabFromLocal();
|
|
vc.jumpToPage(vc.getUrl() + _tabs[0].url);
|
|
this._freshBreadCrumbByUrl();
|
|
},
|
|
|
|
/** 右键事件 */
|
|
_onRightClick: function (event, index) {
|
|
event.preventDefault();
|
|
this.contextMenu.visible = true;
|
|
this.contextMenu.x = event.clientX;
|
|
this.contextMenu.y = event.clientY;
|
|
this.contextMenu.currentIndex = index;
|
|
},
|
|
|
|
/** 关闭全部 */
|
|
_closeAllTabs: function () {
|
|
let tabs = vc.getTabFromLocal();
|
|
tabs = tabs.filter(t => t.isHome);
|
|
window.sessionStorage.setItem('vcTab', JSON.stringify(tabs));
|
|
vc.jumpToPage(vc.getUrl() + tabs[0].url);
|
|
this._freshBreadCrumbByUrl();
|
|
this.contextMenu.visible = false;
|
|
},
|
|
|
|
/** 关闭左侧 */
|
|
_closeLeftTabs: function () {
|
|
let tabs = vc.getTabFromLocal();
|
|
const cur = this.contextMenu.currentIndex;
|
|
if (cur <= 0) return;
|
|
|
|
const currentTab = tabs[cur];
|
|
tabs = tabs.filter((tab, index) =>
|
|
index >= cur || tab.isHome
|
|
);
|
|
|
|
window.sessionStorage.setItem('vcTab', JSON.stringify(tabs));
|
|
this._freshBreadCrumbByUrl();
|
|
this.contextMenu.visible = false;
|
|
},
|
|
|
|
/** 关闭右侧 */
|
|
_closeRightTabs: function () {
|
|
let tabs = vc.getTabFromLocal();
|
|
const cur = this.contextMenu.currentIndex;
|
|
if (cur === tabs.length - 1) return;
|
|
|
|
const currentTab = tabs[cur];
|
|
tabs = tabs.filter((tab, index) =>
|
|
index <= cur || tab.isHome
|
|
);
|
|
|
|
window.sessionStorage.setItem('vcTab', JSON.stringify(tabs));
|
|
this._freshBreadCrumbByUrl();
|
|
this.contextMenu.visible = false;
|
|
}
|
|
},
|
|
});
|
|
})(window.vc); |