Comment encapsuler des composants dans vue ? Comment encapsuler les composants de commutation d'onglet Vue (avec code)

Comment Vue encapsule-t-il les composants ? Quelle est l’implémentation spécifique des composants encapsulés Vue ? Ici, je vais partager avec vous comment encapsuler le composant de changement d'onglet dans Vue. Jetons un coup d'œil à l'implémentation spécifique du code.

Exigences

1. Version simple
   L'onglet correspondant à l'onglet est simplement du texte ordinaire et est principalement utilisé pour les composants d'affichage.

2. Version complexe
   L'onglet correspondant à l'onglet comprend des tableaux, des boutons, des icônes, des formulaires et d'autres éléments, notamment l'interaction des données, la communication avec les composants parents, etc.

3. Optimisation des performances
   Mettez en cache les composants lors du changement d’onglet.

Plan

• Accessoire
  Le composant parent transmet les paramètres au composant enfant.
  tabList (liste des titres des onglets), tabIndex (numéro de l'onglet actuel)

• Événement personnalisé
  Événement de changement d'onglet

• emplacement
  Distribution de contenu

• Composants dynamiques
  keep-alive : Si vous conservez le composant commuté en mémoire, vous pouvez conserver son état ou éviter un nouveau rendu

complication

Si c'est la première exigence, vous Vous n'avez pas besoin d'écrire des composants vous-même, les fonctions existantes dans le cadre de l'interface utilisateur peuvent pleinement répondre à vos besoins.

S'il s'agit de la deuxième exigence, il n'y a généralement pas de composant d'interface utilisateur complètement adapté, et cet exemple est ma solution personnelle.

• Encapsuler la partie publique des onglets

• La zone de contenu correspondant à l'onglet utilise la distribution de contenu de slot

• ajax Les opérations telles que la demande de données sont effectuées dans le composant de contenu de distribution.

• Fonction crochet activée
  Surveillez si le composant est activé via activé.

Implémentation spécifique

modèle

  <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>

script

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

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>

Citation

Les un et deux suivants ont juste un p à l'intérieur.

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

import MyTabs from '../componets/tabs.vue'
import One from './one.vue'
import Two from './two.vue'

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

demo

tabs.png

Recommandations associées :

Jquery Implémentation spécifique de l'encapsulation du changement automatique d'onglet effect_jquery

Composant de changement d'onglet (fonction de tabulation) exemple code_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!