Problem description

TAB switching scenarios are often used in development. When we need to achieve this effect, we often think of the following ways to achieve this effect.

  • Mode one: Use display:none; To control how dom elements are shown and hidden. Thus, the realization of two TAB display and hide. But if you have three or four tabs to switch, this is not an option.
  • Mode 2 uses the v-if or V-show instruction in VUE. You can do it this way, but the code is not elegant. Imagine a.vue file with a bunch of V-Ifs in it. And with V-if you have to declare a lot of variables to do the identification. So it’s not a very good solution
  • Method 3: Use elementUI or iView TAB to switch components. This is fine, but sometimes you need /deep/ to change the style, which is a little tricky.

In my opinion, it is more convenient to use the dynamic components of VUE to realize the switching effect of TAB.

What are the dynamic components of VUE

Vue dynamic components, essentially a component, a component is a UI view layer with JS logic. The so-called dynamic component is that we can dynamically control the specific display of the component somewhere on the page according to some conditions. That’s a little bit of a TAB switch.

Application Scenario Description

Demand renderings

It’s very simple, it’s just a TAB switching effect, but in real development, the TAB styling effect might be a little bit more complicated.

Implementation steps

Step 1 (Create a new component and introduce registration)

First, define four.vue files in the Components folder, as part of the content rendered by the TAB switch, and import can be used.

new Import and register

import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";

components: {
    one,
    two,
    three,
    four,
  },
Copy the code

Step 2 (Layout, top with TAB click TAB and bottom with component rendering)

<template>
  <div id="app">
    <div class="top">
     <! -- TAB -->
    </div>
    <div class="bottom">
      <! -- Place dynamic components to render the corresponding content -->
    </div>
  </div>
</template>
Copy the code

Step 3 (write the TAB above and click on the TAB)

// First we define the array cardArr in data to hold the data that was clicked
    data() {
        return {
          whichIndex: 0.cardArr: [{componentName: "Dynamic Component one"}, {componentName: "Dynamic Component 2"}, {componentName: "Dynamic Component three"}, {componentName: "Dynamic Component four",}]}; },// Then use the V-for loop to render it
    <template>
      <div id="app">
        <div class="top">
          <div
            class="crad"
            :class="{ highLight: whichIndex == index }"
            v-for="(item, index) in cardArr"
            :key="index"
            @click="whichIndex = index"
          >
            {{ item.componentName }}
          </div>
        </div>
        <div class="bottom">
          <! -- Placing dynamic components... -->
        </div>
      </div>
    </template>
WhichIndex () = 0; whichIndex () = 0; whichIndex () = 0
    // Highlight style
    .highLight {
      box-shadow: 0 15px 30px rgba(0.0.0.0.2);
      transform: translate3d(0, -1px, 0);
    }
Copy the code

Step 4 (Use dynamic component labels<component/> ）

    // The dynamic component tag 
       has an IS property, and the value of is can be rendered.
    ComponentId = componentId = componentId = componentId = componentId
    <div class="bottom">
        <component :is="componentId"></component>
    </div>
    
    // Let the first one be rendered by default, and let the component name in the cardList correspond to the component ID.
    // So the data should be changed like this
    data() {
        return {
          whichIndex: 0.componentId: "one".// The value is the name of the imported component that we registered in the Components object
          cardArr: [{componentName: "Dynamic Component one".componentId: "one".// To correspond
            },
            {
              componentName: "Dynamic Component 2".componentId: "two".// To correspond
            },
            {
              componentName: "Dynamic Component three".componentId: "three".// To correspond
            },
            {
              componentName: "Dynamic Component four".componentId: "four".// To correspond},]}; },Copy the code

The fifth step (click a TAB component, dynamically change the corresponding componentId value)

<template>
  <div id="app">
    <div class="top">
      <div
        class="crad"
        :class="{ highLight: whichIndex == index }"
        v-for="(item, index) in cardArr"
        :key="index"
        @click=" whichIndex = index; componentId = item.componentId; "
      >
          <! -- @click can write multiple actions in a tag, separated by semicolons -->
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
    <! -- Keep-alive cache components so that the components are not destroyed, the DOM is not rerendered, the browser is not reflow and redraw, and performance is optimized. Pages load slower if you don't use them -->
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </div>
  </div>
</template>
Copy the code

Complete code attached

<template>
  <div id="app">
    <div class="top">
      <div
        class="crad"
        :class="{ highLight: whichIndex == index }"
        v-for="(item, index) in cardArr"
        :key="index"
        @click=" whichIndex = index; componentId = item.componentId; "
      >
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
export default {
  components: {
    one,
    two,
    three,
    four,
  },
  data() {
    return {
      whichIndex: 0.componentId: "one".cardArr: [{componentName: "Dynamic Component one".componentId: "one"}, {componentName: "Dynamic Component 2".componentId: "two"}, {componentName: "Dynamic Component three".componentId: "three"}, {componentName: "Dynamic Component four".componentId: "four",}]}; }};</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 50px;
  .top {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    .crad {
      width: 20%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #e9e9e9;
    }
    .highLight {
      box-shadow: 0 15px 30px rgba(0.0.0.0.2);
      transform: translate3d(0, -1px.0); }}.bottom {
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 100px);
    border: 3px solid pink;
    display: flex;
    justify-content: center;
    align-items: center; }}</style>
Copy the code

In real business, dynamic components are used flexibly, so the code style is more elegant. Life is not easy, we work together