元件

程式碼

<template>
  <div class="nav-tab-wrap">
    <div class="nav-list">
      <div
        v-for="(item, index) in navList"
        :key="item"
        class="nav-item"
        :class="{'active': currentTab === index}"
        @click="handleCurrentTab(index)"
      >{{ item }}</div>
      <!-- 下拉選單型別導航 -->
      <el-dropdown
        v-for="(item, index) in navDropList"
        :key="item.title"
        class="nav-item"
        :class="{'active': isActive(index)}"
        @command="handleCurrentTab($event, index)"
      >
        <!-- 選單標題 -->
        <span class="el-dropdown-link">
          {{ isActive(index) ? list[currentTab] : item.title }}
          <i class="el-icon-arrow-down el-icon--right" />
        </span>
        <!-- 選單項 -->
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(v, i) in item.list"
            :key="v"
            :command="i + navList.length"
          >{{ v }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    //  其他程式碼......
  </div>
</template>

<script>
export default {
  props: {
    // 當前的tab
    currentTab: {
      type: Number,
      default: 0
    },
    // 導航標籤
    navList: {
      type: Array,
      default: () => []
    },
    // 下拉選單
    navDropList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      searchInput: '',
      list: this.navList
    }
  },
  created() {
    // 合併標題
    this.navDropList.forEach(v => {
      this.list = [...this.list, ...v.list]
    })
  },
  methods: {
    // 改變當前tab
    handleCurrentTab(index, step) {
      let value = index
      for (let i = 0; i < step; i++) {
        value += this.navDropList[i].list.length
      }
      this.$emit('handleCurrentTab', value)
    },
    // 是否選中選單標題
    isActive(step) {
      let minLen = 0
      let maxLen = this.navList.length
      for (let i = 0; i < step + 1; i++) {
        minLen = maxLen
        maxLen += this.navDropList[i].list.length
      }
      return this.currentTab >= minLen && this.currentTab < maxLen
    }
  }
}
</script>

<style lang="less" scoped>
@import '~assets/less/variable.less';
.nav-tab-wrap{
  height: 62px;
  margin: 0 24px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  .nav-list{
    flex: 1;
    display: flex;
    .nav-item{
      color: @fontColor2;
      font-size: 16px;
      cursor: pointer;
      & + .nav-item{
        margin-left: 40px;
      }
      &:hover,
      &.active{
        color: @themeColor;
      }
    }
  }
}
</style>
 

使用

父元件程式碼

<template>
  <div class="my-tab-wrap">
    <nav-tab
      :current-tab="currentTab"
      :nav-list="navList"
      :nav-drop-list="navDropList"
      @handleCurrentTab="handleCurrentTab"
    />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import navTab from '../components/navTab'
export default {
  components: {
    navTab
  },
  data() {
    return {
      navList: ['標題1', '標題2', '標題3', '標題4'],
      navDropList: [{
        title: '選單1',
        list: ['選單標題1', '選單標題2', '選單標題3']
      }, {
        title: '選單2',
        list: ['選單標題1', '選單標題2']
      }]
    }
  },
  computed: {
    ...mapState({
      currentTab: state => state.myResource.currentTab
    })
  },
  methods: {
    ...mapMutations(['handleCurrentTab'])
  }
}
</script>

<style lang="less" scoped>

</style>