前言:在日常项目开发中,会遇到页面顶部要求有 路由标签 的需求,基本功能要求,标签新增,关闭,拖拽,刷新,点击页面切换,长度超出内容滚动等 。上篇文章是使用 vue-router-tab 插件去实现,本文不涉及插件,使用 vue 基础语法实现 具体需求 。
- 新建项目,安装基础依赖 (脚手架创建)
项目创建:这里使用 vue-cli3.x 的 ui 面板去创建,项目中除了安装默认依赖项(babel,eslint)之外,还需安装 vue-router 和 vuex ,后续项目基于此进行。
- store 目录下 index.js 文件修改 (vuex 模块化使用)
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 配置模块化文件导入
const modulesFiles = require.context('./modules', true, /\.js$/);
const modules = modulesFiles.keys().reduce((objModule, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
const value = modulesFiles(modulePath);
return {
...objModule,
[moduleName]: value.default,
};
}, {});
export default new Vuex.Store({
modules,
});
- store 目录下新建 modules 目录,并创建 tabsView.js 文件
const state = {
centerViews: {
_CENTERID_DEFAULT: {
visitedViews: [], // 显示的路由标签
activeView: null, // 高亮当前路由标签
}
},
affixTabs: [{ path: '/home', name: 'home', title: '首页' }], // 固定的路由标签
defaultCenterId: '_CENTERID_DEFAULT',
cachedViews: [], // 路由标签缓存,后续用于刷新操作
activeDate: String(new Date().getTime()) // 用于模块页面刷新
};
const affixTabsNames = state.affixTabs.map(item => item.name);
const mutations = {
// 页面模块刷新
SET_ACTIVE_DATE: (state, activeDate) => {
state.activeDate = activeDate
},
// 添加标签
ADD_VISITED_VIEW: (state, {tab}) => {
const targetCenterId = state.defaultCenterId;
if (!state.centerViews[targetCenterId]) {
state.centerViews[targetCenterId] = {
visitedViews: [tab],
};
return;
}
if (state.centerViews[targetCenterId].visitedViews.some(v => v.path === tab.path)) return;
state.centerViews[targetCenterId].visitedViews.push(tab);
},
// 添加标签缓存
ADD_CACHED_VIEW: (state, {tab}) => {
const name = (tab && tab.name) || '';
if (!name) return;
if (state.cachedViews.includes(name)) return;
state.cachedViews.push(name);
},
// 删除当前标签
DEL_VISITED_VIEW: (state, {tab,centerId}) => {
const targetCenterId = centerId || state.defaultCenterId;
for (let i = 0; i < state.centerViews[targetCenterId].visitedViews.length; i += 1) {
const view = state.centerViews[targetCenterId].visitedViews[i];
if (view.path === tab.path) {
state.centerViews[targetCenterId].visitedViews.splice(i, 1);
break;
}
}
},
// 删除当前标签缓存
DEL_CACHED_VIEW: (state, name) => {
const index = state.cachedViews.indexOf(name);
if (index > -1) {
state.cachedViews.splice(index, 1);
}
},
// 删除其他标签
DEL_OTHERS_VISITED_VIEWS: (state, {tab,centerId}) => {
const targetCenterId = centerId || state.defaultCenterId;
const tabInAffixTabs = state.affixTabs.some(item => item.path === tab.path);
const visitedViews = tabInAffixTabs ? [...state.affixTabs] : [...state.affixTabs, tab];
state.centerViews = {
...state.centerViews,
[targetCenterId]: {
...state.centerViews[targetCenterId],
visitedViews,
},
};
},
// 删除其他标签缓存
DEL_OTHERS_CACHED_VIEWS: (state, {tab}) => {
const name = (tab && tab.name) || '';
const index = state.cachedViews.indexOf(name);
if (index > -1) {
state.cachedViews = [...state.cachedViews.slice(index, index + 1), ...affixTabsNames];
} else {
state.cachedViews = [...affixTabsNames];
}
},
// 删除所有标签
DEL_ALL_VISITED_VIEWS: (state, centerId) => {
const targetCenterId = centerId || state.defaultCenterId;
state.centerViews = {
...state.centerViews,
[targetCenterId]: {
visitedViews: [...state.affixTabs],
},
};
},
// 删除所有标签缓存
DEL_ALL_CACHED_VIEWS: (state) => {
state.cachedViews = [...affixTabsNames];
},
// 设置选中标签
SET_CENTERACTIVE_VIEW: (state, {centerId,tab} = {}) => {
const targetCenterId = centerId || state.defaultCenterId;
state.centerViews[targetCenterId].activeView = tab;
}
};
const actions = {
// 新增当前路由标签和标签缓存
addView({dispatch}, payload) {
dispatch('addVisitedView', payload);
dispatch('addCachedView', payload);
},
// 新增当前路由标签
addVisitedView({commit}, payload) {
commit('ADD_VISITED_VIEW', payload);
commit('SET_CENTERACTIVE_VIEW', payload);
},
// 新增当前路由标签缓存
addCachedView({commit}, payload) {
commit('ADD_CACHED_VIEW', payload);
},
// 删除当前路由标签和标签缓存
delView({dispatch,state}, payload) {
return new Promise((resolve) => {
dispatch('delVisitedView', payload);
const {centerId,tab: {name}} = payload;
dispatch('delCachedView', name);
const targetCenterId = centerId || state.defaultCenterId;
resolve({
visitedViews: [...state.centerViews[targetCenterId].visitedViews],
});
});
},
// 删除当前路由标签
delVisitedView({commit,state}, payload) {
return new Promise((resolve) => {
commit('DEL_VISITED_VIEW', payload);
const targetCenterId = payload.centerId || state.defaultCenterId;
resolve([...state.centerViews[targetCenterId].visitedViews]);
});
},
// 删除当前路由标签缓存
delCachedView({commit,state}, name) {
return new Promise((resolve) => {
commit('DEL_CACHED_VIEW', name);
resolve([...state.cachedViews]);
});
},
// 删除其他路由标签和标签缓存
delOthersViews({dispatch,state}, payload) {
return new Promise((resolve) => {
dispatch('delOthersVisitedViews', payload);
dispatch('delOthersCachedViews', payload);
const targetCenterId = payload.centerId || state.defaultCenterId;
resolve({
visitedViews: [...state.centerViews[targetCenterId].visitedViews],
});
});
},
// 删除其他路由标签
delOthersVisitedViews({commit,state}, payload) {
return new Promise((resolve) => {
commit('DEL_OTHERS_VISITED_VIEWS', payload);
const targetCenterId = payload.centerId || state.defaultCenterId;
resolve([...state.centerViews[targetCenterId].visitedViews]);
});
},
// 删除其他路由标签缓存
delOthersCachedViews({commit,state}, payload) {
return new Promise((resolve) => {
commit('DEL_OTHERS_CACHED_VIEWS', payload);
resolve([...state.cachedViews]);
});
},
// 删除所有路由标签和标签缓存
delAllViews({dispatch,state}, centerId) {
const targetCenterId = centerId || state.defaultCenterId;
return new Promise((resolve) => {
dispatch('delAllVisitedViews', targetCenterId);
dispatch('delAllCachedViews', targetCenterId);
resolve({
visitedViews: [...state.centerViews[targetCenterId].visitedViews],
});
});
},
// 删除所有路由标签
delAllVisitedViews({commit,state}, centerId) {
const targetCenterId = centerId || state.defaultCenterId;
return new Promise((resolve) => {
commit('DEL_ALL_VISITED_VIEWS', targetCenterId);
resolve([...state.centerViews[targetCenterId].visitedViews]);
});
},
// 删除所有路由标签缓存
delAllCachedViews({commit,state}) {
return new Promise((resolve) => {
commit('DEL_ALL_CACHED_VIEWS');
resolve([...state.cachedViews]);
});
}
};
export default {
namespaced: true,
state,
mutations,
actions,
};
- 核心 tabsView 组件
<template>
<div id="tabs-view-container" class="tabs-view-container">
<!-- 左移 -->
<div class="tabs-control" @click="handleScrollPrev">
<i class="el-icon-d-arrow-left"></i>
</div>
<!-- 路由标签显示区域(滚动)组件 -->
<scroll-pane ref="scrollPane" class="tabs-view-wrapper">
<!-- 路由标签 -->
<router-link v-for="tab in visitedViews" ref="tab" :key="tab.path" :to="{ path: tab.path }" tab="span" class="tabs-view-item tabs-control" :class="{noPadding: tab.path === '/home', active: isActiveTab(tab) }">{{ tab.title }}<span v-if="tab.path !=='/home'" class="el-icon-close" @click.prevent.stop="closeSelectedTab(tab)"/></router-link>
</scroll-pane>
<!-- 右移 -->
<div class="tabs-control" @click="handleScrollNext">
<i class="el-icon-d-arrow-right"></i>
</div>
<!-- 关闭刷新下拉操作 -->
<el-dropdown class="tabs-control">
<div class="tabs-control">
<i class="el-icon-arrow-down"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="refreshSelectedTab"><i class="el-icon-refresh"></i>刷新</el-dropdown-item>
<!-- 只有首页时,只能刷新,否则首页可以刷新和关闭其他 -->
<el-dropdown-item @click.native="closeOthersTabs" divided v-if="control()"><i class="el-icon-circle-close"></i>关闭其他</el-dropdown-item>
<el-dropdown-item v-if="!isAffix(this.getCurrentTab())" @click.native="closeSelectedTab()"><i class="el-icon-circle-close"></i>关闭当前</el-dropdown-item>
<el-dropdown-item @click.native="closeAllTabs" v-if="!isAffix(this.getCurrentTab())"><i class="el-icon-circle-close"></i>关闭所有</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
import { mapActions, mapState, mapMutations } from 'vuex';
import ScrollPane from './scrollPane';
export default {
name: 'tabsView',
components: { ScrollPane },
data() {
return {
visitedViews: []
};
},
computed: {
...mapState('tabsView', ['centerViews','affixTabs','defaultCenterId','activeDate'])
},
watch: {
$route() {
this.moveToCurrentTab();
},
centerViews: {
handler() {
this.visitedViewsChange();
},
immediate: true,
deep: true,
}
},
mounted() {
this.initTabs()
},
methods: {
...mapActions('tabsView', ['addView', 'addCachedView', 'delView', 'delOthersViews', 'delAllViews', 'delCachedView']),
...mapMutations('tabsView', ['SET_ACTIVE_DATE']),
visitedViewsChange() {
this.visitedViews = this.centerViews[this.defaultCenterId].visitedViews;
},
// 左移操作
handleScrollNext() {
this.$refs.scrollPane.scrollNext();
},
// 右移操作
handleScrollPrev() {
this.$refs.scrollPane.scrollPrev();
},
// 判断当前 tab 是否在 affixTabs 中
isAffix(tab) {
return this.affixTabs.map(item => item.path).includes(tab.path);
},
control() {
return this.visitedViews.length > 1 ? true : false
},
// 初始化标签栏 (首页固定)
initTabs() {
const { affixTabs } = this;
affixTabs.forEach((tab) => {
if (tab.path) {
this.addView({ tab, centerId: this.defaultCenterId });
}
});
if (this.$route.path !== '/home') {
this.$router.replace('/home');
}
},
// 刷新当前标签
refreshSelectedTab() {
const { meta, name, path } = this.$route;
if (!name) {
return;
}
this.delCachedView(name).then(() => {
this.$nextTick(() => {
this.SET_ACTIVE_DATE(String(new Date().getTime()))
this.addCachedView({ tab: { path: path, title: meta.title, name: name } })
});
});
},
// 关闭当前tab
closeSelectedTab(tab) {
const currentTab = tab || this.getCurrentTab();
this.delView({ tab: currentTab, centerId: this.defaultCenterId }).then(({ visitedViews }) => {
if (this.isActiveTab(currentTab)) {
this.toLastView(visitedViews);
}
});
},
// 关闭其他
closeOthersTabs() {
const tab = this.getCurrentTab();
this.$router.push(tab.path);
this.delOthersViews({ tab, centerId: this.defaultCenterId }).then(() => {
this.moveToCurrentTab();
});
},
// 关闭所有
closeAllTabs() {
const tab = this.getCurrentTab();
this.delAllViews(this.defaultCenterId).then(({ visitedViews }) => {
if (this.affixTabs.some(affixTab => affixTab.path === tab.path)) {
return;
}
this.toLastView(visitedViews);
});
},
isActiveTab(tab) {
const { path } = this.$route;
let currPath = path;
if (/\/$/.test(currPath)) {
currPath = currPath.slice(0, currPath.length - 1);
}
return tab.path === currPath;
},
getCurrentTab() {
const visitedViews = (this.centerViews[this.defaultCenterId]
&& this.centerViews[this.defaultCenterId].visitedViews) || [];
for (let i = 0; i < visitedViews.length; i += 1) {
const tab = visitedViews[i];
if (tab.path === this.$route.path) {
return tab;
}
}
const { fullPath: path, name, meta: { title } = {} } = this.$route;
return {
path, name, title
};
},
// 切换到最后一个tab
toLastView(visitedViews) {
const latestView = visitedViews.slice(-1)[0];
if (latestView) {
this.$router.push(latestView.path);
} else {
this.$router.push({ name: 'Home' });
}
},
// 移动到当前路由标签
moveToCurrentTab() {
const tabs = this.$refs.tab;
this.$nextTick(() => {
if (!tabs) {
this.$router.push('/home')
return;
}
const tabsLen = tabs.length;
for (let i = 0; i < tabsLen; i += 1) {
const tab = tabs[i];
if (tab.to.path === this.$route.path) {
this.$refs.scrollPane.moveToTarget(tab);
break;
}
}
});
},
},
};
</script>
<style lang="scss" scoped>
.tabs-view-container {
height: 56px;
width: 100%;
background: black;
box-sizing: border-box;
display: flex;
align-items: center;
.tabs-control {
height: 56px;
min-width: 54px;
text-align: center;
line-height: 56px;
display: inline-block;
font-size: 18px;
cursor: pointer;
text-decoration: none;
background: #F2F6FC;
}
.tabs-control + .tabs-control {
border-left: 1px solid #dcdfe6;
}
.tabs-view-wrapper {
border-left: 1px solid #dcdfe6;
border-right: 1px solid #dcdfe6;
.tabs-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 56px;
line-height: 56px;
padding: 0 13px !important;
font-size: 16px;
user-select: none;
background: #F2F6FC;
color: #409eff;
&.active {
background-color: #dcdfe6;
color: #f56c6c;
}
&.noPadding {
padding: 0;
}
}
}
}
</style>
<style lang="scss">
.tabs-view-wrapper {
.tabs-view-item {
.el-icon-close {
width: 16px;
height: 16px;
vertical-align: -1px;
border-radius: 50%;
text-align: center;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transform-origin: 100% 50%;
&:before {
transform: scale(0.6);
display: inline-block;
}
&:hover {
background-color: pink;
color: red;
}
}
}
}
</style>
- 核心 ScrollPane 组件 (控制路由标签长度超出时左右按钮的滚动功能)
<template>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
<slot />
</el-scrollbar>
</template>
<script>
const tabAndTabSpacing = 4; // tabAndTabSpacing
export default {
name: 'ScrollPane',
data() {
return {
left: 0,
};
},
computed: {
scrollWrapper() {
return this.$refs.scrollContainer.$refs.wrap;
},
},
methods: {
handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40;
const $scrollWrapper = this.scrollWrapper;
$scrollWrapper.scrollLeft += eventDelta / 4;
},
moveToTarget(currentTab) {
const $container = this.$refs.scrollContainer.$el;
const $containerWidth = $container.offsetWidth;
const $scrollWrapper = this.scrollWrapper;
const tabList = this.$parent.$refs.tab;
const firstTab = tabList[0];
let lastTab = null;
if (tabList.length > 0) {
lastTab = tabList[tabList.length - 1];
}
if (firstTab === currentTab) {
$scrollWrapper.scrollLeft = 0;
} else if (lastTab === currentTab) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
} else {
const currentIndex = tabList.findIndex(item => item === currentTab);
const prevTab = tabList[currentIndex - 1];
const nextTab = tabList[currentIndex + 1];
const afterNextTabOffsetLeft = nextTab.$el.offsetLeft
+ nextTab.$el.offsetWidth + tabAndTabSpacing;
const beforePrevTabOffsetLeft = prevTab.$el.offsetLeft - tabAndTabSpacing;
if (afterNextTabOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
$scrollWrapper.scrollLeft = afterNextTabOffsetLeft - $containerWidth;
} else if (beforePrevTabOffsetLeft < $scrollWrapper.scrollLeft) {
$scrollWrapper.scrollLeft = beforePrevTabOffsetLeft;
}
}
},
scrollNext() {
const $container = this.$refs.scrollContainer.$el;
const $containerWidth = $container.offsetWidth;
const $scrollWrapper = this.scrollWrapper;
const tabList = this.$parent.$refs.tab;
let $tabsWidth = 0;
tabList.forEach((tab) => {
$tabsWidth += tab.$el.offsetWidth;
});
const overWidth = $tabsWidth - $containerWidth - $scrollWrapper.scrollLeft;
if (overWidth < 0) {
return;
}
if (overWidth < $containerWidth) {
$scrollWrapper.scrollLeft += $containerWidth - overWidth;
return;
}
$scrollWrapper.scrollLeft += $containerWidth;
},
scrollPrev() {
const $scrollWrapper = this.scrollWrapper;
if ($scrollWrapper.scrollLeft <= 0) {
return;
}
const $container = this.$refs.scrollContainer.$el;
const $containerWidth = $container.offsetWidth;
if ($scrollWrapper.scrollLeft < $containerWidth) {
$scrollWrapper.scrollLeft = 0;
return;
}
$scrollWrapper.scrollLeft -= $containerWidth;
},
},
};
</script>
<style lang="scss" scoped>
.scroll-container {
white-space: nowrap;
position: relative;
overflow: hidden;
width: 100%;
::v-deep {
.el-scrollbar__bar {
bottom: 0px;
}
.el-scrollbar__wrap {
height: 73px;
}
}
}
</style>
- 在 App.vue 中,组件使用 (核心 TabsView 组件使用)
<template>
<div id="app">
<!-- 页面布局 -->
<el-container>
<el-header>
<Header></Header>
</el-header>
<el-container>
<el-aside width="200px">
<!-- 左侧侧边栏菜单 -->
<Side-Menu></Side-Menu>
</el-aside>
<el-main>
<!-- 右侧主体顶部路由标签 -->
<Tabs-View style="background:#FFFFFF;color:#409EFF;margin-bottom:5px;"></Tabs-View>
<!-- 通过改变:key="activeDate" 值,控制模块页面刷新 -->
<router-view :key="activeDate" />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import { mapState } from 'vuex';
import Header from '@/components/Header.vue'
import SideMenu from '@/components/SideMenu.vue'
import TabsView from '@/components/tabsView/tabsView.vue'
export default {
name: 'App',
components: {
Header,
SideMenu,
TabsView
},
computed: {
...mapState('tabsView', ['activeDate'])
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
box-sizing: border-box;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #2c3e50;
font-family: "楷体";
font-size: 20px;
}
.el-header {
background-color: #b3c0d1;
color: #333;
text-align: center;
line-height: 50px;
height: 50px;
}
.el-aside {
background-color: #d3dce6;
color: #333;
line-height: 200px;
height: 800px;
}
.el-main {
background-color: #e9eef3;
color: #333;
height: 800px;
}
body > .el-container {
margin-bottom: 40px;
}
.setFlex {
display: flex;
justify-content: space-between;
align-items: center;
}
.chart {
width: 1200px;
height: 500px;
}
</style>
总结:这里只展示了部分核心代码,完整示例还需配置 路由文件 router/index.js,编写 SideMenu 菜单组件 等,在路由文件中如果存在嵌套路由,在 子路由的 <router-view />上也要添加 :key="activeDate" 属性,使用 vuex 中方法变更属性值,从而实现模块页面刷新 。本示例实现了我自己的业务功能需求,读者可以根据自己的实际需求进行功能扩展 ,比如增加拖拽,鼠标滚动,刷新全部等功能 。