Vue to achieve studio management background (2): slot to achieve tab tab switching effect, free to fill content

Time:2021-6-3

As the main interface of rxeditor, studio UI uses a lot of tab switching. My dream of tab switching is to fill in the content freely.
Unfortunately, I can’t realize it, so I have to search on the Internet, just like what you do now, to see if there are good people who have realized similar functions and shared them. Baidu’s results are not ideal. Most of them are realized in a space through the introduction of object data, with poor expansibility, and can’t customize the style of each page separately.
Switch to Google, found a foreign brother to achieve the function I want, decisive use, and gave him a big praise. If necessary, you can directly refer to his code on codepen:https://codepen.io/tatimblin/pen/oWKdjR?ed…
If you modify this code a little, it will become mine. You don’t have to be embarrassed if you like it. Just use it boldly. The effect is as follows:

Vue to achieve studio management background (2): slot to achieve tab tab switching effect, free to fill content

Two Vue components, one is tab component, the other is tab component. The left tabs component is named widgettabs.vue, and the right tabs component is named pagetabs.vue. Their children use the common component: tab.vue. The main purpose of this is to control and distinguish styles in the tab container. Code structure:

Vue to achieve studio management background (2): slot to achieve tab tab switching effect, free to fill content

This paper introduces in detail one implementation of widgettabs, and the other is similar, which can be copied directly.
Call code:

<WidgetTabs>
  <tab name="Studio" :selected="true">
    <h1>Studio Content</h1>
  </tab>
  <tab name="Files">
    <h1>Files List</h1>
  </tab>
  <tab name="Others">
    <h1>Other Content</h1>
  </tab>
</WidgetTabs>

Container code:

<template>
  <div class="widget-tabs">
    <ul class="heads">
      <li v-for="tab in tabs" class="item" :class="{ 'active': tab.isActive }" @click="selectTab(tab)"> {{ tab.name }} </li>
    </ul>
    <div class="tab-body">
      <slot></slot>
    </div>
  </div>
</template>

<script> export default {
  name: 'WidgetTabs',
  data() { return {tabs: [] };
  },

  created() { this.tabs = this.$children;
  },
  methods: {
    selectTab(selectedTab) { this.tabs.forEach(tab => {
        tab.isActive = (tab.name == selectedTab.name);
      });
    }
  }
} </script>

Specific tab code:

<template>
  <div v-show="isActive">
    <slot></slot>
  </div>
</template>

<script> export default {
  name: 'Tab',
  props: {
    name: { required: true },
    selected: { default: false}
  },
  data() { return {
      isActive: false };
  },

  mounted() { this.isActive = this.selected;
  }
} </script>

For the code of the whole project in this history node, please check it on my GitHubhttps://github.com/vularsoft/studio-ui
How to find the history node:

Vue to achieve studio management background (2): slot to achieve tab tab switching effect, free to fill content

Rxeditor is a visual editing tool for bootstrap code. This series records the development process of the software. If you have any questions, please leave a message on ithub.

This work adoptsCC agreementReprint must indicate the author and the link of this article

Recommended Today

What is “hybrid cloud”?

In this paper, we define the concept of “hybrid cloud”, explain four different cloud deployment models of hybrid cloud, and deeply analyze the industrial trend of hybrid cloud through a series of data and charts. 01 introduction Hybrid cloud is a computing environment that integrates multiple platforms and data centers. Generally speaking, hybrid cloud is […]