三、Vant示例引入vant示例菜單組件封裝

一、底部菜單組件封裝使用

1、components目錄下新建tabbar.vue文件夾代碼如下：

代碼如下：

<template>
  <van-tabbar v-model="active" inactive-color="#777777" active-color="#000000">
    <van-tabbar-item v-for="(item,index) in tabbars" :key="index" :to="(item.name)">
      <span>{{item.title}}</span>
      <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      tabbars: [
        {
          name: "Test1",
          title: "發現",
          normal:
            "http://sucai.suoluomei.cn/sucai_zs/images/20190910093117-fx2.png",
          active:
            "http://sucai.suoluomei.cn/sucai_zs/images/20190910093117-fx.png"
        },
        {
          name: "Test2",
          title: "學習",
          normal:
            "http://sucai.suoluomei.cn/sucai_zs/images/20190910093117-xx.png",
          active:
            "http://sucai.suoluomei.cn/sucai_zs/images/20190910093117-xx2.png"
        },
        {
          name: "Test3",
          title: "我的",
          normal:
            "http://sucai.suoluomei.cn/sucai_zs/images/20190910093117-wd.png",
          active:
            "http://sucai.suoluomei.cn/sucai_zs/images/20190910093117-wd2.png"
        }
      ]
    };
  },
  methods: {},
  //通過路由跳轉判斷選中的樣式
  created() {
    if (this.$route.name == "Test1") {
      this.active = 0;
    } else if (this.$route.name == "Test2") {
      this.active = 1;
    } else if (this.$route.name == "Test3") {
      this.active = 2;
    }
  }
};
</script>

<style>
</style>

如圖如下：

 2、全局配置組件按需使用

代碼如下：

import 'vant/lib/index.css'; 

import {Button ,Tabbar, TabbarItem } from 'vant';

//在需要的頁面中就可以直接使用，頁面當中也無需再次引入
Vue.use(Button).use(Tabbar).use(TabbarItem); 

如圖所示：

 3、頁面使用組件

代碼如下：

<template>
  <div>
     <h1>列表頁面1</h1>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "../../components/tabbar.vue";  //引用組件的地址
export default {
  components: {
    'tabbar': tabbar
  },
  data() {
    return {};
  },
  methods: {},

};
</script>

<style>
</style>

如圖所示:

 效果如下：

二、配置頂部導航欄

1、main添加

 test1.vue