Nuxt - Vant 2 Tabbar 标签栏（详细使用教程）

前言

使用 Nuxt.js 做移动端，采用 Vant 2 作为组件库，网上大部分 Tabbar 标签栏组件使用都是不规范的。

本文将带您一路复制，从 0-1 完成该功能，

具体效果如下图所示：

第一步

首先要将组件进行封装，后续使用或维护方便。

打开项目 components 目录，

建一个 tabbar.vue 组件，复制并修改以下代码：

<template>
  <div>
    <van-tabbar
    v-model="isAct"
    active-color="#4974FD"
    >
        <van-tabbar-item
        v-for="(item, index) in list"
        :key="index"
        :icon="item.icon"
        :to="item.url"
        >
            {
   
   { item.name }}
        </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
      
      

    props: {
      
      
      active: {
      
      
        type: [String, Number],
        default: 0,
      }
    },

    // 对active进行监听赋值
    watch: {
      
      
      active: {
      
      
        immediate: true,
        handler(value) {
      
      
          // String类型无效,转换一下
          this.isAct = parseInt(value) 
        }
      }
    },

    data() {
      
      
        return {
      
      
            // 当前索引
            isAct: 0,
            // 图标及名称/路由等
            list: [
                {
      
      
                    name: '首页',//名称
                    url: '/',//路由
                    icon: 'wap-home'//图标
                },
                {
      
      
                    name: '学校',
                    url: '/school',
                    icon: 'shop'
                },
                {
      
      
                    name: '资讯',
                    url: '/info',
                    icon: "column"
                },
                {
      
      
                    name: '试题',
                    url: '/quest',
                    icon: "graphic"
                },
                {
      
      
                    name: '我的',
                    url: '/my',
                    icon: "manager"
                },
            ]

        }
    },
}
</script>

<style scoped>

</style>

第二步

由于很多页面需要使用，故注册为全局组件。

打开项目 plugins 文件夹，

建一个 components.js 文件，复制并修改以下代码：

import Vue from 'vue';

// public components
import tabbar from '@/components/tabbar.vue';//注意路径！！

Vue.component('Tabbar', tabbar)

接着打开 nuxt.config.js 配置文件，在 plugins 配置项中加入以下代码：

{
    
     src: '@/plugins/components', ssr: true }

第三步

马上准备就绪，我们先来准备点页面。

您需要在 pages 目录下建立几个页面，代码为空即可。

Nuxt 会自动生成路由

开始测试

请您放大如下图片，引入组件及修改相关代码：

请您仔细分析，便可成功完成！

SEO

Nuxt - Vant 2 Tabbar 标签栏（详细使用教程），Nuxt使用vant导航栏组件tabbar，Vant Tabbar 标签栏 | Vant 教程，Nuxt怎么使用Vant 2 Tabbar 标签栏？Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件，Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件，vant2 tabbar_tabbar_js tabbar，Vant的Tabbar标签栏引入自定义图标方式，超详细教程实现Vue底部导航栏TabBar，vue中使用vant组件库中的tabbar标签栏组件。