la barre d'onglets vue mint-ui est utilisée comme composant

Cet article présente principalement comment utiliser le composant variable vue mint-ui tabbar et l'exemple de code. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

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 &#39;MainPage&#39;:
          this.$router.push(&#39;/mainpage&#39;);
        break;
        case &#39;ShoppingList&#39;:
          this.$router.push(&#39;/shoppinglist&#39;);
        break;
        case &#39;GroupList&#39;:
          this.$router.push(&#39;/grouplist&#39;);
        break;
        case &#39;UserCenter&#39;:
          this.$router.push(&#39;/usercenter&#39;);
        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ément :

mint-ui - exemple de barre de tabulation

Importer

Importer à la demande :

Importation globale : 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);

Recommandations associées :

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

Développement Vue.js Explication détaillée des étapes du framework mpvue

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!