在vue中实现tab标签切换页面功能

页面效果

需求分析

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

具体功能：

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

思考

在一些后台系统中，见过类似的功能，是利用 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…