vue elment-ui nav-tab组件封装

组件

代码

<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>

vue elment-ui nav-tab组件封装

原文：https://www.cnblogs.com/lwlblog/p/13504267.html