How to encapsulate components in vue? How to encapsulate vue tab switching components (with code)-JS Tutorial-php.cn

How to encapsulate components in vue? How to encapsulate vue tab switching components (with code)

不言

Release： 2018-07-23 14:40:50

Original

5779 people have browsed it

How does Vue encapsulate components? What is the specific implementation of Vue encapsulated components? Here I will share with you how to encapsulate the tab switching component in Vue. Let's take a look at the specific code implementation.

Requirements

Simplified Version
The tab corresponding to tab is just ordinary text and is mostly used for display components.
Complex version
The tab corresponding to tab includes tables, buttons, icons, forms and other elements, including data interaction, communication with parent components, etc.
Performance Optimization
Cache components when switching tabs.

Proposal

Prop
Parent component passes parameters to child component.
tabList (tabs title list), tabIndex (current tab number)
Custom events
Switch tab event
slot
Content distribution
Dynamic components
keep-alive: If you keep the switched component in memory, you can retain its state or avoid re-rendering

Complication

If it is the first requirement , you don’t have to write components yourself, the existing functions in the UI framework can fully meet your needs.

If it is the second requirement, there is generally no completely suitable UI component, and this example is my personal solution.

Encapsulate the public part of tabs
The content area corresponding to the tab uses slot content distribution
ajax Operations such as requesting data are performed in the distribution content component.
Hook function activated
Monitor whether the component is activated through activated.

Specific implementation

template

  <p class="my-tabs">
    <p class="tabs-bar">
      <p class="tabs-bar-nav">
        <p class="tabs-tab" v-for="tab in tabList"
        :class="[tabIndex == tab.index ? &#39;tabs-active&#39; : &#39;&#39;]"
        @click="changeTab(tab)">
          {{tab.name}}
        </p>
      </p>
    </p>
    <p class="tabs-content">
      <slot></slot>
    </p>
  </p>

Copy after login

script

  export default {
  name: &#39;MyTabs&#39;,
  props:
  {
    tabList: Array,
    tabIndex: Number
  },
  data () {
    return {
    }
  },
  methods: {
    changeTab: function (tab) {
      this.$emit(&#39;changeTab&#39;, tab)
    }
  }
}

Copy after login

style

  <style scoped lang="scss">
.my-tabs {
  font-size: 14px;
  color: #444;
}
 .tabs-bar {
   border-bottom: 1px solid #eee;
   position: relative;
   padding: 5px 0;
 }
 .tabs-bar-nav {
   display: table;
   margin-left: 35px;
   position: absolute;
   bottom: -1px;
 }
 .tabs-tab {
   min-width: 110px;
   padding: 5px 0;
   position: relative;
   display: inline-block;
   text-align: center;
   cursor: pointer;
 }
 .tabs-active {
   border-top: 1px solid pink;
   border-left: 1px solid pink;
   border-right: 1px solid pink;
   border-bottom: 1px solid #fff;
 }
 .tabs-content {
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 30px;
 }
</style>

Copy after login

Quote

The following one and two are just p inside.

  <!-- Tabs -->
    <my-tabs :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeTab">
      <keep-alive>
        <component :is="currentContent">
        </component>
      </keep-alive>
    </my-tabs>

Copy after login

import MyTabs from &#39;../componets/tabs.vue&#39;
import One from &#39;./one.vue&#39;
import Two from &#39;./two.vue&#39;

export default {
  name: &#39;Home&#39;,
  components: {
    MyTabs,
    &#39;one&#39;: One,
    &#39;two&#39;: Two
  },
  data () {
    return {
      tabIndex: 0,
      currentContent: &#39;one&#39;,
      tabList: [
        {
          index: 0,
          name: &#39;选项一&#39;,
          component: &#39;one&#39;
        },
        {
          index: 1,
          name: &#39;选项二&#39;,
          component: &#39;two&#39;
        }
      ]
    }
  },
  methods: {
     // 切换选项卡
    changeTab: function (tab) {
      this.tabIndex = tab.index
      this.currentContent = tab.component
    }
  }
}

Copy after login

demo

tabs.png

Related recommendations:

Jquery encapsulates tab automatic switching effect Specific implementation_jquery

Tab switching component (tab function) example code_jquery

The above is the detailed content of How to encapsulate components in vue? How to encapsulate vue tab switching components (with code). For more information, please follow other related articles on the PHP Chinese website!