页面效果

需求分析

在导航条上，默认打开一个页面（列表页面），当点击列表项，打开一个详情页面，需添加到标签导航中，同时显示当前标签的页面内容，继续点击列表项，添加标签到导航中，依次类推，效果如上图。

具体功能：

标签可关闭；标签可切换，同时内容切换；标签大于可视范围，需添加到选项卡列表中，可点击切换；当点击选项卡列表中的标签，需要在可视区中与最后一个标签进行切换；标签的显示个数自适应；

思考

在一些后台系统中，见过类似的功能，是利用 iframe标签添加链接的方式，实现这个功能。那么在vue中怎么去实现？

首先，这是一个单页面网站应用，使用了vue-router进行前端路由，那么我们可以使用 vue-router 的命名视图，这种方式去代替iframe。

vue-router命名视图官方代码：

<router-view class="view one"></router-view><router-view class="view two" name="a"></router-view><router-view class="view three" name="b"></router-view>复制代码const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ]})复制代码

项目目录大同小异，就不过多解释了~~

路由文件-命名视图

router代码：

import Vue from "vue";import Router from "vue-router";import store from '../store';Vue.use(Router);// layout页面const Layout = () => import(/* webpackChunkName: "layout" */ "@/views/layout/Layout.vue");// 产品相关页面const Product = () => import(/* webpackChunkName: "product" */ "@/views/product/Index.vue");const ProductDetail = () => import(/* webpackChunkName: "productDetail" */ "@/views/product/Detail.vue");// 新闻相关页面const News = () => import(/* webpackChunkName: "news" */ "@/views/news/Index.vue");const NewsDetail = () => import(/* webpackChunkName: "newsDetail" */ "@/views/news/Detail.vue");const rotuer = new Router({ mode: "history", base: process.env.BASE_URL, routes: [ { path: "/", name: "layout", component: Layout, redirect: "/product", children: [ { path: "/product", name: "product", meta: { title: "产品", tabName: "产品列表" }, components: { default: Product, detail: ProductDetail } }, { path: "/news", name: "news", meta: { title: "新闻", tabName: "新闻列表" }, components: { default: News, detail: NewsDetail } } ] } ]});rotuer.afterEach(to => { // 初始化navTag标签 if (to.meta && to.meta.tabName) { store.dispatch('navTab/addTab', { tabName: to.meta.tabName, initStatus: true }) }});export default rotuer;复制代码

根据上面的功能分析，路由使用了命名视图的方式，每个模块的列表页面有个name属性，同时components定义了一个默认的页面，和一个详情页面，如果还有其他页面可以继续添加到commontents中，如：

components: { default: Product, detail: ProductDetail, create: ProductCreate}复制代码

布局文件

在layou.vue的文件中，对 navTabs（vuex中定义的标签数组） 进行循环生成 <router-view :name=""></router-view> 标签，这个 name 对应的是路由里 components 属性定义的key值，如："detail"。

layou.vue的部分代码：

<template> <el-row class="container"> <el-col :span="24"> <Header @collapse="collapseHandler" :isCollapse="isCollapse"></Header> </el-col> <el-col :span="24" class="main"> <Menu :isCollapse="isCollapse"></Menu> <el-main class="content-container"> <nav-tab :navTabs="navTabs"></nav-tab> <div class="main-content"> <router-view v-if="!navTabs.length"></router-view> <div class="navTab-content" v-for="item in navTabs" :key="item.tabId" v-show="item.active"> <keep-alive> <router-view :name="item.vName"></router-view> </keep-alive> </div> </div> </el-main> </el-col> </el-row> </template>复制代码

主要使用<router-view :name="item.vName"></router-view>，显示命名的组件。

使用vuex

我们来看看navTabs是什么？将tab标签数据放在了vuex的state里，可以全局对标签集合继续操作控制，后面会贴出完整代码。

以下是对navTab.js中的部分代码说明：

1、state定义

const tabIdStr = "tab_"; // 标签的id前缀const state = { tabs: [], tabMaxNum: 0};复制代码

tabIdStr变量是在新增标签的时，防止与其他命名冲突

state对象：

tabs属性：保存标签的数据tabMaxNum：最大可显示的标签数量（导航可视区）

2、新增标签

