Vue implements linkage between tabs and side navigation bar

With the popularity of mobile devices and web applications, more and more applications require the use of tabs and side navigation bars to help users navigate and browse. The emergence of the Vue framework has greatly simplified the process of developing such applications, and made it very convenient to implement linkage between tabs and side navigation bars.

In this article, we will see how to achieve linkage between tabs and side navigation bars in Vue, and use Vue's transition effects to improve user experience.

First, let’s understand what tabs and side navigation bars are and how they work in an app.

Tabs and side navigation bars are often used to help users find and access different parts and functions in an application quickly and easily. Tabs are generally used to divide page content into multiple tabs. Each tab displays different information, such as personal information, my orders, shopping cart, etc. in e-commerce websites. Using tabs allows users to quickly and easily Switch to the required information page.

The side navigation bar is usually used to display all the pages and features in the application and can be accessed by clicking options in the navigation menu. When using the side navigation bar, users can quickly browse the entire application and then access the desired page through the options in the navigation menu.

Now, we will show how to implement tab and side navigation bar linkage in Vue application.

First, we need to create a Vue component to represent the tab. In this component, we will use Vue’s component properties to represent the different options of the tab. Here is a simple tab component example:

<template>
  <div>
    <ul>
      <li 
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{active: activeTab === index}"
        @click="activeTab = index"
      >
        {{ tab.name }}
      </li>
    </ul>
    <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
      {{ tab.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        {
          name: 'Tab 1',
          content: 'This is tab 1 content.'
        },
        {
          name: 'Tab 2',
          content: 'This is tab 2 content.'
        },
        {
          name: 'Tab 3',
          content: 'This is tab 3 content.'
        }
      ]
    }
  }
}
</script>

<style>
li.active {
  background-color: lightblue;
}
</style>

In this component, we use an activeTab property to represent the currently active tab index. When the user clicks on any tab, the index of that tab will be set to the value in the activeTab property. We then only display the contents of the tab if the index of the current tab is the same as the index of the active tab.

Next, we need to create a side navigation bar component and link it with the tab component. When the user clicks on an option in the side navigation bar, the corresponding tab will be activated. Here is a simple side navigation bar component example:

<template>
  <div>
    <ul>
      <li 
        v-for="(navItem, index) in navItems"
        :key="index"
        :class="{active: activeTab === index}"
        @click="activeTab = index"
      >
        {{ navItem }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeTab: 0,
      navItems: this.tabs.map(tab => tab.name)
    }
  },
  watch: {
    activeTab() {
      this.$emit('tab-change', this.activeTab)
    }
  }
}
</script>

<style>
li.active {
  background-color: lightblue;
}
</style>

In this component, we receive the data of the tab as a property from the parent component and use the map function to map the tab name Extracted as an array. When the user clicks on any tab, the index of that tab will be set to the value in the activeTab property, and we use Vue's watch property to monitor activeTabAttribute changes. Whenever the activeTab property changes, we use Vue's event system to pass the tab's index to the parent component.

Now that we have implemented the tab and side navigation bar components, the next step is to combine them together to achieve the linkage effect.

First, in the parent component, we need to use the tab component and the side navigation bar component to create the overall layout of the application. The following is a simple parent component example:

<template>
  <div>
    <nav-bar 
      :tabs="tabs" 
      @tab-change="activeTab = $event"
    ></nav-bar>
    <tab-bar :tabs="tabs" :active-tab="activeTab"></tab-bar>
  </div>
</template>

<script>
import NavBar from './NavBar.vue'
import TabBar from './TabBar.vue'

export default {
  components: {
    NavBar,
    TabBar
  },
  data() {
    return {
      activeTab: 0,
      tabs: [
        {
          name: 'Tab 1',
          content: 'This is tab 1 content.'
        },
        {
          name: 'Tab 2',
          content: 'This is tab 2 content.'
        },
        {
          name: 'Tab 3',
          content: 'This is tab 3 content.'
        }
      ]
    }
  }
}
</script>

In this parent component, we use the tab component and the side navigation bar component as child components respectively, and pass the tab data to these two child components. We also registered a tab-change event on the side navigation bar component to listen for tab changes and assigned the new tab index to the activeTab property.

Now, our tabs and side navigation bar have been linked. However, this switching effect still feels rather stiff. In order to make the switching between these two components smoother, we can use Vue's transition effects to improve the user experience.

In Vue, the transition effect is achieved by adding transition class names between components. We can define a transition effect class for the tab and side navigation bar components respectively, and then add the transition class name when switching.

Here is an example:

/* 选项卡过渡类 */
.tab-transition {
  transition: all 0.5s;
  opacity: 0;
}

.tab-transition-enter,
.tab-transition-leave-to {
  opacity: 0;
}

.tab-transition-enter-active,
.tab-transition-leave-active {
  opacity: 1;
}

/* 侧导航栏过渡类 */
.nav-transition {
  transition: all 0.5s;
  transform: translateX(-50%);
}

.nav-transition-enter,
.nav-transition-leave-to {
  transform: translateX(-50%);
}

.nav-transition-enter-active,
.nav-transition-leave-active {
  transform: translateX(0);
}

In this example, we define a transition effect class named .tab-transition and a transition effect class named The transition effect class of .nav-transition. These transition effect classes will be added to tabs or side navigation components when they enter or exit.

Finally, we need to apply these transition effects to the tab and side navigation components. In order to achieve this, we need to use Vue's built-in <transition></transition> component. Here is an example of wrapping the tab and side navigation bar components in a <transition></transition> component:

<transition name="tab-transition">
  <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
    <app-tab :tab="tab"></app-tab>
  </div>
</transition>

<transition name="nav-transition">
  <nav-bar 
    :tabs="tabs" 
    @tab-change="activeTab = $event"
  ></nav-bar>
</transition>

In this example, we wrap the tab component in a &lt ;transition> component, a transition animation named tab-transition is defined for it. We use a v-for loop to render the tabs into

elements, and use the v-show directive to show or hide the tab component based on the value of the current tab index.

For the side navigation bar component, we also used the <transition></transition> component and defined a transition animation named nav-transition for it.

Now, we have completed the Vue application that links the tab and side navigation bar, and used Vue's transition effects to add some dynamic features to it. This technique not only improves user experience but also makes applications more engaging and usable.

The above is the detailed content of Vue implements linkage between tabs and side navigation bar. For more information, please follow other related articles on the PHP Chinese website!