在线预览
数据采用 fastmock 模拟数据
目前实现的主要功能：
- 简单的登录，登出功能
- Header 头部组件
- Side 菜单，可伸缩
- 内置标签
- 简易的表格样式，包括增删改查等基本功能
- dialog 的封装
- table 的封装
- 导航守卫，相关知识可以查看官网学习（Vue中的导航守卫）
- axios封装（借鉴掘金的一篇文章 (vue中Axios的封装和API接口的管理)）
- 使用Vue-Video-Player插件进行视频播放
- 实现全屏效果
本文主要介绍内置标签的实现：
话不多说先预览下效果
内置标签主要基于 Vuex 实现状态管理和本地缓存结合实现
首先结合浏览器标签的效果主要实现的功能有
- 打开一个页面后判断当前页面是否已经打开 ？ 跳转到已打开的标签 ： 新增一个标签
- 标签可以删除，还应该包含删除所有标签和删除其他标签的功能
- 同时显示的标签有数量限制，数量超过后会给予提示
- 刷新后，页面及对应标签数据应该保留
- 刚进入系统时应该显示首页标签，当所有标签关闭后应该跳转到首页
- 标签之间切换时，如果当前标签没有关闭，则应该保留用户在当前标签的操作（使用 Vue 自带的 keep-alive 实现）
- 直接进行路由跳转或者router跳转可以打开页面和对应标签
通过监听路由变化实现新增标签具体代码如下
setTabs (route) {
let newItem = {
title: route.meta.title,
path: route.fullPath,
name: route.name
};
// 该页面标签是否已经存在 ？ 跳转到该标签 ：新增并跳转
const isExist = this.tabs.some(item => {
return item.path === route.fullPath;
});
if (!isExist) {
if (this.canAdd) {
this.$store.commit('addTabs', newItem);
this.$store.commit('selectTab', newItem);
} else {
this.$LZCMessage('你打开的标签太多了，请关闭一些不用的标签后再尝试打开', 'warning');
}
} else {
this.$store.commit('selectTab', newItem);
}
}
删除标签具体实现如下
closeTab (value) {
this.$store.commit('closeTab', value);
let len = this.tabs.length;
if (len) {
let item = this.tabs[len - 1];
this.switchTab(item);
sessionStorage.setItem('currentTab', JSON.stringify(item));
}
}
