12.动态tabs优化以及退出功能

12.动态tabs优化以及退出功能

1.关闭tab

• 关闭当前tab时，需要判断当前是否是选中、高亮,如果当前是高亮，那么，关闭当前选中高亮，关闭后，任意前后高亮，如果当前是非高亮状态，那么关闭之前需要先存储当前高亮显示的，在进行关闭，原因：需要刷新后做处理

<template>
  <div class="common-tab">
    <div class="tab-menu">
      <el-tag
        :key="tag.name"
        v-for="tag in tags"
        :closable="tag.name !== 'home'"
        :disable-transitions="false"
        @click="changeMenu(tag)"
        @close="handleClose(tag)"
        :effect="$route.name === tag.name ? 'dark' : 'plain'"
      >
        <i :class="'el-icon-' + tag.icon"></i>
        {{ tag.label }}
      </el-tag>
    </div>

    <div class="refresh-btn">
      <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  created() {
    // 获取刷新之前获取路由的信息
    const sessionTabs = JSON.parse(sessionStorage.getItem('tabs'))
    console.log(sessionTabs)
    if (sessionTabs !== null) {
      // 获取到存储的路由列表之后，将信息利用vuex进行存储
      this.$store.commit('changeSetTabs', sessionTabs.tabList)
    }
  },
  mounted() {
    // 刷新之前存储路由信息
    window.addEventListener('beforeunload', e => {
      sessionStorage.setItem(
        'tabs',
        JSON.stringify({
          tabList: this.tags,
          activeTab: this.$route.name
        })
      )
    })
  },
  computed: {
    ...mapState({
      tags: state => state.tab.tabList
    })
  },
  methods: {
    // 点击切换页面方法
    changeMenu(item) {
      this.$router.push({ name: item.name })
      this.$store.commit('selectMenu', item)
    },
    // 关闭界面的方法
    handleClose(tag) {
      this.tags.forEach((item, index) => {
        if (item.name === tag.name && tag.name === this.$route.name) {
          const nextTab = this.tags[index + 1] || this.tags[index - 1]
          if (nextTab) {
            this.$store.commit('selectMenu', nextTab)
            this.$router.push({ name: nextTab.name })
          }
        } else {
          this.$router.push({ name: this.$route.name })
        }
      })
      this.$store.commit('closeTab', tag)
    },
    // 刷新方法
    refresh() {
      window.location.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
// tabs容器
.common-tab {
  display: flex;
  justify-content: space-between;
}
// tabs按钮容器
.tab-menu {
  flex: 1;
  padding: 10px;
  white-space: nowrap;
  overflow-x: auto;
  .el-tag {
    margin-right: 15px;
    cursor: pointer;
  }
}
.refresh-btn {
  padding: 10px;
}
/*滚动条样式*/
// 滚动条整体部分
.tab-menu::-webkit-scrollbar {
  width: 4px;
  height: 2px;
}
// 滚动条里面的小方块，能上下移动,取决于是垂直滚动还是水平滚动
.tab-menu::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #498eaf;
}
// 滚动条的轨道
.tab-menu::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: #fff;
}
</style>

2.vuex存储

export default {
  state: {
    currentMenu: {}, // 左侧选择当前的路由
    tabList: [
      {
        path: '/home',
        name: 'home',
        label: '首页',
        icon: 'info'
      }
    ] // tabs列表
  },
  mutations: {
    // 根据左侧导航栏设置tabList的值
    selectMenu(state, val) {
      if (val.name !== 'home') {
        state.currentMenu = val
        const result = state.tabList.findIndex(item => item.name === val.name)
        if (result === -1) {
          state.tabList.push(val)
        }
      } else {
        state.currentMenu = null
      }
    },
    // 关闭tab方法
    closeTab(state, val) {
      const result = state.tabList.findIndex(item => item.name === val.name)
      state.tabList.splice(result, 1)
    },
    // 刷新页面之后存进来的值
    changeSetTabs(state, val) {
      state.tabList = val
    }
  },

  actions: {}
}

3.退出

<template>
  <header>
    <div>
      <i class="el-icon-s-fold"></i>
      <i class="el-icon-s-unfold" v-show="false"></i>
    </div>
    <div class="opt-wrapper">
      <el-dropdown :hide-on-click="false" @command="handleCommand">
        <span class="el-dropdown-link"> <img :src="avatar" alt="" class="avatar"/></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item><i class="el-icon-info"></i>个人中心</el-dropdown-item>
          <el-dropdown-item command="logout"><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      avatar: require('@/assets/images/admin-logo.jpg')
    }
  },
  methods: {
    // 退出方法
    handleCommand(command) {
      if (command === 'logout') {
        sessionStorage.clear()
        sessionStorage.removeItem('tabs')
        this.$router.push('/login')
      }
      window.location.reload()
      this.$message.success('click on item ' + command)
    }
  }
}
</script>

<style lang="scss" scoped>
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  .el-icon-s-fold,
  .el-icon-s-unfold {
    font-size: 25px;
    cursor: pointer;
  }
}
.avatar {
  margin-top: 10px;
  // display: block;
  margin-right: 40px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  cursor: pointer;
}
</style>

4.登录页挂载时做处理清空

原因，使用刷新功能后，存储的tabs清除不掉因此，退出功能后，跳转登录，再清除一次

 mounted() {
    sessionStorage.clear()
  },

5.效果演示

刷新之后可以保留当前未关闭的所有界面。退出，重新登录进入系统之后，自动默认首页，并且关闭登录之前保存的tabs