Comment utiliser la barre d'onglets vue mint-ui (avec code)

Cette fois, je vais vous montrer comment utiliser la barre de tabulation vue mint-ui (avec code), quelles sont les précautions pour utiliser la barre de tabulation vue mint-ui, ce qui suit est un cas pratique, prenons un regarder.

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>

Ajouté :

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 :

Comment utiliser JS+CSS3 pour réaliser un zoom avant et arrière d'une image en réponse au mouvement de la souris

Comment utiliser le code Yuansheng JS pour implémenter le champ de recherche Baidu

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!