Explication détaillée des étapes d'utilisation du composant de barre d'onglets vue mint-ui

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation du composant vue mint-ui tabbar Quelles sont les précautions lors de l'utilisation du composant vue mint-ui tabbar. Voici un cas pratique. , jetons un coup d'oeil.

Créer un nouveau tabbar.vue

<template>
 <mt-tabbar v-model="message" fixed>
    <mt-tab-item id="MainPage">
      <img slot="icon" :src="this.atabs[0]">
      主页
    </mt-tab-item>
    <mt-tab-item id="ShoppingList">
      <img slot="icon" v-bind:src="this.atabs[1]">
      积分商城
    </mt-tab-item>
    <mt-tab-item id="GroupList">
      <img slot="icon" v-bind:src="this.atabs[2]">
      微社区
    </mt-tab-item>
    <mt-tab-item id="UserCenter">
      <img slot="icon" v-bind:src="this.atabs[3]">
      我的
    </mt-tab-item>
  </mt-tabbar>
</template>
<script>
export default {
  data(){
    return{
    //选中的tabbar值message为外面页面传入的值selected
      message:this.selected,
    //这里使用的icon图标为图片，所以需要加图片改变的传入，若使用阿里图标，则不用加
      atabs:this.tabs,
    }
  },
  props:{
    selected: String,
    tabs:Array,
  },
  watch: {
    message: function (val, oldVal) {
      // 这里就可以通过 val 的值变更来确定去向
      switch(val){
        case 'MainPage':
          this.$router.push('/mainpage');
        break;
        case 'ShoppingList':
          this.$router.push('/shoppinglist');
        break;
        case 'GroupList':
          this.$router.push('/grouplist');
        break;
        case 'UserCenter':
          this.$router.push('/usercenter');
        break;
      }
    }
  },
}
</script>

Introduire le composant

html dans

import tabbar from '../../components/tabbar'
export default {
  components:{tabbar},
  data(){
    return{
      selected:"ShoppingList",
      tabs:[require("../../assets/images/icon/zhuye.png"),require("../../assets/images/icon/icon42-1.png"),
         require("../../assets/images/icon/weuquan1.png"),require("../../assets/images/icon/huijia.png")],
     }
  },
}

<tabbar :selected="selected" :tabs=&#39;tabs&#39;></tabbar>

Supplémentaire :

mint-ui - exemple de barre de tabulation

Importer

Introduire à la demande :

Import global : pas besoin d'importer à nouveau après l'importation globale

import { Tabbar, TabItem } from 'mint-ui';
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, plus Veuillez faire attention aux autres articles connexes sur le site php chinois !

importMintfrom'mint-ui'
import'mint-ui/lib/style.css'
Vue.use(Mint);

Lecture recommandée :

Explication détaillée du cas d'implémentation de la fonction d'effet de boîte de recherche JS Baidu

Mise en œuvre de l'internationalisation frontale du Web basé sur jQuery.i18n Transform

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!