在vue中利用mint-ui实现tabbar的切换，点击切换颜色

本文链接：https://blog.youkuaiyun.com/document_write/article/details/96574970

本文介绍了如何在Vue项目中利用Mint-UI组件库，详细步骤包括安装Mint-UI，引入所需样式，在components创建Tabbar组件并配置路由，最后在APP.vue中进行相关代码实现，从而实现Tabbar点击切换颜色的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：安装mint-ui，并且在main.js中引入minu-ui以及样式

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

二：在components中新建tabbar页面，需要几个新建几个；并且设置好路由；

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import one from '@/components/tabbar/one'
import two from '@/components/tabbar/two'
import three from '@/components/tabbar/three'
import four from '@/components/tabbar/four'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/one',
      name: 'one',
      component: one
    },
    {
      path: '/two',
      name: 'two',
      component: two
    },

    {
      path: '/three',
      name: 'three',
      component: three
    },
    {
      path: '/four',
      name: 'four',
      component: four
    }
  ]
})

三：APP.vue中的代码

<template>
  <div id="app">
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="0">
        <img slot="icon" class="ss" src="./components/image/home.png" v-if="selected!=0">
        <img slot="icon" class="ss" src="./components/image/L_home2.png" v-else>
        首页
      </mt-tab-item>
      <mt-tab-item id="1">
        <img slot="icon" src="./components/image/L_fenlei.png" v-if="selected!=1">
        <img slot="icon" src="./components/image/L_fenlei2.png" v-else>
        分类
      </mt-tab-item>
      <mt-tab-item id="2">
        <img slot="icon" src="./components/image/L_find.png" v-if="selected!=2">
        <img slot="icon" src="./components/image/L_find2.png" v-else>
        发现
      </mt-tab-item>
      <mt-tab-item id="3">
        <img slot="icon" src="./components/image/L_shopping.png" v-if="selected!=3">
        <img slot="icon" src="./components/image/L_shopping2.png" v-else>
        购物车
      </mt-tab-item>
      <mt-tab-item id="4">
        <img slot="icon" src="./components/image/L_my.png" v-if="selected!=4">
        <img slot="icon" src="./components/image/L_my2.png" v-else>
        我的
      </mt-tab-item>
    </mt-tabbar>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      selected: 0
    }
  },
  watch: {
    selected: function (val, oldVal) {
      switch (val) {
        case '0':
          this.$router.push('/')
          break
        case '1':
          this.$router.push('/one')
          break
        case '2':
          this.$router.push('/two')
          break
        case '3':
          this.$router.push('/three')
          break
        case '4':
          this.$router.push('/four')
          break
      }
    }

  }

}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;

  }
  body{
    margin:0;
    padding: 0;
  }
  ul li {
    list-style: none;
  }
  .mint-tabbar > .mint-tab-item.is-selected{
    color: deeppink;
    background: #fff;
  }
  .mint-tabbar{
    border:0;
    background: #fff;
    border-color: #fff;
  }
</style>