vue写能展开的面包屑导航

<template>

  <div class="breadcrumb" tabindex="0" hidefocus="true">

    <div

      v-for="(item, key, index) in NavigationList"

      :key="index"

      class="Secondary_navigation_box"

    >

      <div

        class="Secondary_navigation"

        :class="{ first_click: activeFirst === key }"

        @click="firstClick(item, key)"

      >

        {{ item.firstNavigation }}

      </div>

      <div

        v-show="activeFirst === key && item.children"

        class="Secondary_navigation_pops"

      >

        <ul class="navigation_pops">

          <li

            v-for="(value, sIndex) in item.children"

            :key="sIndex"

            :class="{ click_style: activatingRows === sIndex }"

            @click="changeListStyle(value, sIndex)"

          >

            <span>{{ value }}</span>

          </li>

        </ul>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: 'BreadCrum',

  data () {

    return {

      // 一级导航激活

      activeFirst: false,

      // 二级导航弹出框开关

      NavigationPops: false,

      // 当前激活

      activatingRows: 0,

      firstNavigation: ['Ych jp', 'Gtegd', 'Tbnk', 'Tsmgzggf', 'Qunyewo'],

      secondaryNavigationList: ['Ideew Ygwmay', 'Jipdkjj tkyv'],

      NavigationList: [

        { firstNavigation: 'Ych jp' },

        {

          firstNavigation: 'Gtegd',

          children: ['Ideew Ygwmay', 'Jipdkjj tkyv']

        },

        { firstNavigation: 'Tbnk' },

        { firstNavigation: 'Tsmgzggf' },

        { firstNavigation: 'Qunyewo' }

      ]

    }

  },

  methods: {

    changeListStyle (item, index) {

      this.activatingRows = index

    },

    firstClick (item, key) {

      this.NavigationPops = !this.NavigationPops

      // console.log(key)

      this.activeFirst = key

    }

  }

}

</script>

<style lang="less" scoped>

/*面包屑盒子*/

.breadcrumb {

  display: flex;

  margin-left: 20px;

  margin-top: 10px;

  margin-bottom: 10px;

}

/*面包屑项*/

.breadcrumb-item {

  position: relative;

  // width: 160px;

  height: 40px;

  background-image: linear-gradient(270deg, #d8d8d8 0%, #eeeeee 100%);

  font-family: Manrope-Medium;

  font-size: 16px;

  color: #191919;

  line-height: 40px;

  text-align: center;

  padding: 0 40px 0 40px;

}

.breadcrumb-item::after {

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

  border-left: 20px solid #d8d8d8;

  content: '';

  width: 0;

  position: absolute;

  right: -20px;

  z-index: 2;

}

.first_click {

  background: #826df0;

  font-family: Manrope-Bold;

  font-size: 16px;

  color: #ffffff !important;

  background-image: none !important;

}

.first_click::after {

  border-left: 20px solid #826df0 !important;

}

// 二级导航盒子

.Secondary_navigation_box {

  display: flex;

  font-family: Manrope-Bold;

}

// 二级导航--主按钮

.Secondary_navigation {

  position: relative;

  // width: 160px;

  height: 40px;

  background-image: linear-gradient(270deg, #d8d8d8 0%, #eeeeee 100%);

  font-family: Manrope-Medium;

  font-size: 16px;

  color: #191919;

  line-height: 40px;

  text-align: center;

  padding: 0 40px 0 40px;

}

// 主按钮--三角形

.Secondary_navigation::after {

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

  border-left: 20px solid #d8d8d8;

  content: '';

  width: 0;

  position: absolute;

  right: -20px;

  z-index: 2;

}

// 二级弹导航弹出框

.Secondary_navigation_pops {

  // width: 100%;

  box-sizing: border-box;

  height: 40px;

  background: #fff;

  position: relative;

  display: flex;

  align-items: center;

  border-top: 1px solid #979797;

  border-bottom: 1px solid #979797;

  // 弹出框子元素

  .navigation_pops {

    display: flex;

    list-style: none;

    li {

      margin-right: 23px;

    }

    .click_style {

      color: #6235f7;

    }

    span {

      line-height: 40px;

    }

  }

}

.Secondary_navigation_pops::after {

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

  border-left: 20px solid #fff;

  content: '';

  width: 0;

  position: absolute;

  right: -20px;

  z-index: 2;

}

</style>