/** * 添加标签 * @param {Any} tabId tab的唯一id标识 * @param {String} tabName tab的标题 * @param {String} vName 对应router命名视图的名称 * @param {Object} pParams 参数传递 * @param {Boolean} initStatus 初始化状态 */ addTab({ commit, state }, { tabId, tabName, vName, pParams, initStatus = false }) { // 设置标签id let newTabId = tabIdStr + (tabId || 0); // 默认 0 let opts = { tabName: "", vName: "default", pParams: {}, active: true, ...{ tabId: newTabId, tabName, vName, pParams } }; // 初始化时，重置标签 if (initStatus) { commit("resetTabs"); } // 判断函数 let hasTabId = item => { return item.tabId === newTabId; }; // 判断新增标签是否已存在，如果存在直接激活，否则新增 if (state.tabs.some(hasTabId)) { // 激活标签 commit("activeTab", newTabId); return false; } // 添加标签 commit("addTab", opts); },复制代码

这里代码主要注意的是：

// 初始化时，重置标签if (initStatus) { commit("resetTabs");}复制代码

例如在产品模块中，切换到新闻模块时，需重置tabs的数据，可以在router的afterEach方法中使用，路由部分代码：

rotuer.afterEach(to => { // 初始化navTag标签 if (to.meta && to.meta.tabName) { store.dispatch('navTab/addTab', { tabName: to.meta.tabName, initStatus: true }) }});复制代码

navTab.js完整代码：

const tabIdStr = "tab_"; // 标签的id前缀const state = { tabs: [], tabMaxNum: 0};const getters = { getNavTabs: state => state.tabs};const actions = { /** * 添加标签 * @param {Any} tabId tab的唯一id标识 * @param {String} tabName tab的标题 * @param {String} vName 对应router命名视图的名称 * @param {Object} pParams 参数传递 * @param {Boolean} initStatus 初始化状态 */ addTab({ commit, state }, { tabId, tabName, vName, pParams, initStatus = false }) { // 设置标签id let newTabId = tabIdStr + (tabId || 0); // 默认 0 let opts = { tabName: "", vName: "default", pParams: {}, active: true, ...{ tabId: newTabId, tabName, vName, pParams } }; // 初始化时，重置标签 if (initStatus) { commit("resetTabs"); } // 判断函数 let hasTabId = item => { return item.tabId === newTabId; }; // 判断新增标签是否已存在，如果存在直接激活，否则新增 if (state.tabs.some(hasTabId)) { // 激活标签 commit("activeTab", newTabId); return false; } // 添加标签 commit("addTab", opts); }, /** * 切换标签 * @param {String} tabId tab的唯一id标识 */ changeTab({ commit }, { tabId }) { // 激活标签 commit('activeTab', tabId); }, /** * 更多标签处理 * @param {Number} index tabs数组下标 */ handleMoreTab({ commit }, { index }) { commit('handleMoreTab', index); }, /** * 删除标签 * @param {Number} index tabs数组下标 */ deleteTab({ commit }, { index }) { commit('deleteTab', index); }, /** * 删除其他标签 */ deleteOtherTab({ commit, state }) { // 保存第一个标签 let firstTab = state.tabs[0]; // 如果第一个当前标签是第一个，则直接删除全部 if(firstTab.active) { commit('deleteAllTab'); } else { commit('deleteOtherTab'); } }, /** * 删除全部标签 */ deleteAllTab({ commit }) { commit('deleteAllTab'); }};const mutations = { /** * 添加标签 */ addTab(state, opts) { // 隐藏其他标签状态 state.tabs.forEach(item => { item.active = false; }); // 当tabs数量大于或等于标签的最大显示数，新添加的标签放在可显示的最后一位 if(state.tabs.length >= state.tabMaxNum) { state.tabs.splice(state.tabMaxNum - 1, 0, opts); } else { state.tabs.push(opts); } }, /** * 激活标签 */ activeTab(state, tabId) { state.tabs.forEach(item => { item.active = false; if (item.tabId === tabId) { item.active = true; } }); }, /** * 更多标签处理 */ handleMoreTab(state, index) { let tabs = state.tabs; let _index = state.tabMaxNum + index; // 激活点击标签 tabs[_index].active = true; // 拷贝点击标签 let copyTab = [tabs[_index]]; // 删除点击标签 tabs.splice(_index, 1); // 隐藏其他标签 tabs.forEach(item => { item.active = false; }); // 插入到可显示的标签最后一个位置 tabs.splice([state.tabMaxNum - 1], 0, ...copyTab); }, /** * 删除标签 */ deleteTab(state, index) { let tabs = state.tabs; // 判断删除的是当前标签，需激活上一个标签 if(tabs[index].active && tabs.length > 0) { tabs[index -1].active = true; } tabs.splice(index, 1); }, /** * 删除其他标签 */ deleteOtherTab(state) { // 解构第一个标签，其他标签 let [firstTab, ...otherTabs] = state.tabs; // 获取当前标签 let curTab = otherTabs.filter(item => item.active); state.tabs = [firstTab, ...curTab]; }, /** * 删除全部标签 */ deleteAllTab(state) { let tabs = state.tabs; // 除了第一个标签其他的都删除 let firstTab = tabs[0]; firstTab.active = true; state.tabs = [firstTab]; }, /** * 重置标签 */ resetTabs(state) { state.tabs = []; }, /** * 设置显示标签最大值 */ setMaxTabVal(state, val) { state.tabMaxNum = parseInt(val); },};export default { namespaced: true, state, getters, actions, mutations};复制代码

tps：navTab.js实现了标签的新增、点击切换、更多点击切换、删除等功能

NavTab组件

标签的导航组件，对于标签进行操作，使用navTab.js里面的方法，对tabs数据进行增、删、改、查~~

部分代码：

<template> <div class="nav-wrap"> <div class="nav-title"> <strong>{{$route.meta.title}}</strong> </div> <div class="nav-tabs" ref="tabsNav"> <div class="tabs-item" :class="{ 'acitve': item.active }" @click="handleClickTab(item)" v-for="(item, index) in navTabs.slice(0, this.tabMaxNum)" :key="item.tabId"> {{item.tabName}} <i class="el-icon-close icon-close" @click.stop="handleCloseTab(index)" v-if="index"></i> </div> <div class="more"> <div class="more-btn" @click="handleClickMore"> <i class="icon el-icon-arrow-down"></i> </div> <ul class="more-dropdown-menu" v-show="moreStatus"> <li @click.stop="handleClickMoreTab(index)" v-for="(item, index) in navTabs.slice(this.tabMaxNum)" :key="item.tabId"> <span>{{item.tabName}}</span> <i class="el-icon-close icon-close" @click.stop="handleCloseTab(item, index)"></i> </li> <li @click.stop="handleClickDelAll"> <span>关闭全部</span> </li> <li @click.stop="handleClickDelOther"> <span>关闭其他</span> </li> </ul> </div> </div> </div></template><script>import { mapGetters } from 'vuex';export default { data() { return { tabMaxNum: 1, moreStatus: false } }, computed: { ...mapGetters({ navTabs: 'navTab/getNavTabs' }) }, mounted() { // 初始化 this.init(); window.addEventListener('resize', this.init, false); }, deactivated() { window.removeEventListener('resize', this.init, false); }, methods: { /** * 初始化 */ init() { // 计算标签最大显示个数 this.calcTabMaxNum(); }, /** * 计算标签最大显示个数 */ calcTabMaxNum() { if (!this.$refs.tabsNav) { return false; } let tabsNav = this.$refs.tabsNav; let tabsItem = tabsNav.querySelectorAll('.tabs-item'); let moreW = tabsNav.querySelector('.more').getBoundingClientRect().width; let navW = tabsNav.getBoundingClientRect().width - moreW; let itemW = tabsItem[0].getBoundingClientRect().width; // 设置最大值 this.tabMaxNum = Math.floor(navW / itemW); this.$store.commit('navTab/setMaxTabVal', this.tabMaxNum); }, /** * 点击标签 */ handleClickTab(item) { let { tabId, acitve } = item; if(acitve) return; this.hideMore(); this.$store.dispatch('navTab/changeTab', { tabId }); }, /** * 点击更多 */ handleClickMore() { this.moreStatus = !this.moreStatus; }, /** * 更多标签点击 */ handleClickMoreTab(index) { this.hideMore(); this.$store.dispatch('navTab/handleMoreTab', { index }); }, /** * 关闭标签 */ handleCloseTab(index) { this.$store.dispatch('navTab/deleteTab', { index }); }, /** * 关闭全部 */ handleClickDelAll() { if(this.navTabs.length === 1) return; this.hideMore(); this.$store.dispatch('navTab/deleteAllTab'); }, /** * 关闭其他 */ handleClickDelOther() { if(this.navTabs.length === 1) return; this.hideMore(); this.$store.dispatch('navTab/deleteOtherTab'); }, /** * 隐藏更多列表 */ hideMore() { this.moreStatus = false; } }}</script>复制代码

这里初始化的时候进行了，最大可视标签数量的计算。

calcTabMaxNum方法，根据标签导航的宽度和标签的宽度进行计算，得到的值赋值给 state 里的 tabMaxNum。

创建一个标签页面

handleRowClick(row) { let { id, title, intro } = row; this.$store.dispatch('navTab/addTab', { tabId: 'detail_' + id, tabName: title, vName: 'detail', pParams: { title, intro } })}复制代码

调用标签的 addTab 方法。

tabId: 标签的唯一Id标识tabName: 标签导航的title值vName: 'detail' 就是指向路由里面 components 定义的key值pParams: 需要传递到其他页面的参数

怎么获取到传递过来的参数（pParams值）

在utils/index.js中定义的方法：

/** * 获取当前标签的传递参数 * @param {Array} tabs 标签数据 */export const getCurTabParams = (tabs) => { if(!tabs || !Array.isArray(tabs)) return {}; // 查找当前标签 let curTab = tabs.filter(item => { return item.active; }); return curTab.length > 0 ? curTab[0].pParams : {};}复制代码

Detail.vue中的部分代码，getCurTabParams方法的使用：

computed: { ...mapGetters({ navTabs: 'navTab/getNavTabs' }), tabParams() { return getCurTabParams(this.navTabs) ? getCurTabParams(this.navTabs) : {}; }},复制代码

基本功能实现完成，到这里就结束了，第一次写分析，思路有点乱，如果有错误的地方欢迎指正~~

附上项目地址：github.com/GuJiBao/vue…