Detailed explanation of the steps to use the vue mint-ui tabbar component

This time I will bring you a detailed explanation of the steps for using the vue mint-ui tabbar component. What are the precautions when using the vue mint-ui tabbar component. Here are actual cases, let’s take a look.

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

Introduce the component into the page where you need to use the tabbar component

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")],
     }
  },
}

html

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

Supplement:

mint-ui ——tabbar example

Import

Import on demand:

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

Global import: No need to import again after global import

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of JS Baidu search box effect function implementation case

Implementing web front-end internationalization based on jQuery.i18n change

The above is the detailed content of Detailed explanation of the steps to use the vue mint-ui tabbar component. For more information, please follow other related articles on the PHP Chinese website!